Mocking đối tượng toàn cầu

Tram Ho

Nhạo báng các đối tượng toàn cầu

vue-test-utils cung cấp một cách đơn giản để giả lập các đối tượng toàn cầu được đính kèm với Vue.prototype , cả trên thử nghiệm bằng cơ sở thử nghiệm và để đặt giả định mặc định cho tất cả các thử nghiệm.

Các thử nghiệm được sử dụng trong ví dụ sau đây có thể được tìm thấy ở đây .

Tùy chọn gắn giả

Tùy chọn gắn giả là một cách để đặt giá trị của bất kỳ thuộc tính nào được đính kèm với Vue.prototype . Điều này thường bao gồm:

  • $store , cho Vuex
  • $router , cho $router Vue
  • $t , cho vue-i18n

và nhiều người khác.

Ví dụ với vue-i18n

Sử dụng với Vuex và Vue Router sẽ được thảo luận trong các phần tương ứng, tại đâyđây . Hãy xem một ví dụ với vue-i18n . Mặc dù có thể sử dụng createLocalVue và cài đặt vue-i18n cho mỗi thử nghiệm, nhưng điều đó sẽ nhanh chóng trở nên cồng kềnh và giới thiệu rất nhiều bản tóm tắt. Đầu tiên, một thành phần <Bilingual> sử dụng vue-i18n :

Cách thức hoạt động của vue-i18n là bạn khai báo bản dịch của mình trong một tệp khác, sau đó tham chiếu chúng với $t . Với mục đích của thử nghiệm này, nó thực sự không quan trọng tệp dịch thuật trông như thế nào, nhưng đối với thành phần này, nó có thể trông như thế này:

Dựa trên miền địa phương, bản dịch chính xác được hiển thị. Hãy thử và kết xuất thành phần trong một thử nghiệm mà không có bất kỳ sự chế giễu nào.

Chạy thử nghiệm này với thử nghiệm yarn test:unit ném ra một dấu vết ngăn xếp khổng lồ. Nếu bạn xem qua đầu ra một cách cẩn thận, bạn có thể thấy:

Điều này là do chúng tôi không cài đặt vue-i18n , vì vậy phương thức $t toàn cầu không tồn tại. Hãy thử nó bằng cách sử dụng mocks tùy chọn mount:

Bây giờ bài kiểm tra đã qua! Có rất nhiều công dụng cho mocks tùy chọn. Thường xuyên nhất, tôi thấy mình chế giễu các đối tượng toàn cầu được cung cấp bởi ba gói được đề cập ở trên.

Cài đặt giả định mặc định bằng cách sử dụng cấu hình

Đôi khi bạn muốn có một giá trị mặc định cho giả, vì vậy bạn không tạo nó trên thử nghiệm bằng cơ sở thử nghiệm. Bạn có thể làm điều này bằng cách sử dụng API cấu hình được cung cấp bởi vue-test-utils . Hãy mở rộng ví dụ vue-i18n . Bạn có thể đặt chế độ giả mặc định ở bất cứ đâu bằng cách thực hiện như sau:

Dự án demo cho hướng dẫn này đang sử dụng Jest, vì vậy tôi sẽ khai báo mock mặc định trong jest.init.js , được tải trước khi các bài kiểm tra được chạy tự động. Tôi cũng sẽ nhập đối tượng dịch ví dụ từ trước đó và sử dụng nó trong triển khai giả.

Bây giờ một bản dịch thực sự sẽ được hiển thị, mặc dù sử dụng hàm $t bị chế giễu. Chạy thử nghiệm một lần nữa, lần này sử dụng console.log trên wrapper.html() và loại bỏ các mocks tùy chọn mount:

Bài kiểm tra vượt qua và đánh dấu sau được hiển thị:

Bạn có thể đọc về việc sử dụng mocks để kiểm tra Vuex đây . Kỹ thuật là như nhau.

Phần kết luận

Hướng dẫn này đã thảo luận:

  • sử dụng mocks để thử một đối tượng toàn cầu về một thử nghiệm bằng phương pháp chọn mẫu
  • sử dụng config.mocks để đặt giả lập mặc định
Chia sẻ bài viết ngay

Nguồn bài viết : Viblo