Kiểm tra các thành phần React bằng Jest và Thư viện kiểm thử React

Các bài kiểm tra viết có thể tẻ nhạt và lặp đi lặp lại. Bạn có thể cảm thấy như bạn đang lãng phí thời gian quý báu mà bạn muốn sử dụng để làm việc trên các tính năng. Tuy nhiên, nếu bạn muốn gửi các ứng dụng mà bạn tin tưởng, bạn nên viết thử nghiệm.

Kiểm tra cho phép bạn phát hiện ra những sai lầm và lỗi mà nếu không, bạn có thể sẽ giao hàng cho người dùng. Do đó, nó cải thiện trải nghiệm người dùng đối với ứng dụng của bạn và giúp bạn không phải gỡ lỗi mã sản xuất.

Bạn có thể dễ dàng viết các bài kiểm tra trong React bằng cách sử dụng Jest và Thư viện kiểm thử React.

Bạn nên thử nghiệm gì trong React?

Quyết định những gì để kiểm tra có thể khó khăn. Mặc dù các bài kiểm tra là tuyệt vời, nhưng bạn không nên kiểm tra mọi dòng trong ứng dụng React của mình. Làm như vậy sẽ để lại cho bạn những bài kiểm tra giòn giã với sự thay đổi nhỏ nhất trong ứng dụng của bạn.

Thay vào đó, bạn chỉ nên kiểm tra việc triển khai của người dùng cuối. Điều này có nghĩa là kiểm tra xem người dùng cuối sẽ sử dụng ứng dụng của bạn như thế nào thay vì kiểm tra hoạt động bên trong của ứng dụng.

Hơn nữa, hãy đảm bảo bạn kiểm tra các thành phần được sử dụng nhiều nhất trong ứng dụng của mình, như trang đích hoặc thành phần đăng nhập. Ngoài ra, hãy kiểm tra các tính năng quan trọng nhất trong ứng dụng của bạn. Ví dụ: đây có thể là các tính năng mang lại tiền, như tính năng giỏ hàng.

Khi quyết định kiểm tra những gì, một điều cần ghi nhớ là không bao giờ kiểm tra chức năng mà React tự xử lý. Ví dụ: thay vì kiểm tra tính hợp lệ của các đạo cụ, bạn có thể sử dụng React PropTypes.

Kiểm tra thành phần nút

Hãy nhớ rằng, bạn chỉ nên kiểm tra việc triển khai của người dùng cuối của một thành phần chứ không phải hoạt động bên trong của nó. Đối với một thành phần nút, điều này có nghĩa là xác minh nó hiển thị mà không gặp sự cố và hiển thị chính xác.

Tạo một tệp mới trong src thư mục được gọi là Button.js và thêm mã sau.

function Button({value}) {
return (
<button>{value}</button>
)
}
export default Button

Button.js chấp nhận một giá trị được gọi là prop và sử dụng nó làm giá trị nút.

Viết bài kiểm tra đầu tiên của bạn

Một ứng dụng tạo-phản ứng-ứng dụng được cài đặt sẵn với Jest và Thư viện thử nghiệm phản ứng. Jest là một thư viện thử nghiệm nhẹ với các chức năng chế nhạo và khẳng định được tích hợp sẵn. Nó hoạt động với nhiều khung JavaScript. Mặt khác, Thư viện thử nghiệm React cung cấp các chức năng để giúp bạn kiểm tra cách người dùng tương tác với các thành phần.

Tạo một tệp mới có tên Button.test.js trong thư mục src. Theo mặc định, Jest xác định các tệp có hậu tố là .test.js dưới dạng tệp thử nghiệm và tự động chạy chúng. Một tùy chọn khác là thêm các tệp thử nghiệm của bạn vào một thư mục có tên __kiểm tra__.

Thêm mã sau vào Button.test.js để tạo thử nghiệm đầu tiên.

import { render } from '@testing-library/react';
import Button from '../Button';
describe('Button component', () => { 
test('Renders the button component without crashing', () => {
render(<Button />);
});      
})

Thử nghiệm này đầu tiên xác định thử nghiệm là gì về việc sử dụng khối mô tả do Jest cung cấp. Khối này rất hữu ích để nhóm các bài kiểm tra liên quan. Ở đây, bạn đang nhóm các bài kiểm tra cho thành phần Nút.

Bên trong khối mô tả, bạn có bài kiểm tra đầu tiên trong khối kiểm tra. Khối này chấp nhận một chuỗi mô tả những gì kiểm tra phải làm và một hàm gọi lại thực thi kỳ vọng.

Trong ví dụ này, thử nghiệm sẽ hiển thị thành phần Nút mà không bị treo. Phương thức kết xuất từ ​​Thư viện thử nghiệm React thực hiện thử nghiệm thực tế. Nó kiểm tra xem thành phần Nút có hiển thị chính xác hay không. Nếu nó đạt, bài kiểm tra sẽ vượt qua, nếu không nó không thành công.

Sử dụng vai trò để tìm nút

Đôi khi bạn muốn kiểm tra xem phần tử đã được gắn kết chưa. Phương thức màn hình có một hàm getByRole () mà bạn có thể sử dụng để lấy một phần tử từ DOM.

screen.getByRole('button')

Sau đó, bạn có thể sử dụng phần tử mà bạn đã nắm bắt để thực hiện các bài kiểm tra như kiểm tra xem nó có tồn tại trong tài liệu hay được hiển thị chính xác hay không.

getByRole () là một trong nhiều truy vấn bạn có thể sử dụng để chọn các phần tử trong một thành phần. Kiểm tra các loại truy vấn khác trong Hướng dẫn “Tôi nên sử dụng truy vấn nào” của Thư viện thử nghiệm phản ứng. Ngoài vai trò “nút”, hầu hết các phần tử HTML ngữ nghĩa đều có các vai trò ngầm mà bạn có thể sử dụng để thực hiện các truy vấn của mình. Tìm danh sách các vai trò từ tài liệu MDN.

Thêm phần sau vào khối kiểm tra để xác minh kết xuất thành phần.

test('Renders button without crashing', () => {
render(<Button value="Sign up" />);
expect(screen.getByRole('button')).toBeInTheDocument()
});

Trình so khớp toBeInTheDocument () kiểm tra xem phần tử nút có tồn tại trong tài liệu hay không.

Mong đợi nút hiển thị chính xác

Thành phần Nút chấp nhận một giá trị chống đỡ và hiển thị nó. Để nó hiển thị chính xác, giá trị mà nó hiển thị phải giống với giá trị bạn đã nhập.

Tạo một khối thử nghiệm mới và thêm mã sau.

test('Renders button correctly', () => {
render(<Button value="Login" />);
expect(screen.getByRole('button')).toHaveTextContent("Login")
})

Lưu ý rằng bạn không cần phải dọn dẹp sau các thử nghiệm khi sử dụng Thư viện thử nghiệm React. Trong các phiên bản trước đây, bạn cần phải dọn dẹp theo cách thủ công như sau:

afterEach(cleanup)

Bây giờ, thư viện thử nghiệm tự động ngắt kết nối các thành phần sau mỗi lần hiển thị.

Tạo Kiểm tra Ảnh chụp nhanh

Cho đến nay, bạn đã kiểm tra hành vi của thành phần Nút. Viết các bài kiểm tra ảnh chụp nhanh để kiểm tra xem đầu ra của thành phần có giữ nguyên hay không.

Kiểm tra ảnh chụp nhanh so sánh đầu ra hiện tại với đầu ra được lưu trữ của thành phần. Ví dụ: nếu bạn thay đổi kiểu của thành phần Nút, kiểm tra ảnh chụp nhanh sẽ thông báo cho bạn. Bạn có thể cập nhật ảnh chụp nhanh để phù hợp với thành phần đã thay đổi hoặc hoàn tác các thay đổi kiểu.

Kiểm tra ảnh chụp nhanh rất hữu ích bất cứ khi nào bạn muốn đảm bảo giao diện người dùng của mình không thay đổi bất ngờ.

Kiểm tra ảnh chụp nhanh khác với kiểm tra đơn vị vì bạn cần phải có mã hoạt động để tạo ảnh chụp nhanh.

Bạn sẽ sử dụng phương thức kết xuất từ ​​gói npm của trình kết xuất phản ứng. Vì vậy, hãy thực thi đoạn mã sau để cài đặt nó.

npm install react-test-renderer

Trong Button.test.js, viết kiểm tra ảnh chụp nhanh như sau:

test('Matches snapshot', () => {
const tree = renderer.create(<Button value="Login" />).toJSON();
expect(tree).toMatchSnapshot();
})

Không có ảnh chụp nhanh hiện có cho thành phần Nút, vì vậy việc chạy kiểm tra này sẽ tạo tệp ảnh chụp nhanh cùng với tệp kiểm tra:

Button
└─── __tests__
│   │   Button.tests.js
│   └─── __snapshot__
│       │   Button.test.js.snap
│   
└─── Button.js

Bây giờ, khi bạn chạy thử nghiệm tiếp theo, React sẽ so sánh ảnh chụp nhanh mới mà nó tạo ra với ảnh được lưu trữ.

Viết thử nghiệm cho các thành phần được sử dụng nhiều nhất

Hướng dẫn này đã dạy bạn cách viết thử nghiệm DOM và ảnh chụp nhanh trong React bằng cách thử nghiệm thành phần Nút. Viết bài kiểm tra cho tất cả các thành phần bạn tạo có thể tẻ nhạt. Tuy nhiên, những thử nghiệm này giúp bạn tiết kiệm thời gian mà bạn sẽ phải bỏ ra để gỡ lỗi mã đã được triển khai.

Bạn không cần phải đạt được phạm vi kiểm tra 100 phần trăm nhưng hãy đảm bảo rằng bạn đang viết các bài kiểm tra cho các thành phần được sử dụng nhiều nhất và quan trọng nhất của bạn.