一、为什么需要单元测试
单元测试是用来测试项目中的一个模块的功能，如函数、类、组件等。单元测试的作用有以下：
- 正确性：可以验证代码的正确性，为上线前做更详细的准备；
- 自动化：测试用例可以整合到代码版本管理中，自动执行单元测试，避免每次手工操作；
- 解释性：能够为其他开发人员提供被测模块的文档参考，阅读测试用例可能比文档更完善；
- 驱动开发、指导设计：提前写好的单元测试能够指导开发的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.js
const path = require('path')
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
rootDir: path.resolve(__dirname, './'),
coverageDirectory: '<rootDir>/tests/unit/coverage',
collectCoverageFrom: [
'src*.{js,ts,vue}',
'src/services*.spec.(js|jsx|ts|tsx)|**/__tests__
然后你可以基于这些数据来设置断言：
// 断言事件已经被触发
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.js
module.exports = {
setupFiles: ['<rootDir>/tests/unit/setup.js']
}
然后在 setup.js 使用：
// setup.js
import Vue from 'vue'
// 以下全局注册的插件在jest中不生效，必须使用localVue
import 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 spy
beforeAll(() => {
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 = "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)
})
六、总结
单元测试理论
- 单元测试能够持续验证代码的正确性、驱动开发，并起到一定的文档作用；
- 测试时数据尽量模拟现实，只考虑测试，不考虑内部代码；
- 测试时充分考虑数据的边界条件
- 对重点、复杂、核心代码，重点测试
- 编写单元测试有以下阶段：准备阶段、执行阶段、断言阶段、清理阶段；
- 单元测试的工具可分为三类：测试运行器（Test Runner）、测试框架、工具库。
Jest
- --watch 选项可以监听文件的编码，自动执行单元测试；
- 测试异步代码可以用 done 方法或 aync 函数；
- mock函数可以捕获这个函数的调用、this、返回值等，测试回调函数时非常有用。
Vue Test Utils
- 用 mount 方法挂载组件，并可自定义各种vue属性；
- shallowMount 方法不渲染子组件，从而加快测试速度；
- setupFiles 可以设置全局环境，如安装 element-ui；
- createLocalVue 可在创建单独的vue实例，与全局的隔离；
到此这篇关于前端Vue单元测试入门教程的文章就介绍到这了,更多相关Vue单元测试内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
