การทดสอบคอมโพเนนต์ javascript Vue ธรรมดาโดยไม่ใช้ Vue CLI

Question

เป็นไปได้หรือไม่ที่จะทดสอบส่วนประกอบ Vue ที่พัฒนาในจาวาสคริปต์ธรรมดาโดยไม่ต้องตั้งค่า Vue CLI / Webpack / Babel

เอกสารเกี่ยวกับ subjet ที่ฉันพบในเว็บนั้นค่อนข้างบาง:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• วิธีทดสอบส่วนประกอบ Vue ธรรมดา (ไม่ใช่ส่วนประกอบไฟล์เดียว)

ฉันติดตั้ง Vue, Vue test utils, JSDOM

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 ทำงานได้ดีด้วยฟังก์ชั่น js ธรรมดา ๆ แต่ฉันไม่สามารถทดสอบส่วนประกอบ Vue ได้

เนื้อหาของการทดสอบของฉัน

require('jsdom-global')();
var testUtils = require('@vue/test-utils'), Vue = require('vue');

testUtils.mount({ template: '<div>test</div>' });

ผลการทดสอบ

TypeError: Illegal invocation at removeEventListener (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:15)

กรุณาช่วย !

Answer 1

เราเคยมีปัญหาเดียวกันเมื่อ 2 เดือนก่อน กรณีการใช้งานที่แตกต่างกันเล็กน้อย แต่สำหรับเราการพึ่งพา VueCLI โดยเฉพาะคือผู้ร้าย หากไม่มีเราก็ไม่พบวิธีที่จะเรียกใช้การทดสอบขั้นพื้นฐานได้สำเร็จ

ฉันคิดว่าถ้าคุณต้องการไปเส้นทางนี้คุณอาจต้องทำงานหลายอย่างเพื่อหลีกเลี่ยงกลไกที่ตั้งใจไว้ สำหรับสิ่งนั้นคุณต้องตอบตัวเองว่าคุ้มค่ากับเวลาของคุณหรือไม่ เราไปกับ VueCLI และรับค่าโสหุ้ย

Answer 2

ฉันได้ลองสิ่งนี้เมื่อปีที่แล้วซึ่งฉันเจอสถานการณ์ที่คล้ายกันซึ่งฉันไม่ต้องการใช้ CLI / webpack

หวังว่าจะสามารถเพิ่มการมีส่วนร่วมในการแก้แบบสอบถามของคุณได้

ในการทดสอบส่วนประกอบของคุณโดยไม่มี webpack คุณสามารถใช้ปลั๊กอินhttp-vue-loader

เวิร์กโฟลว์ของปลั๊กอินนั้นเรียบง่าย

1. http ขอไฟล์ vue
2. โหลดไฟล์ vue ในส่วนของเอกสาร
3. ประมวลผลแต่ละส่วน (เทมเพลตสคริปต์และสไตล์)
4. คืนสัญญาให้กับ Vue.js (ส่วนประกอบ async)
5. จากนั้น Vue.js จะรวบรวมและแคชส่วนประกอบ

จริงๆแล้วจุดประสงค์หลักของปลั๊กอินคือการทดสอบvueส่วนประกอบอย่างรวดเร็วโดยไม่มีขั้นตอนการคอมไพล์ อย่างไรก็ตามสำหรับการใช้งานจริงขอแนะนำให้ใช้ชุดรวมโมดูล webpack กับ vue-loader

ดูตัวอย่างที่นี่