Một số tips để viết unit testing Vue Components với Jest

Tram Ho

Sử dụng Jest để test Vue.js components có thể khá khó. Chúng ta cần một package Vue Test Utils (@vue/test-utils) riêng biệt để virtually mount components của chúng ta và sử dụng Jest để thực hiện các test. Bởi vì hai thư viện này làm việc cùng nhau, điều quan trọng là phải đảm bảo rằng chúng ta không bị nhầm lẫn về các lệnh gọi API thuộc thư viện nào. Cùng với các thư viện này, chúng ta cũng cần chú ý đến các phương thức cụ thể của JSDOM (virtual browser environment), đi kèm với Jest. Những điều này có thể gây nhầm lẫn và có thể ngăn cản chúng ta viết unittest.

Ví dụ: shallowMount() là một phương thức của Vue Test Utils để tạo một shallow wrapper component (sử dụng shallow rendering để tránh rendering children components) và beforeEach() là một phương thức của Jest thực thi callback argument trước mỗi test. Chúng ta chạy shallowMount() bên trong beforeEach() để một component được mounted trước mỗi test.
Tôi đã lập một danh sách các phương thức test chung mà team tôi đã sử dụng để giúp việc viết unit test Vue components của chúng tôi thành công. Hy vọng điều này sẽ giúp những người khác trải qua quá trình tương tự.

Initial Setup

Hãy bắt đầu bằng cách thiết lập Jest. Cài đặt Jest npm package devDependencies

Bây giờ, hãy cài đặt ứng dụng Vue Test Utils và các phụ thuộc khác như babel-jest, vue-jest, v.v. (lấy từ Vue Test Utils docs)

Khi chúng ta đã setup tất cả các packages, hãy tạo một file jest config có tên là jest.config.js trong thư mục gốc của dự án chúng ta. Để thay thế, chúng ta cũng có thể thêm đối tượng JSON bên trong module.exports vào thuộc tính jest: {} vào package.json để cắt giảm số lượng tệp cấu hình mà chúng ta phải quản lý.