Hướng dẫn入门 Kiểm thử ReactJS

Xin chào các nhà phát triển React tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình khám phá thế giới kiểm thử React. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi đã chứng kiến tận mắt cách kiểm thử có thể biến một nhà phát triển giỏi thành một nhà phát triển xuất sắc. Vậy hãy cùng nhau lặn sâu và giải mã kiểm thử React nhé!

ReactJS - Testing

Tại sao kiểm thử lại quan trọng

Trước khi chúng ta bắt đầu lập mã, hãy nghe một câu chuyện nhanh. Tôi từng có một học sinh đã xây dựng một ứng dụng React đẹp mắt. Nó trông hoàn hảo... cho đến khi nó bị crash trong một buổi demo. Đó là khi anh ấy học được một bài học khó khăn: ngoại hình có thể lừa dối, nhưng kiểm thử không bao giờ nói dối. Kiểm thử không chỉ là về việc bắt lỗi; nó còn về sự tự tin. Khi các bài kiểm thử của bạn vượt qua, bạn có thể ngủ ngon giấc biết rằng mã của bạn hoạt động như mong đợi.

Create React App: Sân chơi kiểm thử của bạn

Thiết lập môi trường

Hãy bắt đầu bằng cách tạo một ứng dụng React mới sử dụng Create React App. Công cụ này thiết lập một dự án React sẵn sàng sử dụng với kiểm thử đã được cấu hình sẵn. Mở terminal của bạn và gõ:

npx create-react-app my-react-testing-app
cd my-react-testing-app

Chúc mừng! Bạn vừa tạo ra ứng dụng React đầu tiên của mình với khả năng kiểm thử内置!

Bài kiểm thử đầu tiên

Create React App đi kèm với một tệp kiểm thử mẫu. Hãy cùng xem xét nó. Mở src/App.test.js:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

Hãy phân tích nó:

Chúng ta import các công cụ kiểm thử cần thiết và thành phần App của chúng ta.
Chúng ta định nghĩa một bài kiểm thử sử dụng hàm test.
Chúng ta render thành phần App của chúng ta.
Chúng ta tìm kiếm một phần tử với văn bản "learn react".
Chúng ta mong đợi phần tử này có mặt trong tài liệu.

Để chạy bài kiểm thử này, sử dụng lệnh:

npm test

Nếu mọi thứ được thiết lập chính xác, bạn nên thấy một bài kiểm thử vượt qua. Chúc mừng bạn đã hoàn thành bài kiểm thử React đầu tiên!

Kiểm thử trong một ứng dụng tùy chỉnh

Bây giờ chúng ta đã xem qua một bài kiểm thử cơ bản, hãy tạo thành phần của riêng chúng ta và kiểm thử nó.

Tạo một thành phần đơn giản

Hãy tạo một thành phần đếm đơn giản. Tạo một tệp mới src/Counter.js:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Counter;

Thành phần này hiển thị một số đếm và một nút để tăng nó.

Viết kiểm thử cho thành phần Counter

Bây giờ, hãy kiểm thử thành phần Counter của chúng ta. Tạo một tệp mới src/Counter.test.js:

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('renders initial count of 0', () => {
render(<Counter />);
const countElement = screen.getByText(/count: 0/i);
expect(countElement).toBeInTheDocument();
});

test('increments count when button is clicked', () => {
render(<Counter />);
const button = screen.getByText(/increment/i);
fireEvent.click(button);
const countElement = screen.getByText(/count: 1/i);
expect(countElement).toBeInTheDocument();
});

Hãy phân tích các bài kiểm thử này:

Bài kiểm thử đầu tiên kiểm tra xem số đếm ban đầu có phải là 0 không.
Bài kiểm thử thứ hai mô phỏng một cú nhấp vào nút và kiểm tra xem số đếm có tăng lên 1 không.

Chạy lại npm test, và bạn nên thấy các bài kiểm thử mới này vượt qua!

Các khái niệm kiểm thử nâng cao

Khi bạn trở nên thoải mái với kiểm thử cơ bản, bạn sẽ muốn khám phá các khái niệm nâng cao hơn. Dưới đây là bảng một số phương thức bạn sẽ thường xuyên sử dụng trong kiểm thử React:

Phương thức	Mô tả	Ví dụ
render	Render một thành phần React để kiểm thử	`render(<MyComponent />)`
screen.getByText	Tìm một phần tử bằng nội dung văn bản của nó	`screen.getByText(/hello world/i)`
screen.getByRole	Tìm một phần tử bằng vai trò ARIA của nó	`screen.getByRole('button')`
fireEvent	Mô phỏng các sự kiện DOM	`fireEvent.click(button)`
waitFor	Đợi cho đến khi các kỳ vọng được đáp ứng	`await waitFor(() => expect(element).toBeVisible())`
act	Bọc mã gây ra cập nhật trạng thái React	`act(() => { /* thực hiện các hành động */ })`

Kiểm thử hành vi không đồng bộ

Các ứng dụng React thường liên quan đến các hoạt động không đồng bộ. Hãy tạo một thành phần fetch dữ liệu và kiểm thử nó:

// UserData.js
import React, { useState, useEffect } from 'react';

function UserData() {
const [userData, setUserData] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);

if (!userData) return <div>Loading...</div>;

return <div>User Name: {userData.name}</div>;
}

export default UserData;

Bây giờ, hãy kiểm thử thành phần này:

// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';

test('loads and displays user data', async () => {
render(<UserData />);

expect(screen.getByText(/loading/i)).toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/user name:/i)).toBeInTheDocument();
});
});

Bài kiểm thử này kiểm tra trạng thái tải và sau đó đợi dữ liệu người dùng được hiển thị.

Kết luận

Kiểm thử trong React có thể看起来 đáng sợ lúc ban đầu, nhưng nó là một kỹ năng vô cùng quý giá sẽ làm bạn trở thành một nhà phát triển tốt hơn. Nhớ rằng, mỗi bài kiểm thử bạn viết giống như một mạng an toàn cho mã của bạn. Nó sẽ bắt bạn khi bạn té ngã và cho bạn sự tự tin để leo cao hơn.

Trong hành trình React của bạn, tiếp tục khám phá các kỹ thuật kiểm thử khác nhau. Mock các gọi API, kiểm thử các trạng thái lỗi, và thử viết kiểm thử trước khi viết các thành phần của bạn (Phát triển theo Kiểm thử). Càng thực hành nhiều, bạn sẽ thấy nó trở nên tự nhiên hơn.

Chúc bạn may mắn trong việc kiểm thử, và hy vọng rằng console của bạn luôn xanh với các bài kiểm thử vượt qua!

Credits: Image by storyset

Hướng Dẫn Trước:

ReactJS - Quản lý Trạng thái bằng Flux

Hướng Dẫn Tiếp Theo:

ReactJS - Lệnh CLI