Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。它本身提供了一些方法处理vue组件,将他们转换为一个包裹器Wrapper,一个 Wrapper 是一个包括了一个挂载组件或 vnode,以及测试该组件或 vnode 的方法。(简单理解就是将vue组件包上一层,添加了大量访问内部属性的方法以便于写单元测试)
Jest 是一个由 Facebook 开发的测试运行器,功能最全、所需的配置最少且默认安装了 JSDOM,可以直接测试dom操作还是很舒服的。
配置:Vue Test Utils 本身是一个工具库,没有实际测试功能,所以还需要配置一个测试运行器,文档中有完善的配置jest的方法 https://vue-test-utils.vuejs.org/zh/installation/#%E7%94%A8-jest-%E6%B5%8B%E8%AF%95%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6
且vue-cli提供cli-plugin-unit-jest插件,免了自己配置,当然也支持自定义jest配置,只需要在项目的jest.config.js中添加jest运行配置即可。
使用:
首先jest配置项中用于检测测试文件的配置为testMatch,参数默认值为[ “/tests//.[jt]s?(x)”, “**/?(.)+(spec|test).[jt]s?(x)” ] ,测试文件夹及文件按照符合对应正则的格式命名即可。
import radio from ‘../radio.vue’;
test(‘radio change’, async () => {
// 使用Vue Test Utils中的mount将vue组件转换
const wrapper = mount(radio);
const inputs = wrapper.findAll(‘.izk-radio’);
// 触发点击事件
inputs.at(2).trigger(‘click’);
// 断言点击事件后值发生改变
expect(wrapper.vm.fruit).toEqual(‘orange’);
// 等待dom更新结束后
await wrapper.vm.$nextTick();
// 断言发送了fruitChange事件,参数是‘orange’
expect(wrapper.emitted(‘fruitChange’)[0][0]).toEqual(‘orange’);
});
具体功能对照文档翻阅:
https://vue-test-utils.vuejs.org/zh/
https://jestjs.io/docs/en/api