vue jest 测试用例基本写法

通过@vue/cli生成具有jest功能的代码

配置测试代码的覆盖率

jest.config.js添加

"collectCoverage": true,
"collectCoverageFrom": ["packages/**/*vue", "!**/node_modules/**"],

浏览器预览

参数说明

编写测试用例

在tests/unit文件夹中新增multioption.spect.ts，jest单元测试时会默认找到文件

编写测试用例，提取出来wrapper实例用作后面的不同测试方法用

import { shallowMount } from '@vue/test-utils';
import multiOption from '../../packages/multi-option/src/main.vue';
describe('multiOption.vue', () => {
    let wrapper;
    const value = '选项1';
    const label = '黄金糕';
    beforeEach(() => {
        wrapper = shallowMount(multiOption, {
          propsData: { value, label },
        });
    });
}

测试props

it('测试props', () => {
    expect(wrapper.text()).toContain(label);
    wrapper.destroy(); // wrapper实例销毁
});

测试data(如果vue用js编写，通过wrapper.vm.selected拿到值，ts需要wrapper.vm.$data.selected)

it('测试data', () => {
    expect(wrapper.vm.$data.selected).toEqual(false);
    wrapper.destroy();
});
  

测试vue中方法(如果vue用js编写，通过wrapper.vm. handleInitSelect拿到方法，ts需要async、await加上类型断言)

it('测试方法', async () => {
    const handleInitSelect = await (wrapper.vm as any).handleInitSelect();
    expect(handleInitSelect).toBe(undefined);
    wrapper.destroy();
});

测试vue中事件

it('测试事件', () => {
    const stub = jest.fn(); // 伪造一个jest的mock funciton
    wrapper.setMethods({ handleClick: stub }); // setMethods将handleClick这个方法覆写
    wrapper.find('li').trigger('click'); // 对li触发一个click事件
    expect(stub).toBeCalled(); // 查看handleClick是否被调用
    wrapper.destroy();
});

vue插槽组件的测试用例(在父组件中设置slot属性)

import multiSelect from '../../packages/multi-select/src/main.vue';
import multiOption from '../../packages/multi-option/src/main.vue';
multiOptionTemplate = {
  render(h: any) {
    return h(multiOption, { props: { value, label }  });
  },
};
wrapper = shallowMount(multiSelect, {
  propsData: { placeholder, vModel },
  slots: {
    default: multiOptionTemplate,
  },
});

vue测试watch监听器(设置vue的data变量为不同值，例如wrapper.vm.value = false)

it('测试watch', () => {
    multiOptionTemplate = {
      render(h: any) {
        return h(multiOption, { props: { value, label }  });
      },
    };
    wrapper = shallowMount(multiSelect, {
      propsData: { placeholder, vModel },
      slots: {
        default: multiOptionTemplate,
      },
    });
    // 手动将变量的值设置为false,默认值是true
    wrapper.vm.value = false;
    // 断言函数是否执行
    expect(wrapper.vm.isSelecting).toBe(false);
    wrapper.destroy();
});

组件中使用了elementui

import element from 'element-ui';
const localVue = createLocalVue();
localVue.use(element);