通过@vue/cli生成具有jest功能的代码
1. 配置测试代码的覆盖率
jest.config.js添加
"collectCoverage": true,
"collectCoverageFrom": ["packages/**/*vue", "!**/node_modules/**"],
运行npm run test:unit生成coverage文件夹，双击index.html打开测试覆盖率在浏览器预览
2. 编写测试用例
在tests/unit文件夹中新增multioption.spect.ts，jest单元测试时会默认找到文件
3.编写测试用例，提取出来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', () => {
// 手动将变量的值设置为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);
