【vue系列】vue2.0 项目配置 Mocha 单元测试

咱们团队中的项目众多，基本上都没有配置单元测试，其中一个 vue2.0 项目是咱们的主站项目，很早以前我就想给这个项目加上单测，只是一直忙于业务就没顾上。正巧立刻过年了，最近需求很少，忙完需求，就开始搞搞单测。

从有配置单测的想法我就一直在思考，咱们这个项目是否真的须要加单测，咱们要测试什么，那么多的测试运行器又该怎么选择，以及怎么在团队中推行单测。基于这些思考，开始实施了。

咱们是否真的须要单元测试

目前整个团队的全部的项目都没单测，而其它团队的项目不少都有对应的测试工具，总以为咱们技术栈少了点什么。这虽然是我要加单测的充分条件，倒是我想配置单测的初衷。

项目背景

其次咱们这个项目维持了四五年，进行了至少4次项目架构重构的升级，这个项目中有主要有 v7 版、v8 版，总计 近200 个页面，目前大部分的业务都在 v8 版。固然咱们还有 v9 版，因为项目业务不断增多，不得不对仓库进行拆分，v9版 是基于 vue-cli 搭建的的一个新仓库，这里就不在赘述了。前两版的技术栈选型分别是：

• v7版 juicer + jQuery
• v8版 vue2.0 + webpack

就现状来看，给v8版配置单测比较合适，一方面主要业务在v8上，另外一方面从使用的 vue2.0 + webpack 技术栈来看，更适合写单元测试。

预期指望

我指望给 v8 版的公共组件和工具方法都加上单元测试，这对团队代码的可靠性验证来讲确定是有益的。后期迭代，也能够经过单测防止意外状况的发生。嗯，这就是要加单测的必要条件吧。

除此以外，组件的单元测试还能够为咱们带来更多的好处：

• 提供描述组件行为的文档
• 节省手动测试的时间
• 减小研发新特性时产生的 bug
• 改进设计
• 促进重构

自动化测试能够帮助团队中的开发者能够维护复杂的基础代码。单元测试是测试体系中最有用的，即能帮助开发者思考如何设计一个组件，又能够帮助开发者重构一个现有组件。

一开始，当你们对一个项目的添加单测的愿景还不够清晰的时候，单元测试可能会拖慢开发进度，可是一旦你们的愿景创建起来而且有真实的用户对这个应用产生兴趣，那么单元测试就是绝对有必要的了，它们会确保基础代码的可维护性和可扩展性。

如何选择测试运行器

单元测试应该具有：

• 能够快速运行
• 易于理解
• 只测试一个独立单元的工做

Vue Test Utils 是 Vue 组件单元测试的官方库，官方推荐两个测试运行期：

• Jest 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验很是好。不过你须要一个可以将单文件组件导入到测试中的预处理器。咱们已经建立了 vue-jest 预处理器来处理最多见的单文件组件特性，但仍不是 vue-loader 100% 的功能。
• mocha-webpack 是一个 webpack + Mocha 的包裹器，同时包含了更顺畅的接口和侦听模式。这些设置的好处在于咱们可以经过 webpack + vue-loader 获得完整的单文件组件支持，但这自己是须要 不少配置 的。

我我的更偏向于 mocha-webpack，毕竟测试单文件组件，上手又快、功能又全。

配置 mocha 单元测试

浏览器环境 Vue Test Utils 依赖浏览器环境，用 JSDOM 在 Node 虚拟浏览器环境运行测试。

Vue 的单文件组件在它们运行于 Node 或浏览器以前是须要预编译的。咱们直接使用 webpack。针对 mocha 须要基于 webpack + vue-loader 进行设置。

选择了 mocha-webpack 测试单文件组件，是经过 webpack 编译全部的测试文件而后在测试运行器中运行。这样作的好处是能够彻底支持全部 webpack 和 vue-loader 的功能。mocha-webpack 可以提供了很是流畅的体验。

1. 设置 mocha-webpack

v8项目基于已经安装并配置好了 webpack、vue-loader 和 Babel。首先要作的是安装测试依赖：

npm install --save-dev @vue/test-utils mocha mocha-webpack
复制代码

在 package.json中定义一个测试脚本。

// package.json
{
  "scripts": {
    "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
  }
}
复制代码

2. 暴露 NPM 依赖

将依赖外置以提高测试的启动速度，经过 webpack-node-externals 外置全部的 NPM 依赖：

// webpack.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  externals: [nodeExternals()]
}

复制代码

3. 源码表

源码表在 mocha-webpack 中须要经过内联的方式获取。推荐配置为：

module.exports = {
  // ...
  devtool: 'inline-cheap-module-source-map'
}
复制代码

4. 设置浏览器环境

Vue Test Utils 须要在浏览器环境中运行。咱们能够在 Node 中使用 jsdom-global 进行模拟：

npm install --save-dev jsdom jsdom-global
复制代码

而后在 test/setup.js 中写入：

npm install --save-dev jsdom jsdom-global
复制代码

这行代码会在 Node 中添加一个浏览器环境，这样 Vue Test Utils 就能够正确运行了。

5. 选用 expect 断言库

推荐 Jasmine/Jest 风格的 expect 断言

npm install --save-dev expect
复制代码

而后在 test/setup.js 中编写：

require('jsdom-global')()

global.expect = require('expect')
复制代码

6. 为测试优化 Babel

mocha 是比较经常使用的 node 测试框架，可是只支持 commonjs 模块，要让 mocha 支持 ES6 模块，须要 babel的帮助。babel-loader 将会自动使用相同的.babelrc配置文件。

写单测的注意事项

• describe 测试套件
• 每一个 it 块只作一个断言，it块称为"测试用例"
• 让测试描述更简短清晰
• 只提供测试须要的最小化数据
• 把重复的逻辑重构到了一个工厂函数中

小结：

目前已经写了一些单测，预期是给公共组件和工具类函数都加单测。业务需求示状况添加单测。

Vue 组件单元测试的通常思路：渲染这个组件，而后断言这些标签是否匹配组件的状态。

一般，在实现完成后添加测试时，开发们倾向于接受程序生成的输出，而没必要经过手动计算仔细检查结果。 将要求转化为可伪造的测试。

疑问

好像已经造成了习惯，每次都会留下一些疑问，后面慢慢解疑吧。

• 如何在组件中测试 Vue-router
• 如何在组件中测试 Vuex
• 如何提高测试的启动速度？
• chai断言库与 Jest的 expect 有什么区别
• Sinon 是什么
• mixin、watch、computed如何添加单测

参考

• mocha官网
• mocha-webpack
• jest/expect
• Vue Test Utils 官网
• 使用 Mocha 的示例工程