[开发测试]vue 单元测试初学

1 安装vue 选择单元测试启动项目

2 单元测试写在组件同级的配置，在jest.config.js 里

module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",


 // 添加以下
  testMatch: ["<rootDir>/src/**/*.spec.ts"],  // testMatch 是执行单元测试的路径
  testURL: "http://10.0.110.86/",    // 单元测试需要的服务
};

3 单元测试文件使用了 esling 规则，编辑器一直报警告，我选择 spec.ts. 文件去掉规则，根目录添加一下 .eslintignore 文件，里面写上不校验的文件

public
tests/unit/**/*.spec.ts
src/**/*.spec.ts

4 尝试写一波

? ?1? ? 注入全局插件；

? ?2? ?使用vuex

? ?3? ?props 传递参数与 data 声明

? ?4? ?html 元素操作

import { shallowMount, createLocalVue } from "@vue/test-utils";
import homeDataAnnular from "./home-data-annular.vue";
import ViewUI from "view-design";
import Vuex from "vuex";
import i18n from "@/config/i18n";

describe("homeDataAnnular.vue", () => {
  const localVue = createLocalVue();
  localVue.use(ViewUI);  // 注入 iview
  localVue.use(Vuex);   // 注入 vuex
  const wrapper = shallowMount(homeDataAnnular, {
    propsData: {
      oprPkId: "0127", // 传递参数
      title: '标题'
    },
    localVue,
    mocks: {
      $store: { 
        state: {  // vuex 需要用的的参数  state
          sys: {
            winOnresize: false,
          },
        },
      },
      $t: (a:any,b:any) => i18n.t(a,b), // 注入 i18n， 这里处理国际化：解决报错 _t 没有定义
    },
  });

  let vm: any = wrapper.vm; // 获取组件的 this
  describe("检测声明", () => {
    it("检测声明：data", () => {
        // 检测变量是否声明，我也不知道有什么意义，公司要这么写
      expect(vm.isActivated).toBeDefined();   
      expect(vm.boxTitle).toBeDefined();
      expect(vm.chargeEchart).toBeDefined();
      expect(vm.myChart).toBeDefined();
      expect(vm.win).toBeDefined();
      expect(vm.echartData).toBeDefined();
    });
  });
   describe("检测是否显示", () => {
    it("标题检测是否显示", () => {
      const title = "测试标题";
      expect(wrapper.find(".home-data-block-title").text()).toMatch(title);
    });
  });
    describe("检测操作事件", () => {
      it("检测事件：selectChange", () => {
        const num = 2;
        const ele = wrapper.find(".select-btn")  // 获取元素
        ele.trigger('click',{eventParams: num})   // 传递参数
        expect(ele.classes()).toContain('active'); // 看是否添加了 class
      })
    })
});

?@/config/i18n 文件

import Vue from "vue";
import VueI18n from "vue-i18n";
import zh from "view-design/dist/locale/zh-CN";
import en from "view-design/dist/locale/en-US";
import cn from "../language/zh-CN";
import us from "../language/en-US";

const messages = {
  zh: Object.assign(cn, zh),
  en: Object.assign(us, en),
};
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: localStorage.getItem("language") || "zh",
  messages, // set locale messages
});

export default i18n;