jest+vue-test-utils初步实践
一、起步
1. jest
Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，配置较少，对vue框架友好。
2. vue-test-utils
Vue Test Utils 是 Vue.js 官方的单元测试实用工具库，为jest和vue提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。
3. 安装
如果已经安装配置了webpack、babel的vue脚手架，现在需要在安装的是：
npm i jest @vue/test-utils vue-jest babel-jest jest-serializer-vue -D
4. 在package.json中定义单元测试的脚本和配置jest
"scripts": { "test": "jest" },
"jest": { "moduleFileExtensions": [ "js", // 告诉 Jest 处理 `*.vue` 文件 "vue" ], "moduleNameMapper": { // 支持源代码中相同的 `@` -> `src` 别名 "^@/(.*)$": "<rootDir>/src/$1" }, "transform": { // 用 `babel-jest` 处理 `*.js` 文件 "^.+\\.js$": "<rootDir>/node_modules/babel-jest", // 用 `vue-jest` 处理 `*.vue` 文件 ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" }, "snapshotSerializers": [ // 快照的序列化工具 "<rootDir>/node_modules/jest-serializer-vue" ], //成多种格式的测试覆盖率报告 可选 "collectCoverage": true, "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"] }
5. 配置.babelrc文件
{ "presets": [ ["env", { "modules": false }] ], "env": { "test": { "presets": [ ["env"] ] } } }
6. 写测试文件，放在根目录下test文件夹中，以.spec.js或.test.js为后缀名的文件，正常名字和组件名一致，如测试header组件，应该名字叫做header.spec.js或header.test.js
header.vue
<template>
<div>
<div>
<span class="count">{{ count }}</span>
<button @click="increment">Increment</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count++
}
}
}
</script>
header.spec.js
import { mount } from '@vue/test-utils'
import header from '@/components/header.vue'
describe('header', () => {
const wrapper = mount(header)
it('点击按钮', () => {
const button = wrapper.find('button');
expect(button.text()).toBe('Increment');
button.trigger('click');
expect(wrapper.find('.count').text()).toBe('1')
})
})
7. 执行命令行：npm test，运行单元测试
二、jest常用API
1. 全局函数
1）beforeAll(fn, timeout)/afterAll(fn, timeout)
在所有测试运行之前/之后执行，第二个参数可选，默认为5秒
2）beforeEach(fn, timeout)/afterEach(fn, timeout)
在每个测试运行之前/之后执行，第二个参数可选，默认为5秒
3）describe(name, fn)
创建一个块，将几个相关的测试组合在一起。
describe.only(name, fn)只运行一次
4）test(name, fn, timeout)
测试方法，test(name, fn, timeout) 等价于 it(name, fn, timeout)， 第三个参数可选，默认为5秒
test.only(name, fn, timeout)，只运行一次
2. 匹配器
1）相等、不相等匹配
toBe
test('3+3等于6', () => { expect(3 + 3).toBe(6); });
expect(3+3)返回我们期望的结果，toBe是匹配器，匹配具体的某一个值
toEqual
如果是匹配对象，需要使用toEqual
const obj = { one: 1, two: 2 }; expect(obj).toBe({ one: 1, two: 2 });
not：匹配不相等
expect(3+3).not.toBe(6);
2）匹配真假
toBeNull 只匹配 null
toBeUndefined 只匹配 undefined
toBeDefined 与...相反 toBeUndefined
toBeTruthy匹配if声明视为真的任何内容
toBeFalsy匹配if语句视为false的任何内容
3）匹配数字
toBeGreaterThan(3) 大于3
toBeGreaterThanOrEqual(3) 等于或大于3
toBeLessThan(3) 小于3
toBeLessThanOrEqual(3) 等于或小于3
对于浮点相等，请使用toBeCloseTo
const value = 0.1 + 0.2; // expect(value).toBe(0.3); //报错 Received: 0.30000000000000004 expect(value).toBeCloseTo(0.3);
4）匹配字符串，toMatch 支持正则
test('but there is a "stop" in Christoph', () => { expect('Christoph').toMatch(/stop/); });
5）匹配数组，toContain，数组中是否包含
const shoppingList = [ 'paper towels', 'beer', ]; test('the shopping list has beer on it', () => { expect(shoppingList).toContain('beer'); });
3. 异步函数
1）回调函数
回调是异步比较常见，实现如下
function fetchData (callback) { setTimeout(() => { callback('peanut butter'); }, 1000) } test('the data is peanut butter', done => { function callback (data) { expect(data).toBe('peanut butter'); done(); } fetchData(callback); });
如果不写done()，将会报超时的错误
2）promise
function fetchData () { return new Promise((resolve, reject) => { setTimeout(() => { resolve('peanut butter') }, 1000) }) } test('the data is peanut butter', () => { expect.assertions(1); return fetchData().then(data => { expect(data).toBe('peanut butter'); }); });
assertions（1）代表的是在当前的测试中至少有一个断言是被调用的，否则判定为失败。
如果删掉return语句，那么你的测试将在fetchData完成之前结束。
配合 .resolves/.rejects使用
test('the data is peanut butter', () => { expect.assertions(1); return expect(fetchData()).resolves.toBe('peanut butter'); });
3）async/await
使用async/await可以使代码看起来更加整洁
test('the data is peanut butter', async () => { expect.assertions(1); await expect(fetchData()).resolves.toBe('peanut butter'); });
4. mock
在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。
常用的方法有：jest.fn()/jest.mock()/jest.spyOn
1） jest.fn()
jest.fn()是创建Mock函数最简单的方式，如果没有定义函数内部的实现，jest.fn()会返回undefined作为返回值。
test('测试jest.fn()调用', () => { let mockFn = jest.fn(); let result = mockFn(1, 2, 3); // mockFn被调用 expect(mockFn).toBeCalled(); // mockFn被调用了一次 expect(mockFn).toBeCalledTimes(1); // mockFn传入的参数为1, 2, 3 expect(mockFn).toHaveBeenCalledWith(1, 2, 3); }) test('jest.fn()添加返回值', () => { let mockFn = jest.fn().mockReturnValue('default'); // mockFn执行后返回值为default expect(mockFn()).toBe('default'); })
模拟另一个模块的调用情况
fetch.js
export default { fetch (callback) { callback() } }
fetch.test.js
import fetch from './fetch'; test('测试jest.fn()调用', () => { let mockFn = jest.fn(); fetch.fetch(mockFn); expect(mockFn).toBeCalled() })
2）jest.mock()
fetch.js文件夹中封装的请求方法可能我们在其他模块被调用的时候，并不需要进行实际的请求。这时使用jest.mock(）去mock整个模块是十分有必要的
创建event.js文件，用来调用fetch.js
import fetch from './fetch';
export default { getPostList () { return fetch.fetch(data => { console.log('fetchPostsList be called!'); }); } }
fetch.test.js
import events from './event'; import fetch from './fetch';
jest.mock('./fetch.js'); test('mock 整个 fetch.js模块', () => { expect.assertions(1); events.getPostList(); expect(fetch.fetch).toHaveBeenCalled(); });
使用jest.mock('./fetch.js')模拟fetch模块，若不用jest.mock，会报错：jest.fn() value must be a mock function or spy.
3）jest.sypOn()
在上面的jest.mock()中，并没有执行console.log('fetchPostsList be called!')，说明fetch函数没有执行。jest.spyOn()方法同样创建一个mock函数，但是该mock函数不仅能够捕获函数的调用情况，还可以正常的执行被spy的函数。
import events from './event'; import fetch from './fetch'; test('使用jest.spyOn()监控fetch.fetch被正常调用', () => { expect.assertions(1); const spyFn = jest.spyOn(fetch, 'fetch'); events.getPostList(); expect(spyFn).toHaveBeenCalled(); })
使用jest.spyOn，执行了console.log('fetchPostsList be called!')。
三、vue-test-utils常用API
1. mount
创建一个包含被挂载和渲染的 Vue 组件的 Wrapper
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', () => {
const wrapper = mount(Foo)
expect(wrapper.contains('div')).toBe(true)
})
})
2.shallowMount
和 mount 一样，创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，不同的是被存根的子组件
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('返回一个 div', () => {
const wrapper = shallowMount(Foo)
expect(wrapper.contains('div')).toBe(true)
})
})
3.render render
在底层使用 vue-server-renderer 将一个组件渲染为静态的 HTML。
import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'
describe('Foo', () => {
it('renders a div', async () => {
const wrapper = await render(Foo)
expect(wrapper.text()).toContain('<div></div>')
})
})
4.createLocalVue
createLocalVue 返回一个 Vue 的类供你添加组件、混入和安装插件而不会污染全局的 Vue 类。
可通过 options.localVue 来使用
import { createLocalVue, shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
const localVue = createLocalVue()
const wrapper = shallowMount(Foo, {
localVue,
mocks: { foo: true }
})
expect(wrapper.vm.foo).toBe(true)
const freshWrapper = shallowMount(Foo)
expect(freshWrapper.vm.foo).toBe(false)
5.选择器
很多方法的参数中都包含选择器。一个选择器可以是一个 CSS 选择器、一个 Vue 组件或是一个查找选项对象。
标签选择器 (div、foo、bar)
类选择器 (.foo、.bar)
特性选择器 ([foo]、[foo="bar"])
id 选择器 (#foo、#bar)
伪选择器 (div:first-of-type)
近邻兄弟选择器 (div + .foo)
一般兄弟选择器 (div ~ .foo)
const buttonr = wrapper.find('.button') const content = wrapper.find('#content')
6.伪造 $route 和 $router
有的时候你想要测试一个组件在配合 $route 和 $router 对象的参数时的行为。这时候你可以传递自定义假数据给 Vue 实例。
import { shallowMount } from '@vue/test-utils'
const $route = {
path: '/home'
}
const wrapper = shallowMount(Component, {
mocks: {
$route
}
})
expect(wrapper.vm.$route.path).toBe('/home')
7.测试vuex
在测试vuex，主要通过伪造state/getters/mutations/actions进行测试
.vue文件中
<template>
<div>
<h1>{{appName}}</h1>
<h2>{{appNameWithVersion}}</h2>
<button @click="updateAppName"
class="mutation">mutation update</button>
<button @click="updateActionAppName"
class='action'>action update</button>
</div>
</template>
<script>
export default {
methods: {
updateAppName () {
this.$store.commit('setAppName', 'admin2')
},
updateActionAppName () {
this.$store.dispatch('setName', 'admin3')
}
},
computed: {
appName () {
return this.$store.state.appName;
},
appNameWithVersion () {
return this.$store.getters.appNameWithVersion;
}
}
}
</script>
.spec.js文件中
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Header from '@/components/Header.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('header.vue', () => {
let wrapper;
let store, state, getters, mutations, actions;
beforeEach(() => {
state = {
appName: 'admin'
};
getters = {
appNameWithVersion: () => 'getters'
}
mutations = {
setAppName: jest.fn(),
}
actions = {
setName: jest.fn(),
}
store = new Vuex.Store({
state,
getters,
mutations,
actions
})
wrapper = shallowMount(Header, {
store,
localVue
})
})
it('测试vuex', () => {
expect(wrapper.find('h1').text()).toBe(state.appName)
expect(wrapper.find('h2').text()).toBe(getters.appNameWithVersion())
wrapper.find('.mutation').trigger('click')
expect(mutations.setAppName).toHaveBeenCalled()
wrapper.find('.action').trigger('click')
expect(actions.setName).toHaveBeenCalled()
})
})
完...
参考：
1.https://vue-test-utils.vuejs.org/zh/
2.https://jestjs.io/docs/en/getting-started
3.http://www.cnblogs.com/Wolfmanlq/p/8018370.html
4.https://www.jianshu.com/p/70a4f026a0f1
5.https://www.jianshu.com/p/ad87eaf54622
