Cách test ứng dụng react redux?

786

Bài viết của tác giả Nguyen The Toan trên viblo.asia

Bài viết này mình sẽ hướng dẫn cách test redux app với Jest và Enzyme.

Cài đặt Jest và Enzyme

  • Jestyarn add --dev jest hoặc npm install --save-dev jest
  • Enzyme: tuỳ thuộc vào phiên bản react hiện tại, bạn cài đặt enzyme cùng với adapter thích hợp. Ví dụ phiên bản react trong project là 16: yarn add --dev enzyme enzyme-adapter-react-16 hoặc npm i --save-dev enzyme enzyme-adapter-react-16
  • Chú ý: bạn nên cài thêm package babel-jest để jest compile JS sử dụng babel (npm install --save-dev babel-jest babel-core hoặc yarn add --dev babel-jest babel-core)

Reducer test

Reducer là pure function, nó lấy state có sẵn và một action để trả về state mới sau khi action được gọi, vì thế sẽ k có side effect nên mocking ở đây là không cần thiết.

Jest mặc định sẽ tìm kiếm các file test trong thư mục __test__ và extension có dạng .spec.js hoặc .test.js. Ví dụ reducer được đặt trong thư mục src/store/topics/reducer.js thì ta có thể tạo thư mục test như sau src/__test__/store/topics/reducer.spec.js.

Case test đơn giản nhất với reducer là khi khởi tạo, lúc này ta chỉ cần khai báo state khởi tạo mà không liên quan gì đến action:

Giả sử ta thêm một action và kiểm tra state được trả về có đúng hay không:

Cá nhân mình thấy rspec và jest test khá giống nhau, dễ đọc và hiểu từng test case  .

Nếu state object phức tạp, redux-testkit có các method cho nested state hoặc sử dụng custom expectations. (tham khảo thêm tại đây)

Action test (middleware mặc định: thunks)

Thunks wrap sync hoặc async function để thực hiện action. Nó có thể tạo ra các side effect như truy xuất dữ liệu từ server, vậy mock function ở đây là cần thiết.
Ví dụ:

Component test

  1. Snapshot test
    Jest có chức năng snapshot testing được rất nhiều công ty ưa chuộng, ban đầu jest sẽ capture cấu trúc của component, cấu trúc này sẽ được lưu vào thư mục __snapshot__. Khi có bất kì thay đổi trong component đã được snapshot trước đó, test case với component được capture sẽ lỗi.
    Ví dụ ta có component Link:

    Ta sẽ tạo snapshot bằng method toMatchSnapshot() :

    Nếu bạn chủ động cho phép thay đổi cấu trúc trong component, bạn cần update snapshot cho component bằng câu lệnh jest -u .
  2. DOM test sử dụng enzyme shallow renderer :
    Được sử dụng khi bạn muốn test các element trong DOM tree. Ví dụ bạn có component sau:

    Component sẽ được test như sau:

    Kết

    Hy vọng bài viết một phần giúp bạn hình dung ra unit test của react redux. Nếu có bất kì thắc mắc, hãy comment bên dưới