前端Vue单元测试入门教程前端Vue单元测试入门教程

一、为什么需要单元测试
二、如何写单元测试
三、测试工具
四、Jest入门

安装
简单示例
Jest Cli
使用配置文件
使用 Babel
vue-cli 中使用 Jest
常见示例

判断值相等
检查类false值
数字大小比较
字符串比较
数组和类数组
异常
只执行当前test

测试异步代码

回调函数
Promises
Async/Await

安装和拆卸

测试前和测试后
测试用例分组
执行顺序

mock 函数

测试mock
mock的返回值
模拟接口返回
mock函数的匹配器

五、Vue Test Utils

测试单文件组件

处理 webpack 别名

挂载组件

测试组件渲染出来的 HTML

模拟用户操作

组件的事件

组件的data

模拟vue实例方法

全局插件

测试watch

第三方插件

六、总结

一、为什么需要单元测试
单元测试是用来测试项目中的一个模块的功能，如函数、类、组件等。单元测试的作用有以下：

正确性：可以验证代码的正确性，为上线前做更详细的准备；
自动化：测试用例可以整合到代码版本管理中，自动执行单元测试，避免每次手工操作；
解释性：能够为其他开发人员提供被测模块的文档参考，阅读测试用例可能比文档更完善；
驱动开发、指导设计：提前写好的单元测试能够指导开发的API设计，也能够提前发现设计中的问题；
保证重构：测试用例可以多次验证，当需要回归测试时能够节省大量时间。

二、如何写单元测试
测试原则

测试代码时，只考虑测试，不考虑内部实现
数据尽量模拟现实，越靠近现实越好
充分考虑数据的边界条件
对重点、复杂、核心代码，重点测试
测试、功能开发相结合，有利于设计和代码重构

编写步骤

准备阶段：构造参数，创建 spy 等
执行阶段：用构造好的参数执行被测试代码
断言阶段：用实际得到的结果与期望的结果比较，以判断该测试是否正常
清理阶段：清理准备阶段对外部环境的影响，移除在准备阶段创建的 spy 等

三、测试工具
单元测试的工具可分为三类：

测试运行器（Test Runner）：可以模拟各种浏览器环境，自定义配置测试框架和断言库等，如Karma.
测试框架：提供单元测试的功能模块，常见的框架有Jest, mocha, Jasmine, QUnit.
工具库：assert, should.js, expect.js, chai.js等断言库，enzyme渲染库，Istanbul覆盖率计算。

这里，我们将使用 Jest 作为例子。Jest 功能全面，集成了各种工具，且配置简单，甚至零配置直接使用。

四、Jest入门
Jest 官网的描述是这样的：

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

安装

yarn add --dev jest# or# npm install -D jest

简单示例

从官网提供的示例开始，测试一个函数，这个函数完成两个数字的相加，创建一个 sum.js 文件︰

function sum(a, b) {return a + b; }module.exports = sum;

然后，创建 sum.test.js 文件︰

const sum = require('./sum'); test('adds 1 + 2 to equal 3', () => {expect(sum(1, 2)).toBe(3); }); package.json 里增加一个测试任务：{"scripts": {"test": "jest"}}

最后，运行 yarn test 或 npm run test ，Jest将打印下面这个消息：

PASS./sum.test.js
? adds 1 + 2 to equal 3 (5ms)

至此，完成了一个基本的单元测试。
注意：Jest 通过用 JSDOM 在 Node 虚拟浏览器环境模拟真实浏览器，由于是用 js 模拟 DOM, 所以 Jest 无法测试样式。Jest 测试运行器自动设置了 JSDOM。

Jest Cli

你可以通过命令行直接运行Jest(前提是jest已经加到环境变量PATH中，例如通过 yarn global add jest 或 npm install jest --global 安装的 Jest) ，并为其指定各种有用的配置项。如：

jest my-test --notify --config=config.json

Jest 命令有以下常见参数：

--coverage 表示输出单元测试覆盖率，覆盖率文件默认在 tests/unit/coverage/lcov-report/index.html；
--watch 监听模式，与测试用例相关的文件更改时都会重新触发单元测试。

更多选项查看Jest CLI Options.

使用配置文件

使用 jest 命令可生成一个配置文件：

jest --init

过程中会有几个选项供你选择：

√ Would you like to use Typescript for the configuration file? ... no
√ Choose the test environment that will be used for testing ? jsdom (browser-like)
√ Do you want Jest to add coverage reports? ... yes
√ Which provider should be used to instrument code for coverage? ? babel
√ Automatically clear mock calls and instances between every test? ... yes

配置文件示例（不是基于上述选择）：

// jest.config.jsconst path = require('path')module.exports = {preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',rootDir: path.resolve(__dirname, './'),coverageDirectory: '/tests/unit/coverage',collectCoverageFrom: ['src/*.{js,ts,vue}','src/directives/*.{js,ts,vue}','src/filters/*.{js,ts,vue}','src/helper/*.{js,ts,vue}','src/views/**/*.{js,ts,vue}','src/services/*.{js,ts,vue}']}

使用 Babel

yarn add --dev babel-jest @babel/core @babel/preset-env

可以在工程的根目录下创建一个babel.config.js文件用于配置与你当前Node版本兼容的Babel：

// babel.config.jsmodule.exports = {presets: [['@babel/preset-env', {targets: {node: 'current'}}]],};

vue-cli 中使用 Jest

在项目中安装 @vue/cli-plugin-unit-jest 插件，即可在 vue-cli 中使用 Jest：

vue add unit-jest# or# yarn add -D @vue/cli-plugin-unit-jest @types/jest

"scripts": {"test:unit": "vue-cli-service test:unit --coverage"},

@vue/cli-plugin-unit-jest 会在 vue-cli-service 中注入命令 test:unit，默认会识别以下文件：/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)) 执行单元测试，即 tests/unit 目录下的 .spec.(js|jsx|ts|tsx) 结尾的文件及目录名为 __tests__ 里的所有 js(x)/ts(x) 文件。

常见示例

判断值相等 toBe() 检查两个基本类型是否精确匹配：

test('two plus two is four', () => {expect(2 + 2).toBe(4); });

toEqual() 检查对象是否相等：

test('object assignment', () => {const data = https://www.it610.com/article/{one: 1}; data['two'] = 2; expect(data).toEqual({one: 1, two: 2}); });

检查类false值

toBeNull 只匹配 null
toBeUndefined 只匹配 undefined
toBeDefined 与 toBeUndefined 相反
toBeTruthy 匹配任何 if 语句为真
toBeFalsy 匹配任何 if 语句为假

示例：

test('null', () => {const n = null; expect(n).toBeNull(); expect(n).toBeDefined(); expect(n).not.toBeUndefined(); expect(n).not.toBeTruthy(); expect(n).toBeFalsy(); }); test('zero', () => {const z = 0; expect(z).not.toBeNull(); expect(z).toBeDefined(); expect(z).not.toBeUndefined(); expect(z).not.toBeTruthy(); expect(z).toBeFalsy(); });

数字大小比较

test('two plus two', () => {const value = https://www.it610.com/article/2 + 2; expect(value).toBeGreaterThan(3); expect(value).toBeGreaterThanOrEqual(3.5); expect(value).toBeLessThan(5); expect(value).toBeLessThanOrEqual(4.5); // toBe and toEqual are equivalent for numbersexpect(value).toBe(4); expect(value).toEqual(4); });

对于比较浮点数相等，使用 toBeCloseTo 而不是 toEqual，因为你不希望测试取决于一个小小的舍入误差。

test('两个浮点数字相加', () => {const value = https://www.it610.com/article/0.1 + 0.2; //expect(value).toBe(0.3); 这句会报错，因为浮点数有舍入误差expect(value).toBeCloseTo(0.3); // 这句可以运行});

字符串比较
可以使用正则表达式检查：

test('there is no I in team', () => {expect('team').not.toMatch(/I/); }); test('but there is a "stop" in Christoph', () => {expect('Christoph').toMatch(/stop/); });

数组和类数组
你可以通过 toContain 来检查一个数组或可迭代对象是否包含某个特定项：

const shoppingList = ['diapers','kleenex','trash bags','paper towels','milk',]; test('the shopping list has milk on it', () => {expect(shoppingList).toContain('milk'); expect(new Set(shoppingList)).toContain('milk'); });

异常
还可以用来检查一个函数是否抛出异常：

function compileAndroidCode() {throw new Error('you are using the wrong JDK'); }test('compiling android goes as expected', () => {expect(() => compileAndroidCode()).toThrow(); expect(() => compileAndroidCode()).toThrow(Error); // You can also use the exact error message or a regexpexpect(() => compileAndroidCode()).toThrow('you are using the wrong JDK'); expect(() => compileAndroidCode()).toThrow(/JDK/); });

更多使用方法参考API文档.

只执行当前test
可使用 only() 方法表示只执行这个test，减少不必要的重复测试：

test.only('it is raining', () => {expect(inchesOfRain()).toBeGreaterThan(0); }); test('it is not snowing', () => {expect(inchesOfSnow()).toBe(0); });

测试异步代码

回调函数
例如，假设您有一个 fetchData(callback) 函数，获取一些数据并在完成时调用 callback(data)。你期望返回的数据是一个字符串 'peanut butter'：

test('the data is peanut butter', done => {function callback(data) {try {expect(data).toBe('peanut butter'); done(); } catch (error) {done(error); }}fetchData(callback); });

使用 done() 是为了标识这个 test 执行完毕，如果没有这个 done()，在 test 执行完毕后，我们的单元测试就结束了，这不符合我们的预期，因为callback还未调用，单元测试还没走完。若 done() 函数从未被调用，将会提示超时错误。

若 expect 执行失败，它会抛出一个错误，后面的 done() 不再执行。若我们想知道测试用例为何失败，我们必须将 expect 放入 try 中，将 error 传递给 catch 中的 done 函数。否则，最后控制台将显示一个超时错误失败，不能显示我们在 expect(data) 中接收的值。

Promises
还是使用上面的例子：

test('the data is peanut butter', () => {return fetchData().then(data => {expect(data).toBe('peanut butter'); }); });

一定不要忘记 return 结果，这样才能确保测试和功能同时结束。
如果是期望 Promise 被 reject, 则使用 catch 方法：

test('the fetch fails with an error', () => {expect.assertions(1); return fetchData().catch(e => expect(e).toMatch('error')); });

还可以使用 resolves 和 rejects 匹配器：

test('the data is peanut butter', () => {return expect(fetchData()).resolves.toBe('peanut butter'); }); test('the fetch fails with an error', () => {return expect(fetchData()).rejects.toMatch('error'); });

Async/Await

test('the data is peanut butter', async () => {const data = https://www.it610.com/article/await fetchData(); expect(data).toBe('peanut butter'); }); test('the fetch fails with an error', async () => {expect.assertions(1); try {await fetchData(); } catch (e) {expect(e).toMatch('error'); }});

async/await 还可以和 resolves()/rejects() 结合使用：

test('the data is peanut butter', async () => {await expect(fetchData()).resolves.toBe('peanut butter'); }); test('the fetch fails with an error', async () => {await expect(fetchData()).rejects.toMatch('error'); });

安装和拆卸

测试前和测试后
在某些情况下，我们开始测试前需要做一些准备工作，然后在测试完成后，要做一些清理工作，可以使用 beforeEach 和 afterEach。
例如，我们在每个test前需要初始化一些城市数据，test结束后要清理掉：

beforeEach(() => {initializeCityDatabase(); }); afterEach(() => {clearCityDatabase(); }); test('city database has Vienna', () => {expect(isCity('Vienna')).toBeTruthy(); }); test('city database has San Juan', () => {expect(isCity('San Juan')).toBeTruthy(); });

类似的还有 beforeAll 和 afterAll，在当前spec测试文件开始前和结束后的单次执行。

测试用例分组
默认情况下，before 和 after 的块可以应用到文件中的每个测试。此外可以通过 describe 块来将测试分组。当 before 和 after 的块在 describe 块内部时，则其只适用于该 describe 块内的测试。

// Applies to all tests in this filebeforeEach(() => {return initializeCityDatabase(); }); test('city database has Vienna', () => {expect(isCity('Vienna')).toBeTruthy(); }); test('city database has San Juan', () => {expect(isCity('San Juan')).toBeTruthy(); }); describe('matching cities to foods', () => {// Applies only to tests in this describe blockbeforeEach(() => {return initializeFoodDatabase(); }); test('Vienna <3 sausage', () => {expect(isValidCityFoodPair('Vienna', 'Wiener Würstchen')).toBe(true); }); test('San Juan <3 plantains', () => {expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true); }); });

执行顺序
由于使用了 describe 进行分组，于是就有了嵌套的作用域，各生命周期的执行顺序如下：

外层作用域的 before 比内层的先执行，而 after 则相反；
同一层级 beforeAll 比 beforeEach 先执行，after 则相反；

beforeAll(() => console.log('1 - beforeAll')); afterAll(() => console.log('1 - afterAll')); beforeEach(() => console.log('1 - beforeEach')); afterEach(() => console.log('1 - afterEach')); test('', () => console.log('1 - test')); describe('Scoped / Nested block', () => {beforeAll(() => console.log('2 - beforeAll')); afterAll(() => console.log('2 - afterAll')); beforeEach(() => console.log('2 - beforeEach')); afterEach(() => console.log('2 - afterEach')); test('', () => console.log('2 - test')); }); // 1 - beforeAll// 1 - beforeEach// 1 - test// 1 - afterEach// 2 - beforeAll// 1 - beforeEach// 2 - beforeEach// 2 - test// 2 - afterEach// 1 - afterEach// 2 - afterAll// 1 - afterAll

mock 函数

jest.fn() 可以用来生成一个 mock 函数，jest 可以捕获这个函数的调用、this、返回值等，这在测试回调函数时非常有用。

测试mock
假设我们要测试函数 forEach 的内部实现，这个函数为传入的数组中的每个元素调用一次回调函数。

function forEach(items, callback) {for (let index = 0; index < items.length; index++) {callback(items[index]); }}

为了测试此函数，我们可以使用一个 mock 函数，然后检查 mock 函数的状态来确保回调函数如期调用。

const mockCallback = jest.fn(x => 42 + x); forEach([0, 1], mockCallback); // 此 mock 函数被调用了两次expect(mockCallback.mock.calls.length).toBe(2); // 第一次调用函数时的第一个参数是 0expect(mockCallback.mock.calls[0][0]).toBe(0); // 第二次调用函数时的第一个参数是 1expect(mockCallback.mock.calls[1][0]).toBe(1); // 第一次函数调用的返回值是 42expect(mockCallback.mock.results[0].value).toBe(42);

mock的返回值
Mock 函数也可以用于在测试期间将测试值注入代码︰

const myMock = jest.fn(); console.log(myMock()); // > undefinedmyMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true); console.log(myMock(), myMock(), myMock(), myMock()); // > 10, 'x', true, true

模拟接口返回
假定有个从 API 获取用户的类。该类用 axios 调用 API 然后返回 data，其中包含所有用户的属性：

// users.jsimport axios from 'axios'; class Users {static all() {return axios.get('/users.json').then(resp => resp.data); }}export default Users;

现在，为测试该方法而不实际调用 API (使测试缓慢与脆弱)，我们可以用 jest.mock(...) 函数自动模拟 axios 模块。一旦模拟模块，我们可为 .get 提供一个 mockResolvedValue ，它会返回假数据用于测试。

// users.test.jsimport axios from 'axios'; import Users from './users'; jest.mock('axios'); test('should fetch users', () => {const users = [{name: 'Bob'}]; const resp = {data: users}; axios.get.mockResolvedValue(resp); // or you could use the following depending on your use case:// axios.get.mockImplementation(() => Promise.resolve(resp))return Users.all().then(data => expect(data).toEqual(users)); });

mock函数的匹配器
有了mock功能，就可以给函数增加一些自定义匹配器：

// The mock function was called at least onceexpect(mockFunc).toHaveBeenCalled(); // The mock function was called at least once with the specified argsexpect(mockFunc).toHaveBeenCalledWith(arg1, arg2); // The last call to the mock function was called with the specified argsexpect(mockFunc).toHaveBeenLastCalledWith(arg1, arg2); // All calls and the name of the mock is written as a snapshotexpect(mockFunc).toMatchSnapshot(); 也可以自己通过原生的匹配器模拟，下方的代码与上方的等价：// The mock function was called at least onceexpect(mockFunc.mock.calls.length).toBeGreaterThan(0); // The mock function was called at least once with the specified argsexpect(mockFunc.mock.calls).toContainEqual([arg1, arg2]); // The last call to the mock function was called with the specified argsexpect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([arg1,arg2,]); // The first arg of the last call to the mock function was `42`// (note that there is no sugar helper for this specific of an assertion)expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42); // A snapshot will check that a mock was invoked the same number of times,// in the same order, with the same arguments.expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]); expect(mockFunc.getMockName()).toBe('a mock name');

五、Vue Test Utils
官网是这样介绍 Vue Test Utils 的：

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

以下的例子均基于 vue-cli 脚手架，包括 webpack/babel/vue-loader

测试单文件组件

Vue 的单文件组件在它们运行于 Node 或浏览器之前是需要预编译的。我们推荐两种方式完成编译：通过一个 Jest 预编译器，或直接使用 webpack。这里我们选用 Jest 的方式。

yarn add -D jest @vue/test-utils vue-jest

vue-jest 目前并不支持 vue-loader 所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特性，你需要用 Mocha 取代 Jest 来运行你的测试，同时用 webpack 来编译你的组件。

处理 webpack 别名

vue-cli 中默认使用 @ 作为 /src 的别名，在 Jest 也需要单独配置：

// jest.config.jsmodule.exports = {moduleNameMapper: {'^@/(.*)$': '/src/$1'}}

挂载组件

被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。

// test.js// 从测试实用工具集中导入 `mount()` 方法// 同时导入你要测试的组件import { mount } from '@vue/test-utils'import Counter from './counter'// 现在挂载组件，你便得到了这个包裹器const wrapper = mount(Counter)// 你可以通过 `wrapper.vm` 访问实际的 Vue 实例const vm = wrapper.vm// 在控制台将其记录下来即可深度审阅包裹器// 我们对 Vue Test Utils 的探索也由此开始console.log(wrapper)

在挂载的同时，可以设置组件的各种属性：

const wrapper = mount(Counter, {localVue,data() {return {bar: 'my-override'}},propsData: {msg: 'abc'},parentComponent: Foo, // 指定父组件provide: {foo() {return 'fooValue'}}})

测试组件渲染出来的 HTML
通过包裹器wrapper的相关方法，判断组件渲染出来的HTML是否符合预期。

import { mount } from '@vue/test-utils'import Counter from './counter'describe('Counter', () => {// 现在挂载组件，你便得到了这个包裹器const wrapper = mount(Counter)test('renders the correct markup', () => {expect(wrapper.html()).toContain('0')})// 也便于检查已存在的元素test('has a button', () => {expect(wrapper.contains('button')).toBe(true)})})

模拟用户操作
当用户点击按钮的时候，我们的计数器应该递增。为了模拟这一行为，我们首先需要通过 wrapper.find() 定位该按钮，此方法返回一个该按钮元素的包裹器。然后我们能够通过对该按钮包裹器调用 .trigger() 来模拟点击。

it('button click should increment the count', () => {expect(wrapper.vm.count).toBe(0)const button = wrapper.find('button')button.trigger('click')expect(wrapper.vm.count).toBe(1)})

为了测试计数器中的文本是否已经更新，我们需要了解 nextTick。任何导致操作 DOM 的改变都应该在断言之前 await nextTick 函数。

it('button click should increment the count text', async () => {expect(wrapper.text()).toContain('0')const button = wrapper.find('button')await button.trigger('click')expect(wrapper.text()).toContain('1')})

组件的事件

每个挂载的包裹器都会通过其背后的 Vue 实例自动记录所有被触发的事件。你可以用 wrapper.emitted() 方法取回这些事件记录。

wrapper.vm.$emit('foo')wrapper.vm.$emit('foo', 123)/*`wrapper.emitted()` 返回以下对象：{foo: [[], [123]]}*/

然后你可以基于这些数据来设置断言：

// 断言事件已经被触发expect(wrapper.emitted().foo).toBeTruthy()// 断言事件的数量expect(wrapper.emitted().foo.length).toBe(2)// 断言事件的有效数据expect(wrapper.emitted().foo[1]).toEqual([123])

还可以触发子组件的事件：

import { mount } from '@vue/test-utils'import ParentComponent from '@/components/ParentComponent'import ChildComponent from '@/components/ChildComponent'describe('ParentComponent', () => {test("displays 'Emitted!' when custom event is emitted", () => {const wrapper = mount(ParentComponent)wrapper.find(ChildComponent).vm.$emit('custom')expect(wrapper.html()).toContain('Emitted!')})})

组件的data

可以使用 setData() 或 setProps 设置组件的状态数据：

it('manipulates state', async () => {await wrapper.setData({ count: 10 })await wrapper.setProps({ foo: 'bar' })})

模拟vue实例方法

由于Vue Test Utils 的 setMethods() 即将废弃，推荐使用 jest.spyOn() 方法来模拟Vue实例方法：

import MyComponent from '@/components/MyComponent.vue'describe('MyComponent', () => {it('click does something', async () => {const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')await shallowMount(MyComponent).find('button').trigger('click')expect(mockMethod).toHaveBeenCalled()})})

全局插件

如果你需要安装所有 test 都使用的全局插件，可以使用 setupFiles，先在 jest.config.js 中指定 setup 文件：

// jest.config.jsmodule.exports = {setupFiles: ['/tests/unit/setup.js']}

然后在 setup.js 使用：

// setup.jsimport Vue from 'vue'// 以下全局注册的插件在jest中不生效，必须使用localVueimport ElementUI from 'element-ui'import VueClipboard from 'vue-clipboard2'Vue.use(ElementUI)Vue.use(VueClipboard)Vue.config.productionTip = false

当你只是想在某些 test 中安装全局插件时，可以使用 localVue，这会创建一个临时的Vue实例：

import { createLocalVue, mount } from '@vue/test-utils'// 创建一个扩展的 `Vue` 构造函数const localVue = createLocalVue()// 正常安装插件localVue.use(MyPlugin)// 在挂载选项中传入 `localVue`mount(Component, {localVue})

测试watch

假如我们有一个这样的watcher:

watch: {inputValue(newVal, oldVal) {if (newVal.trim().length && newVal !== oldVal) {console.log(newVal)}}}

由于watch的调用是异步的，并且在下一个tick才会调用，因此可以通过检测watcher里的方法是否被调用来检测watch是否生效，使用 jest.spyOn() 方法：

describe('Form.test.js', () => {let cmp...describe('Watchers - inputValue', () => {let spybeforeAll(() => {spy = jest.spyOn(console, 'log')})afterEach(() => {spy.mockClear()})it('is not called if value is empty (trimmed)', () => {})it('is not called if values are the same', () => {})it('is called with the new value in other cases', () => {})})})it("is called with the new value in other cases", done => {cmp.vm.inputValue = "https://www.it610.com/article/foo"; cmp.vm.$nextTick(() => {expect(spy).toBeCalled(); done(); }); });

第三方插件

当我们使用一些第三方插件的时候，一般不需要关心其内部的实现，不需要测试其组件，可以使用 shallowMount 代替 mount, 减少不必要的渲染：

import { shallowMount } from '@vue/test-utils'const wrapper = shallowMount(Component)wrapper.vm // 挂载的 Vue 实例还可以通过 findAllComponents 来查找第三方组件：import { Select } from 'element-ui'test('选中总部时不显示分部和网点', async () => {await wrapper.setProps({value: {clusterType: 'head-quarter-sit',branch: '',site: ''}})// 总部不显示分部和网点expect(wrapper.findAllComponents(Select)).toHaveLength(1)})

六、总结
单元测试理论