使用karma+mocha+chai为vue组件库做单元测试

前言

单元测试，这一环节对我们的应用的重要性不言而喻，它能很大程度确保我们项目运行的健壮性。因此，前一段时间，笔者公司要求现有的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组件库做单元测试的经历。如有问题，欢迎大家指正~~~