everything vue test

ทุกอย่างในการทดสอบ vue

ทุกสิ่งที่ฉันควรรู้เพื่อทดสอบส่วนประกอบ Vue ฉันจะใช้ vue2, vue3, elementui และ ant-design-vue เพื่อสร้าง toDoapp บางอย่างจากนั้นใช้ Cypress และ Vue Test Test เพื่อทดสอบพวกเขา

---

งานสถาปัตยกรรมโครงการ

• โมโนโพร
• ประเภท TS ที่ใช้ร่วมกันตะขอและตรรกะ
• CI/CD
• กำหนดคำสั่ง cyress ที่กำหนดเองเพื่อช่วยค้นหา DOM และเลือกพวกเขา
• ห่วงโซ่งานเทอร์โบ

การทดสอบส่วนประกอบทำงาน

• Vue2 Vanilla ToDoapp
• vue2 + elementui toDoapp
• vue3 + ant-design-vue toDoApp
• เยาะเย้ย API
• ส่วนประกอบของเว็บ
• Pinia สำหรับ Vue3
• vuex สำหรับ vue2
• $ t i18n

การทดสอบ E2E ใช้งานได้

• Vue2 Vanilla ToDoapp
• vue2 + elementui toDoapp
• vue3 + ant-design-vue toDoApp
• Vue-Router สำหรับ Vue2
• Vue-Router สำหรับ Vue3

ทดสอบเคส

• กรณีทดสอบควรจัดหมวด Visual และ Behavioral

---

บันทึกคำถาม

วิธีแก้ไขอุปกรณ์ประกอบฉากและข้อมูล Vue

 cy . mount ( TodoItem , {
  propsData : {
    label : "下班" ,
    isDone : false ,
  } ,
} ) . then ( ( { wrapper } ) => {
  return cy . wrap ( wrapper ) . as ( "vue" ) ;
} ) ;

cy . get ( "@vue" ) . then ( ( current : any ) => {
  current . setProps ( {
    isDone : true ,
  } ) ;
} ) ;

如何测试依赖 Elemenet2 的组件（ Vue2)

 // cypress/support/component.ts
import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;

Cypress . Commands . add ( "mount" , ( component , args = { } ) => {
  Vue . use ( ElementUI ) ;

  return mount ( component as any , args ) ;
} ) ;

如何测试依赖 antdv 的组件（ vue3）

分两种情况

1. 配置了-unplugin-vue-components 的话， cypress 无需特别配置
2. 否则， 需要如下配置

 // cypress/support/component.ts
import Antdv from "ant-design-vue" ;
import "ant-design-vue/dist/antd.css" ;

Cypress . Commands . add ( "mount" , ( component , args = { } ) => {
  args . global = args . global || { } ;
  args . global . plugins = args . global . plugins || [ ] ;
  args . global . plugins . push ( Antdv ) ;
  return mount ( component as any , args ) ;
} ) ;

如何测试 Pinia

 // cypress/support/component.ts
import { createPinia , setActivePinia } from "pinia" ;
setActivePinia ( createPinia ( ) ) ;

如何使用全局函数， 如 $ t

 // cypress/support/component.ts
Cypress . Commands . add ( "mount" , ( component : any , args : any = { } ) => {
  args . global . mocks = args . global . mocks || { } ;
  args . global . mocks . $xss = xss ;
} ) ;