Kiểm tra các thành phần Vue javascript đơn giản mà không có Vue CLI
Có thể kiểm tra các thành phần Vue được phát triển bằng javascript thuần túy mà không cần thiết lập Vue CLI / Webpack / Babel không?
Tài liệu về subjet mà tôi tìm thấy cho đến nay trên Web khá mỏng:
- https://github.com/vuejs/vue-test-utils/issues/1192
- https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
- Cách kiểm tra các thành phần Vue thuần túy (không phải các thành phần tệp đơn lẻ)
Tôi đã cài đặt Vue, Vue test utils, JSDOM
My package.json:
{
"name": "GuichetUnique.CMS",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"jest": "^26.4.2",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12"
},
"devDependencies": {
"@vue/test-utils": "^1.0.5",
"jsdom": "16.4.0",
"jsdom-global": "3.0.2"
},
"scripts": {
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Jest đang chạy tốt với các hàm js đơn giản nhưng tôi chưa quản lý để kiểm tra một thành phần Vue.
Nội dung bài kiểm tra của tôi
require('jsdom-global')();
var testUtils = require('@vue/test-utils'), Vue = require('vue');
testUtils.mount({ template: '<div>test</div>' });
Kết quả kiểm tra
TypeError: Illegal invocation at removeEventListener (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:15)
Hãy giúp tôi !
Trả lời
Chúng tôi đã gặp sự cố tương tự cách đây 2 tháng. Một trường hợp sử dụng hơi khác nhưng đối với chúng tôi, sự phụ thuộc vào VueCLI cụ thể là thủ phạm. Nếu không có nó, chúng tôi không tìm thấy cách nào để chạy thành công ngay cả các thử nghiệm cơ bản.
Tôi nghĩ rằng nếu bạn muốn đi theo con đường này, bạn có thể phải làm rất nhiều việc để bỏ qua các cơ chế đã định. Đối với điều đó, bạn cần phải tự trả lời nếu điều đó là xứng đáng với thời gian của bạn. Chúng tôi đã đi với VueCLI và coi đó là điều hiển nhiên.
Tôi đã thử điều này một năm trước, nơi tôi gặp trường hợp tương tự, nơi tôi không muốn sử dụng CLI / webpack.
Hy vọng đầy đủ nó có thể thêm một số đóng góp trong việc giải quyết truy vấn của bạn.
Để kiểm tra thành phần của bạn mà không có gói web, bạn có thể sử dụng plugin http-vue-loader .
Quy trình làm việc của plugin rất đơn giản
- http yêu cầu tệp vue
- tải tệp vue trong một phân đoạn tài liệu
- xử lý từng phần (mẫu, tập lệnh và kiểu)
- trả về một lời hứa cho Vue.js (thành phần không đồng bộ)
- sau đó Vue.js biên dịch và lưu vào bộ nhớ cache của thành phần
Trên thực tế, mục đích chính của plugin là nhanh chóng kiểm tra vuecác thành phần mà không cần bất kỳ bước biên dịch nào. Tuy nhiên, để sản xuất, tôi khuyên bạn nên sử dụng gói mô-đun webpack với vue-loader.
Tham khảo một ví dụ tại đây