Giới thiệu về Jest

Giới thiệu về Jest

Công dụng

Jest là một framework kiểm thử JavaScript được phát triển bởi Facebook. Nó được thiết kế để đơn giản hóa quá trình viết và chạy các test case, giúp đảm bảo chất lượng code của bạn.

Nền tảng

Jest có thể hoạt động trên nhiều nền tảng khác nhau, bao gồm:

• Node.js: Đây là nền tảng chính mà Jest được sử dụng.
• Các framework frontend: React, Angular, Vue, …
• Các build tool: Babel, TypeScript, webpack, …

Những gì có thể làm được

• Viết test case: Cho các hàm, component, module,…
• Chạy test case: Một cách nhanh chóng và hiệu quả.
• Snapshot testing: So sánh cấu trúc của UI hoặc dữ liệu với một phiên bản đã lưu trước đó.
• Mock function: Tạo các hàm giả để kiểm soát hành vi của các hàm khác trong quá trình test.
• Code coverage: Đo lường mức độ bao phủ của các test case đối với codebase.

Điểm mạnh

• Dễ sử dụng: Cú pháp đơn giản, dễ học.
• Nhanh: Thời gian chạy test nhanh chóng.
• Cấu hình linh hoạt: Có thể tùy chỉnh để phù hợp với nhiều dự án khác nhau.
• Cộng đồng lớn: Được hỗ trợ bởi một cộng đồng người dùng đông đảo.

Điểm yếu

• Đường cong học tập: Mặc dù dễ học nhưng để tận dụng hết các tính năng của Jest thì cần thời gian làm quen.
• Khối lượng lớn: Có thể trở nên phức tạp khi dự án lớn và có nhiều test case.

Cách thức setup

Để setup Jest cho dự án của bạn, bạn có thể tham khảo tài liệu chính thức của Jest: https://jestjs.io/docs/getting-started

Các bước cơ bản:

1. Cài đặt: Bashnpm install --save-dev jest
2. Tạo file cấu hình (tùy chọn): Tạo file jest.config.js ở gốc dự án để tùy chỉnh cấu hình cho Jest.
3. Viết test case: Tạo file test (thường có đuôi .test.js hoặc .spec.js) và bắt đầu viết test case.

Một số testcase cơ bản

JavaScript

// test.js
function sum(a, b) {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Giải thích:

• test: Một hàm để định nghĩa một test case.
• expect: Một hàm để đưa ra một giá trị mong đợi.
• toBe: Một matcher để kiểm tra xem hai giá trị có bằng nhau hay không.

Để chạy test:Bash

npx jest

Ví dụ nâng cao

JavaScript

// component.js
import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// component.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Greeting from './component';

test('renders a greeting', () => {
  render(<Greeting name="World" />);
  const greetingElement = screen.getByText(/hello/i);
  expect(greetingElement).toBeInTheDocument();
});

Ví dụ này sử dụng:

• @testing-library/react: Một thư viện giúp viết test cho các component React.
• render: Render một component vào DOM ảo để test.
• screen: Một đối tượng giúp tìm các element trong DOM ảo.
• userEvent: Một thư viện giúp mô phỏng các tương tác của người dùng.

Lưu ý:

• Đây chỉ là những ví dụ cơ bản. Jest cung cấp rất nhiều tính năng và tùy chọn khác để bạn khám phá.
• Bạn nên tham khảo tài liệu chính thức của Jest và các thư viện liên quan để tìm hiểu thêm.