Javascript

Javascript: Unit testing React Component với Jest và Enzyme

Sau khi chúng ta thống nhất structure và chia những component trong React, chúng ta bắt đầu phần cài đặt cho từng component, kiểm thử bằng tay và sau đó viết unit testing. Vậy tại sao phải viết unit test cho những component trong React?

  • Đảm bảo code chúng ta chạy đúng một lần nữa sau vòng manual testing
  • Kiểm tra lại toàn bộ những input(hay props) của component, cũng như function để rà soát kỹ hơn những trường hợp ngoại lệ, nhất là với null, undefined data.

Trong Reactjs chúng ta có thể dùng một số công cụ sau để viết unit testing cho những component:

1. Jest

Jest là một JS framework khá thú vị và đơn giản được dùng để viết unit testing. Nó có thể làm việc tốt trên: React, Angular, Vue, Javascipt, Typescript.

Jest có một số ưu điểm như sau:

  • Nhanh, tối ưu.
  • Cấu hình đơn giản
  • Tuỳ chọn Code coverage 
  • Mocking dễ dàng

2. Enzyme

Enzyme là một JS framework dùng để test React component dễ dàng hơn. Bạn có thể thao tác, duyệt DOM.

Một số cách để render một component trong enzyme:

  • Shallow rendering

Được dùng để test component như một đơn vị và không thể truy cập vào các component con. Với phiên bản mới(v3), shallow rendering đã hỗ trợ test componentDidMount và componentDidUpdate

  • Mount

Còn được gọi là Full DOM rendering, nó cho phép chung ta vẽ lên một cây DOM cho component đó và cho cả component con.

  • Static rendering

Tạo ra HTML từ compoenent. Chỉ gọi hàm render của component. Không có lifecycle hooks.

Túm lại chúng ta đã tìm hiểu một chút về Jest và Enzyme. Ở những bài viết sau chúng ta sẽ xem chi tiết cách cài đặt và viết unit testing cho component trong React như thế nào. See you 🙂

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *