如何在Jest中使用Vue-test-utils
本篇文章给大家分享的是有关如何在Jest中使用Vue-test-utils，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
专注于为中小企业提供成都网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业贡嘎免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
介绍
Vue-test-utils是Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们更加轻松的为Vue构建的应用来编写单元测试。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是测试运行器无关的。
Jest，是由Facebook开发的单元测试框架，也是Vue推荐的测试运行器之一。Vue对它的评价是：
Jest 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性，但仍不是 vue-loader 100% 的功能。
我认为可以这样理解，Vue-test-utils在Vue和Jest之前提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。
安装
通过Vue-cli创造模板脚手架时，可以选择是否启用单元测试，并且选择单元测试框架，这样Vue就帮助我们自动配置好了Jest。
如果是后期添加单元测试的话，首先要安装Jest和Vue Test Utils：
npm install --save-dev jest @vue/test-utils
然后在package.json中定义一个单元测试的脚本。
// package.json
{
"scripts": {
"test": "jest"
}
}为了告诉Jest如何处理*.vue文件，需要安装和配置vue-jest预处理器：
npm install --save-dev vue-jest
接下来在jest.conf.js配置文件中进行配置：
module.exports = {
moduleFileExtensions: ['js', 'json', 'vue'],
moduleNameMapper: {
'^@/(.*)$': '/src/$1'
},
transform: {
'^.+\\.js$': '/node_modules/babel-jest',
'.*\\.(vue)$': '/node_modules/vue-jest'
},
}其他的具体的配置可以参考官方文档。
配置好了之后，就可以开始编写单元测试了。
import { mount } from '@vue/test-utils'
import Component from './component'
describe('Component', () => {
test('是一个 Vue 实例', () => {
const wrapper = mount(Component)
expect(wrapper.isVueInstance()).toBeTruthy()
})
})上面的例子中，就是通过vue-test-utils提供的mount方法来挂载组件，创建包裹器和Vue实例
如果不使用vue-test-utils也是可以挂载组件的：
import Vue from 'vue';
import Test1 from '@/components/Test1';
const Constructor = Vue.extend(HelloWorld);
const vm = new Constructor().$mount();
启用单元测试的命令：
npm run unit
可以在后面加上-- --watch启动监听模式
别名配置
使用别名在Vue中很常见，可以让我们避免使用复杂、易错的相对路径：
import Page from '@/components/Test5/Test5'
上面的@就是别名，在使用Vue-cli搭建的项目中，默认已经在webpack.base.conf.js中对@进行了配置：
module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.join(__dirname, '..', 'src')
}
},
}同样，使用Jest时也需要在Jest的配置文件jest.conf.js中进行配置
"jest": {
"moduleNameMapper": {
'^@/(.*)$': "/src/$1",
},
...Shallow Rendering
创建一个App.vue：
然后创建一个Test1组件
针对App.vue编写单元测试文件App.spec.js
// 从测试实用工具集中导入 `mount()` 方法
import { mount } from 'vue-test-utils';
// 导入你要测试的组件
import App from '@/App';
describe('App.test.js', () => {
let wrapper,
vm;
beforeEach(() => {
wrapper = mount(App);
vm = wrapper.vm;
wrapper.setProps({ messages: ['Cat'] })
});
it('equals messages to ["Cat"]', () => {
expect(vm.messages).toEqual(['Cat'])
});
// 为App的单元测试增加快照（snapshot）：
it('has the expected html structure', () => {
expect(vm.$el).toMatchSnapshot()
})
});执行单元测试后，测试通过，然后Jest会在test/__snapshots__/文件夹下创建一个快照文件App.spec.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App.test.js has the expected html structure 1`] = `
`;
通过快照我们可以发现，子组件Test1被渲染到App中了。
这里面有一个问题：单元测试应该以独立的单位进行。也就是说，当我们测试App时，不需要也不应该关注其子组件的情况。这样才能保证单元测试的独立性。比如，在created钩子函数中进行的操作就会给测试带来不确定的问题。
为了解决这个问题，Vue-test-utils提供了shallow方法，它和mount一样，创建一个包含被挂载和渲染的Vue组件的Wrapper，不同的创建的是被存根的子组件。
这个方法可以保证你关心的组件在渲染时没有同时将其子组件渲染，避免了子组件可能带来的副作用（比如Http请求等）
所以，将App.spec.js中的mount方法更改为shallow方法，再次查看快照
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App.test.js has the expected html structure 1`] = `
`;
可以看出来，子组件没有被渲染，这时候针对App.vue的单元测试就从组件树中被完全隔离了。��
测试DOM结构
通过mount、shallow、find、findAll方法都可以返回一个包裹器对象，包裹器会暴露很多封装、遍历和查询其内部的Vue组件实例的便捷的方法。
其中，find和findAll方法都可以都接受一个选择器作为参数，find方法返回匹配选择器的DOM节点或Vue组件的Wrapper，findAll方法返回所有匹配选择器的DOM节点或Vue组件的Wrappers的WrapperArray。
一个选择器可以是一个CSS选择器、一个Vue组件或是一个查找选项对象。
CSS选择器：可以匹配任何有效的CSS选择器
Vue组件：Vue 组件也是有效的选择器。
查找选项对象：
这样我们就可以对DOM的结构进行验证：
describe('Test for Test1 Component', () => {
let wrapper,
vm;
beforeEach(() => {
// wrapper = mount(App);
wrapper = shallow(Test1, {
propsData: {
messages: ['bye']
}
});
});
it('is a Test1 component', () => {
// 使用Vue组件选择器
expect(wrapper.is(Test1)).toBe(true);
// 使用CSS选择器
expect(wrapper.is('.outer')).toBe(true);
// 使用CSS选择器
expect(wrapper.contains('p')).toBe(true)
});
});还可以进行一步对DOM结构进行更细致的验证：
// exists()：断言 Wrapper 或 WrapperArray 是否存在。
it('不存在img', () = > {
expect(wrapper.findAll('img').exists()).toBeFalsy()
});
// isEmpty()：断言 Wrapper 并不包含子节点。
it('MyButton组件不为空', () = > {
expect(wrapper.find(MyButton).isEmpty()).toBeFalsy()
});
// attributes()：返回 Wrapper DOM 节点的特性对象
// classes()：返回 Wrapper DOM 节点的 class 组成的数组
it('MyButton组件有my-class类', () = > {
expect(wrapper.find(MyButton).attributes().class).toContain('my-button');
expect(wrapper.find(MyButton).classes()).toContain('my-button');
})测试样式
UI的样式测试为了测试我们的样式是否复合设计稿预期。同时通过样式测试我们可以感受当我们code变化带来的UI变化，以及是否符合预期。
inline style ：如果样式是inline style，可以使用hasStyle来验证，也可以使用Jest的Snapshot Testing最方便。
// hasStyle：判断是否有对应的内联样式
it('MyButton组件有my-class类', () = > {
expect(wrapper.find(MyButton).hasStyle('padding-top', '10')).toBeTruthy()
})CSS：属于E2E测试，把整个系统当作一个黑盒，只有UI会暴露给用户用来测试一个应用从头到尾的流程是否和设计时候所想的一样 。有专门的E2E测试框架。比较流行的E2E测试框架有nightwatch等，关于E2E测试框架的介绍可以参考这篇文章。
测试Props
父组件向子组件传递数据使用Props，而子组件向父组件传递数据则需要在子组件出发父组件的自定义事件
当测试对父组件向子组件传递数据这一行为时，我们想要测试的当我们传递给子组件一个特定的参数，子组件是否会按照我们所断言的那样变现。
在初始化时向子组件传值，使用的方法是propsData。
const wrapper = mount(Foo, {
propsData: {
foo: 'bar'
}
})也可以使用setProps方法：
const wrapper = mount(Foo)
wrapper.setProps({ foo: 'bar' })我们传递给Test1组件的messages一个['bye']数组，来验证是否存在：
beforeEach(() = > {
wrapper = mount(Test1, {
propsData: {
messages: ['bye']
}
});
});
// props：返回 Wrapper vm 的 props 对象。
it('接收到了bye作为Props', () = > {
expect(wrapper.props().messages).toContain('bye')
});有时候会对Props的Type、默认值或者通过validator对Prop进行自定义的验证
props: {
messages: {
type: Array,
required: true,
validator: (messages) = > messages.length > 1,
default () {
return [0, 2]
}
}
},通过Vue实例的$options获取包括Props在内的初始化选项：
// vm.$options返回Vue实例的初始化选项
describe('验证Props的各个属性', () = > {
wrapper = mount(Test1, {
propsData: {
messages: ['bye', 'bye', 'bye']
}
});
const messages = wrapper.vm.$options.props.messages;
it('messages is of type array', () = > {
expect(messages.type).toBe(Array)
});
it('messages is required', () = > {
expect(messages.required).toBeTruthy()
});
it('messages has at least length 2', () = > {
expect(messages.validator && messages.validator(['a'])).toBeFalsy();
expect(messages.validator && messages.validator(['a', 'a'])).toBeTruthy();
});
wrapper.destroy()
});测试自定义事件
自定义事件要测试点至少有以下两个：
测试事件会被正常触发
测试事件被触发后的后续行为符合预期
具体到Test1组件和MyButton组件来看：
TEST1组件:
// TEST1
// 省略一些代码
methods: {
addCounter(value) {
this.count = value
}
},
MyButton组件：
Click {{buttonValue}} {{innerCount}}、
// 省略一些代码
data() {
return {
innerCount: 0
}
},
computed: {},
methods: {
increment() {
this.innerCount += 1;
this.$emit('add', this.innerCount)
}
},
要测试的目的是：
1. 当MyButton组件的按钮被点击后会触发increment事件
2. 点击事件发生后，Test1组件的addCounter函数会被触发并且结果符合预期（及数字递增）
首先为MyButton编写单元测试文件：
describe('Test for MyButton Component', () => {
const wrapper = mount(MyButton);
it('calls increment when click on button', () => {
// 创建mock函数
const mockFn = jest.fn();
// 设置 Wrapper vm 的方法并强制更新。
wrapper.setMethods({
increment: mockFn
});
// 触发按钮的点击事件
wrapper.find('button').trigger('click');
expect(mockFn).toBeCalled();
expect(mockFn).toHaveBeenCalledTimes(1)
})
});通过setMethods方法用mock函数代替真实的方法，然后就可以断言点击按钮后对应的方法有没有被触发、触发几次、传入的参数等等。
现在我们测试了点击事件后能触发对应的方法，下面要测试的就是increment方法将触发Test1组件中自定义的add方法
// increment方法会触发add方法
it('triggers a addCounter event when a handleClick method is called', () = > {
const wrapper = mount(MyButton);
// mock自定义事件
const mockFn1 = jest.fn();
wrapper.vm.$on('add', mockFn1);
// 触发按钮的点击事件
wrapper.find('button').trigger('click');
expect(mockFn1).toBeCalled();
expect(mockFn1).toHaveBeenCalledWith(1);
// 再次触发按钮的点击事件
wrapper.find('button').trigger('click');
expect(mockFn1).toHaveBeenCalledTimes(2);
expect(mockFn1).toHaveBeenCalledWith(2);
})这里使用了$on方法，将Test1自定义的add事件替换为Mock函数
对于自定义事件，不能使用trigger方法触发，因为trigger只是用DOM事件。自定义事件使用$emit触发，前提是通过find找到MyButton组件
// $emit 触发自定义事件
describe('验证addCounter是否被触发', () = > {
wrapper = mount(Test1);
it('addCounter Fn should be called', () = > {
const mockFn = jest.fn();
wrapper.setMethods({
'addCounter': mockFn
});
wrapper.find(MyButton).vm.$emit('add', 100);
expect(mockFn).toHaveBeenCalledTimes(1);
});
wrapper.destroy()
});测试计算属性
创建Test2组件，实现功能是使用计算属性将输入框输入的字符翻转：
输入：
输出：{{outputValue}}
.wrapper {
width: 300px;
margin: 0 auto;
text-align: left;
}
在Test2.spec.js中，可以通过wrapper.vm属性访问一个实例所有的方法和属性。这只存在于 Vue 组件包裹器中。
describe('Test for Test2 Component', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(Test2);
});
afterEach(() => {
wrapper.destroy()
});
it('returns the string in normal order if reversed property is not true', () => {
wrapper.setProps({needReverse: false});
wrapper.vm.inputValue = 'ok';
expect(wrapper.vm.outputValue).toBe('ok')
});
it('returns the string in normal order if reversed property is not provided', () => {
wrapper.vm.inputValue = 'ok';
expect(wrapper.vm.outputValue).toBe('ok')
});
it('returns the string in reversed order if reversed property is true', () => {
wrapper.setProps({needReverse: true});
wrapper.vm.inputValue = 'ok';
expect(wrapper.vm.outputValue).toBe('ko')
})
});测试监听器
Vue提供的watch选项提供了一个更通用的方法，来响应数据的变化。
为Test添加侦听器：
watch: {
inputValue: function(newValue, oldValue) {
if (newValue.trim().length > 0 && newValue !== oldValue) {
this.printNewValue(newValue)
}
}
},
methods: {
printNewValue(value) {
console.log(value)
}
},为了测试，首先开始测试前将console的log方法用jest的spyOn方法mock掉，最好在测试结束后通过mockClear方法将其重置，避免无关状态的引入。
describe('Test watch', () = > {
let spy;
beforeEach(() = > {
wrapper = shallow(Test2);
spy = jest.spyOn(console, 'log')
});
afterEach(() = > {
wrapper.destroy();
spy.mockClear()
});
}然后执行给inputValue赋值，按照预期，spy方法会被调用
it('is called with the new value in other cases', () = > {
wrapper.vm.inputValue = 'ok';
expect(spy).toBeCalled()
});但是在执行之后我们发现并非如此，spy并未被调用，原因是：
watch中的方法被Vue**推迟**到了更新的下一个循环队列中去异步执行，如果这个watch被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的性能开销。
所以当我们设置了inputValue为'ok'之后，watch中的方法并没有立刻执行，但是expect却执行了，所以断言失败了。
解决方法就是将断言放到$nextTick中，在下一个循环队列中执行，同时在expect后面执行Jest提供的done()方法，Jest会等到done()方法被执行才会结束测试。
it('is called with the new value in other cases', (done) = > {
wrapper.vm.inputValue = 'ok';
wrapper.vm.$nextTick(() = > {
expect(spy).toBeCalled();
done()
})
});在测试第二个情况时，由于对inputValue赋值时spy会被执行一次，所以需要清除spy的状态，这样才能得出正确的预期：
it('is not called with same value', (done) = > {
wrapper.vm.inputValue = 'ok';
wrapper.vm.$nextTick(() = > {
// 清除已发生的状态
spy.mockClear();
wrapper.vm.inputValue = 'ok';
wrapper.vm.$nextTick(() = > {
expect(spy).not.toBeCalled();
done()
})
})
});测试方法
单元测试的核心之一就是测试方法的行为是否符合预期，在测试时要避免一切的依赖，将所有的依赖都mock掉。
创建Test3组件，输入问题后，点击按钮后，使用axios发送HTTP请求，获取答案
问题：
click
答案：{{answer}}
