Kiểm tra các thành phần thực hành tốt nhất

bởi nhà phát triển React @ Selleo

Cách tiếp cận phổ biến nhất để kiểm tra các thành phần React là sử dụng Mocha + Chai + Enzyme hoặc Jest + Enzyme. Trong bài viết này, chúng tôi sẽ mô tả các thực hành kiểm tra thành phần React của chúng tôi với Jest + Enzyme cũng có thể áp dụng cho Mocha + Chai.

Nếu bạn chưa quen với việc kiểm tra các thành phần React, bạn cũng nên đọc:

  • tạo phần-phản ứng-ứng dụng Phần README trên thử nghiệm Viết Viết
  • Jest - Bắt đầu
  • Tài liệu API Enzyme

Tổ chức kiểm tra

Trong các dự án JavaScript lớn hơn, chúng tôi đặt các thử nghiệm gần với việc triển khai trong thư mục con __tests__. Thông thường, các kiểm tra cho một thành phần được nhóm theo cấu trúc và hành vi được thêm vào bên trên của nó, như:

Kiểm tra thành phần tối thiểu xác nhận kết xuất thành phần

Các thử nghiệm thành phần tối thiểu xác minh rằng thành phần kết xuất chính xác hay còn gọi là thử nghiệm khói hoặc Thử nghiệm xác minh bản dựng Build. Nó có thể được thực hiện với Enzyme:

hoặc ảnh chụp nhanh nhất:

Sau này tạo tệp __snapshots __ / MainSection.spec.js.snap.

Những thay đổi trong ảnh chụp nhanh được xác nhận cục bộ thông qua ’u, trong trò hề và cam kết với kho git, vì vậy người đánh giá PR có thể thấy chúng. Bạn có thể đọc thêm về Kiểm tra ảnh chụp

Hiện tại, chúng tôi giới hạn việc sử dụng ảnh chụp nhanh để kết xuất thành phần và json phức tạp (nghĩa là cấu hình biểu đồ).

Ok, tôi kiểm tra ám - tôi nên kiểm tra cái gì khác?

Bạn phải nhớ rằng các bài kiểm tra là thứ bạn phải viết và duy trì. Viết các bài kiểm tra tốt đòi hỏi nhiều thủ công như tạo mã ứng dụng.

Các thử nghiệm được đảm bảo chất lượng tự động và tài liệu cho các nhà phát triển. Dự án và nhóm càng lớn là các bài kiểm tra chi tiết hơn bạn cần.

Hãy thử nghĩ về tương lai bạn quay lại thành phần này hoặc tái cấu trúc nó - kỳ vọng của bạn từ các bài kiểm tra là gì?

  • Bị cô lập - tất cả các tương tác với các dịch vụ bên ngoài nên bị chế giễu
  • Cụ thể - nếu thay đổi chức năng nhỏ, bạn muốn nhận thông báo lỗi kiểm tra cụ thể
  • Họ mô tả những gì hệ thống không làm như thế nào để bạn có thể dễ dàng cấu trúc lại

Hãy để Vượt qua một số thực tiễn mà chúng tôi thấy hữu ích trong việc đạt được những mục tiêu đó.

Thiết lập rõ ràng () thay vì trướcEach ()

Lợi ích của việc sử dụng hàm setup () rõ ràng là trong mọi thử nghiệm, rõ ràng thành phần được khởi tạo như thế nào. Đối tượng thiết lập cũng là nơi tốt để kết nối một số chức năng của trình trợ giúp tương tác với trình bao bọc, tức là

Kiểm tra hành vi

Kiểm tra hành vi trong thực tế, nó đi xuống kiểm tra nếu một số đầu vào và các sự kiện mô phỏng nhất định dẫn đến kết quả mong đợi, tức là

Bạn có thể thấy cách thiết lập () làm cho việc viết các bài kiểm tra đó thực sự nhanh chóng!

Sử dụng các hàm trợ giúp

Đôi khi chúng ta phải viết nhiều bài kiểm tra tương tự chỉ với một biến đầu vào được thay đổi. Điều này có thể được giải quyết với chức năng của trình trợ giúp tạo ra thử nghiệm:

Nó đọc nhiều bột và dễ bảo trì hơn.

Tóm lược

Thực tiễn được mô tả trong bài viết này:

  • đặt các thử nghiệm gần với việc thực hiện trong thư mục con __tests__
  • luôn luôn bắt đầu với kiểm tra kết xuất thành phần đơn giản hay còn gọi là kiểm tra khói sau đó kiểm tra hành vi
  • nghĩ về tương lai bạn quay lại thành phần này hoặc tái cấu trúc nó
  • sử dụng thiết lập rõ ràng () và trả về các biến phím tắt phổ biến với nó
  • sử dụng các hàm trợ giúp tạo ra các bài kiểm tra

Chúng tôi hy vọng bạn tìm thấy bài viết này hữu ích. Bạn có thể tìm thấy mã ví dụ hoạt động tại ngã ba mã redux todomvc của tôi tại https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/components/__tests__