Everything in Vue Test

Everything I should know to test vue components.I will use vue2, vue3, elementUI and ant-design-vue to build some TodoApp.Then use cypress and vue test utils to test them.

---

Project Architecture Works

• monorepo
• shared ts type, hooks and logic
• CI/CD
• define custom cyress command to help query dom and select them
• turbo task chain

Components Test Works

• vue2 vanilla TodoApp
• vue2 + elementUI TodoApp
• vue3 + ant-design-vue TodoApp
• mock API
• web components
• pinia for vue3
• vuex for vue2
• $t i18n

E2E Test Works

• vue2 vanilla TodoApp
• vue2 + elementUI TodoApp
• vue3 + ant-design-vue TodoApp
• vue-router for vue2
• vue-router for vue3

Test Case Refactor

• test case should category Visual and Behavioral

---

Questions Record

how to modify vue props and data

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;
});