Kiểm thử và Gỡ lỗi Ứng dụng React

Đừng đoán xem mã của bạn có hoạt động hay không. Hãy sử dụng kiểm thử để xây dựng sự tự tin.

Hầu hết các nhà phát triển bỏ qua việc kiểm thử vì họ thấy việc thiết lập quá khó khăn. Họ coi kiểm thử là một công việc vặt thay vì là một mạng lưới an toàn.

Bạn không viết kiểm thử cho máy tính. Bạn viết kiểm thử cho chính bản thân mình trong tương lai. Khi bạn thay đổi một hàm vào lúc 2 giờ sáng, các bài kiểm thử sẽ cho bạn biết ngay lập tức nếu bạn làm hỏng thứ gì đó.

Hãy coi kiểm thử như một hình kim tự tháp:

• Unit Tests: Kiểm thử một hàm hoặc một component. Những bài kiểm thử này nhanh và có số lượng lớn. • Integration Tests: Kiểm thử cách các phần hoạt động cùng nhau. Chúng mang lại sự tự tin cao. • E2E Tests: Kiểm thử toàn bộ ứng dụng trên trình duyệt. Chỉ sử dụng chúng cho các luồng quan trọng như đăng nhập hoặc thanh toán.

Quy tắc vàng của React Testing Library: Kiểm thử những gì người dùng nhìn thấy.

Đừng kiểm thử các biến state. Đừng kiểm thử các class CSS. Đừng kiểm thử logic nội bộ. Hãy kiểm thử các nút bấm, văn bản và các ô nhập liệu. Nếu người dùng không thể nhìn thấy nó, đừng kiểm thử nó.

Tuân theo mô hình Arrange, Act, Assert:

Đối với mã bất đồng bộ như các lệnh gọi API, hãy sử dụng waitFor. Điều này cho phép bài kiểm thử của bạn chờ dữ liệu tải xong trước khi kiểm tra kết quả.

Nếu ứng dụng của bạn bị lỗi trên môi trường production, hãy sử dụng Error Boundaries. Chúng ngăn chặn một component bị lỗi làm toàn bộ trang web của bạn biến thành một màn hình trắng. Chúng cung cấp một phương án dự phòng mượt mà cho người dùng.

Danh sách kiểm tra gỡ lỗi nhanh:

Hãy tập trung kiểm thử những gì quan trọng. Bạn không cần độ bao phủ (coverage) 100%. Bạn cần bao phủ các tính năng mà nếu chúng lỗi sẽ gây ra hậu quả nghiêm trọng.

Nguồn: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334