vue单元测试笔记
1、vue单元测试工具/框架概述
vue test utils
vue test utils 通过将组件隔离挂载，然后模拟必要的输入 ( prop、注入、用户事件 ) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试Vue组件。
vue-test-utils 链接：https://vue-test-utils.vuejs.org/zh
karma
基于 node 的 js 测试工具，在vue中主要作用，为编写的测试用例提供多个浏览器（ie、chrome等）环境，可检测兼容性问题，暴露 node 环境下暴露不出的bug，若代码只在node环境下运行，不需要 karma。
mocha
mocha的作用是运行测试脚本。
mocha 是 js 的单元测试框架，即可在浏览器环境下运行，也可在node环境下运行。使用 mocha 自动运行所有测试，并给出测试结果，将注意力集中在编写单元测试本身。
- mocha 可简单测试 js 函数 ，又可测试异步代码；
- mocha 可自动化运行所有测试用例，也可运行特定测试；
- mocha 支持before、after、beforeEach 和 afterEach 来编写初始化代码；
阮一峰老师实例教程链接：http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
chai
chai是一套TDD(测试驱动开发)/BDD(行为驱动开发)的断言库，“断言”，即判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。
chai 风格：BDD 行为驱动开发(侧重测试逻辑)、TDD测试驱动开发(注重输出结果)；
- BDD：expect should 使用相同的链式语言来组织断言，expect 使用构建函数来创建断言对象实例，should通过Object.prototype来实现断言，故should不支持IE，为了兼容IE浏览器，一般选用expect。
- TDD：assert风格断言和node包含的assert模块相似。
chai API 链接：https://www.chaijs.com/api
enzyme
React 的单元测试工具，在这就不做介绍。
sinon
sinon是一个测试辅助工具，通过伪装和拦截，来模拟与其他系统或函数的操作，可解耦测试的依赖。
selenium
selenium 是 web 应用程序测试工具，主要用于 e2e测试。
测试运行器——运行测试的程序
- jest
- mocha-webpack
- karma-mocha
测试运行器性能比较链接：https://github.com/eddyerburgh/vue-unit-test-perf-comparison
2、vue-cli 中搭建单元测试实例—— mocha-webpack + chai
vue-test-utils 作用，挂载组件封装到包裹器内，包裹器会暴露很多封装、遍历和查询其内部的vue组件示例的便捷方法；
mocha 作用，测试运行器，即运行测试的程序；
chai 作用，断言库。
项目的搭建，新建 vue-cli 时选择使用 Unit Testing > mocha+chai （vue 版本为3.3.0）。
在已有项目添加单元测试：
vue add @vue/unit-mochapackage.json自动注入命令
"test:unit": "vue-cli-service test:unit"注：测试基于node环境，浏览器环境由JSDom模拟。
命令行参数
Usage: vue-cli-service test:unit [options] [...files]
Options:
--watch, -w run in watch mode
--grep, -g only run tests matching
--slow, -s "slow" test threshold in milliseconds
--timeout, -t timeout threshold in milliseconds
--bail, -b bail after first test failure
--require, -r require the given module before running tests
--include include the given module into test bundle
--inspect-brk Enable inspector to debug the tests 默认文件地址为 项目根目录下 /tests/unit 下以 .spec 结尾的所有文件。
import {expect} from 'chai';
import {shallowMount} from '@vue/test-utils';
import '@/assets/js/elementImport';
import Login from '@/views/Login.vue';
describe('Login.vue', () => {
it('renders Login contain text', () => {
const wrapper = shallowMount(Login);
expect(wrapper.text()).to.include('登录');
})
});
descript 块称为“测试套件”，表示一组相关测试，也是一个函数，第一个参数是测试套件的名称，第二个参数是一个实际执行的函数；
it 块称为 “测试用例”，表示一个单独测试用例，是测试的最小单位，也是一个函数，第一个参数是测试用例名字，第二个参数是一个实际执行的函数；
expect 是 chai断言库引入的，并指定使用expect断言风格；
组件 Login内有使用elementUI，需要引入组件。
3、单元测试的适用性
单元测试是必要的，可以检查代码是否存在bug，但是实际项目中的业务逻辑代码，编写单元测试比较吃力，更适于用在基础框架中使用。