前言
单元测试，这一环节对我们的应用的重要性不言而喻，它能很大程度确保我们项目运行的健壮性。因此，前一段时间，笔者公司要求现有的vue搭建的npm组件库做单元测试。之前，笔者对单元测试做过了解，一直想做，正好借此机会向老大要了这个任务过来。下面就是笔者此次单元测试的分享。
单元测试
单元测试就是对一段代码做隔离测试。这一段代码的选择，不是固定的，而是自己去把握。
测试框架选择
如何去选择呢？
笔者认为，可以从三个方面去衡量一个框架（或者说一个测试相关的技术栈）值不值得应用。
- 运行环境的限制（一般为node环境和浏览器环境）
- 运行性能的高低
- 测试报告生成
以上三个点不一定正确，纯属笔者个人观点。
框架选择
市面上有很多成熟的测试框架，比如Jest，Mocha等。但我们对框架的选择一定要契合我们自己的项目需求。
笔者的项目是vue搭建的npm组件库，vue官方文档对vue相关的测试也是有介绍的。因此，就去了解了一番。
综合对比了下后，笔者选择了Running Vue Test Utils with Karma。
karma测试搭建
安装
npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha
karma.conf.js文件配置
首先，karma的默认配置文件是karma.conf.js。当运行时，可直接执行脚本命令karma start。如果是自己另起的文件名，比如my.conf.js，则应该 karma start my.conf.js。
下面直接给出笔者的文件配置，重点地方加以说明：
// karma.conf.js
const webpackConfig = require('./build/webpack.test');
module.exports = function(config) {
const configuration = {
frameworks: ['mocha', 'chai', 'webpack'], // 此处的配置，将框架全局变量声明为全局
files: ['test/**/*.spec.js'],
preprocessors: { // 预处理器
'test/**/*.spec.js': ['webpack', 'sourcemap'] // webpack预编译处理;sourcemap映射到源码
},
webpack: webpackConfig,
reporters: ['spec'],
browsers: ['ChromeHeadless'] // 填入本地存在的正确的浏览器名称，karma会自动打开。
};
config.set(configuration);
};
- frameworks：该字段所需的框架，是需要通过npm下载安装的。放置测试框架名，断言库名，webpack等。
- files：填入你需要测试的文件。
- preprocessors：预处理器。可配置源码的编译，及映射等功能。
- webpack：配置测试所需的webpack编译功能。
注：光有测试框架还不行，我们还需要安装断言库，这里我们选择chai。所谓断言，就是判断源码的执行结果和预期是否一致。
配置运行karma脚本命令
这里笔者配置了两种命令，放在package.json中:
"test": "karma start karma.conf.js --single-run",
"test:watch": "karma start karma.conf.js"
第一个命令：一次性运行所有测试文件就结束了。
第二个命令：运行测试文件，并监听文件是否改动，改动了则运行。跟webpack的watch类似。
遇到的问题
1.断言库chai的expect变量，如何在全局文件中使用呢？
解决方案：
2.如何监听测试文件
注意：–single-run和watch这两个命令选项的功能是相斥的，二者只能有一个。
3.测试文件出错，如何找到源码行数？
安装npm install karma-sourcemap-loader --save-dev，配置文件中如下配置：
注意：切忌在webpack配置中打开devtool选项，否则，无法映射到源码。
4.describe函数来自mocha框架，我在配置文件中的frameworks字段写入了mocha，但eslint报undefined。
在eslint配置文件中，在env字段中加入mocha: true。
5.expect函数来自chai框架，我在配置文件中的frameworks字段写入了chai，但eslint报undefined。
这时候我们是在eslint配置文件中加入如下字段：
globals: {
expect: true
}
总结
好了，以上就是笔者给现有npm组件库做单元测试的经历。如有问题，欢迎大家指正~~~