// viewTest.vue <template> <div> <h1>{{ msg }}</h1> <p>1212121</p> </div> </template> <script> export default { name: 'viewTest', data () { return { msg: 'Welcome to Your Vue.js App' } } }
// viewTest.spec import { mount } from '@vue/test-utils' import Component from '../../../src/components/viewTest' describe('页面展示测试', () => { test('检查元素是否存在', () => { const wrapper = mount(Component) expect(wrapper.contains('.hello h1')).toBe(true) console.log(wrapper.find('.hello h1').text()) expect(wrapper.text()).toContain('Welcome') }) })
这个是最简单的对页面的dom节点的测试，以及可以对文案进行一些测试，这些是比较基础的
对事件处理的测试
// event.vue <template> <div> <h1>My To Do event</h1> <h2>wawawawawawa</h2> <input v-model="newItem"> <button @click="addItemToList">Add</button> </br> <!--displays event --> <ul> <li v-for="item in listItems">{{ item }}</li> </ul> </div> </template> <script> export default { name: 'event', data () { return { listItems: ['buy food', 'play games', 'sleep'], newItem: '' } }, methods: { addItemToList() { this.listItems.push(this.newItem); this.newItem = ''; } } } </script>
// event.spec.js // 从测试实用工具集中导入 `mount()` 方法 // 同时导入你要测试的组件 import { mount } from '@vue/test-utils' import Component from '../../../src/components/itemEvent' describe('事件触发测试', () => { test('事件触发测试', () => { // 现在挂载组件，你便得到了这个包裹器 const wrapper = mount(Component) const button = wrapper.find('button') wrapper.setData({ newItem: '添加测试项', }) button.trigger('click') console.log(wrapper.text()) expect(wrapper.text()).toContain('添加测试项') }) })
这里是在模拟用户交互的一个测试，当用户点击按钮的时候会把数据插入到当前的列表中来，所以最开始需要定位到这个按钮，可以用find()，之后要去触发这个事件， button.trigger('click')，然后把预期的结果，与按照流程的结果相比较，以达到测试的效果。这里模拟的是一个点击事件，当然，api也支持各种的鼠标事件以及键盘事件。
测试异步行为 平时的业务场景中肯定是离不开异步操作的，当发送一个接口请求的时候应该怎么去才做。Jest 运行测试用例同时可以模拟了 HTTP 库 axios，对预期结果可以进行设定和比较，比如：
// axios.js export default { get: () => Promise.resolve({ data: 'response' }) }
<template> <div> <button @click="fetchResults">发送请求</button> {{value}} </div> </template> <script> import axios from '../axios.js' export default { data () { return { value: '初始值' } }, methods: { async fetchResults () { const response = await axios.get('mock/service') this.value = response.data console.log(this.value) } }, created (){ console.log(axios.get) } } </script>
// async.spec.js import { shallowMount } from '@vue/test-utils' import async from '../../../src/components/async' jest.mock('axios') it('当点击按钮发送请求时检验返回值', () => { const wrapper = shallowMount(async) console.log(jest) wrapper.find('button').trigger('click') // expect(wrapper.value) expect(wrapper.vm.value).toBe('response') // console.log(wrapper.vm.value).toBe('初始值') })
这个时候运行的话会报错误
因为断言在 fetchResults 中的 Promise 完成之前就被调用了，所以value的值还是最开始的初始值。大多数单元测试库都提供一个回调来使得运行期知道测试用例的完成时机。Jest 和 Mocha 都是用了 done。我们可以和 $nextTick 或 setTimeout 结合使用 done 来确保任何 Promise 都会在断言之前完成。
测试 Vue Router 使用