一.前言
我们将在vue项目中完成Vue Test Utils测试环境的基础上进行演示。 构筑环境可以看到我以前的文章。
本文使用的相关技术要点连接：
测试环境： Vue Test Utils
断言库： chai
二.基础
1、describe:
存储测试用例的容器。 可以在一个describe上定义多个测试用例。
语法
describe ('说明)，) )={
//为函数编写测试用例
() )
2、it :
编写测试用例
语法
it (说明)，) )={
//在函数中写断言(对结果的期待) ) ) ) ) ) )。
() )
3、驾驶
1将' unit ' : ' jest-- config test/unit/jest.config.js '放置在1 package.json的scripts对象中。
2项目和目录运行npm run unit
三、
1、创建第一个测试用例的演示测试文件test.spec.js
describe (测试)，)={ it )，测试用例)，)={ //演示，并断言字符串“hello”的内容是“hello”。 当然我会这样写。 结果一定为true。 //epect之后的字符串稍后将成为真正的页面内容。 Expect(Hello ).to contain (hello ) } ) npm run unit
结果表明通过了测试
2、安装和测试
创建counter.vue
//counter.vuetemplatedivspanclass=' count ' { count }/span button @ click=' increment ' increment/button/div { rev }
import { mount } from ' @ vue/test-utils ' importcounterfrom ' @/components/counter ' describe (请参阅测试counter组件)， ) )=测试你是否渲染了这个包裹的constwrapper=mount(counter ) it )，span class='count'0/span )，() Expect ) wract ) span ' ) ) ) /现有元素it ) ) ) )也很方便检查是否存在，(() (expect ) wrapper.find (' button '.exists ) ).tobe ) 测试组件的count初始值为0expect(wrapper.VM.count ).toBe(0)0) constbutton=wrapper.find ) ' button ' ) /触发器按钮
om解构发生变化以后需要等页面更新后才能拿到内容。 it('单击按钮将增加计数文本', async () => { // 此处count已经不是0了，上面已经点击了一次，此时变为1 expect(wrapper.text()).toContain('1') const button = wrapper.find('button') await button.trigger('click') expect(wrapper.text()).toContain('2') }) // 断言触发方法 it('断言触发increment方法后的结果', async () => { expect(wrapper.text()).toContain('2') wrapper.vm.increment() // 触发事件后断言页面信息 await wrapper.vm.$nextTick() expect(wrapper.text()).toContain('3') await wrapper.vm.$nextTick() expect(wrapper.text()).toContain('3') }) // 断言触发的事件 it('断言触发事件后的结果', async () => { wrapper.vm.$emit('foo') // 断言事件已经被触发 expect(wrapper.emitted().foo). toBeTruthy() }) // 组件不会自动注销，我们需要手动注销 // wrapper.destroy() })3、父子组件
创建子组件ChildComponent.vue
<template> </template><script>export default {}</script><style></style>创建父组件ParentComponent.vue
<template> <div> <child-component @custom="onCustom" /> <p v-if="emitted">Emitted!</p> <div> <p>{{msg}}</p> <p>{{title}}</p> <p>{{aProp}}</p> </div> </div></template><script> import ChildComponent from './ChildComponent' export default { name: 'ParentComponent', components: { ChildComponent }, data() { return { emitted: false, msg: '' } }, props: ['title', 'aProp'], methods: { onCustom() { this.emitted = true } } }</script>创建测试文件childComponent.spec.js
import { mount } from '@vue/test-utils'import ParentComponent from '@/components/ParentComponent'import ChildComponent from '@/components/ChildComponent'// 从子组件触发事件describe('ParentComponent', () => { it("displays 'Emitted!' when custom event is emitted", async () => { // 使用包裹器载入载入渲染父组件，因为是深度渲染，所以父组件中的子组件会被渲染。 const wrapper = mount(ParentComponent) // 在父组件中找到子组件，并且在子组件中触发自定义事件custom。 // 此时父组件中的子组件上custom事件注册的函数onCustom会被执行。 // 官网使用的是老版本find，运行后会报错语法更新 // wrapper.find(ChildComponent).vm.$emit('custom') // 我们使用新语法findComponent wrapper.findComponent(ChildComponent).vm.$emit('custom') // 验证父组件中html中是否有'Emitted!' // 此处页面dom内容发生更新需要延迟验证。 // 此处官网直接断言 expect(wrapper.html()).toContain('Emitted!')，结果当然是false。 // 此处页面dom内容发生更新需要延迟验证。 await wrapper.vm.$nextTick() expect(wrapper.html()).toContain('Emitted!') }) // 在测试用例中操作组件的状态 // 可以在包裹器上用 setData 或 setProps 方法直接操作组件状态： // 在父组件中，data中增加msg，props中增加title。在dom中渲染插值表达式渲染这两项。 it('操作组件状态', async () => { const wrapper = mount(ParentComponent) await wrapper.setData({msg: 'hello jset'}) expect(wrapper.html()).toContain('hello jset') await wrapper.setProps({ title: 'my title' }) expect(wrapper.html()).toContain('my title') }) // 仿造 Prop // 可以使用 Vue 在内置 propsData 选项向组件传入 prop： it('伪造prop传给子组件', async () => { const wrapper = mount(ParentComponent, { propsData: { aProp: 'some value' } }) expect(wrapper.html()).toContain('some value') })})
四、代码覆盖率
控制台会输出代码覆盖率：
通过分析文件查看代码覆盖率：
找到当前项目下test/unit/coverage/lcov-report/index.html，并使用浏览器运行。
%stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？
%Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？
%Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？
%Lines行覆盖率（line coverage）：是不是每一行都执行了？
对应视频：
01-vue-test-utils-基础使用-前言
02-vue-test-utils-基础使用-基本语法
03-vue-test-utils-基础使用-演示第一个测试用例
04-vue-test-utils-基础使用-组件挂载
05-vue-test-utils-基础使用-组件挂载后的测试演示
06-vue-test-utils-基础使用-父子组件
07-vue-test-utils-基础使用-代码覆盖率
演示代码：
代码