webpack4: Karma + mocha + node assert1. 前端自动化测试如果你觉得单元测试没有什

1. 前端自动化测试

如果你觉得单元测试没有什么了不起的，只能说明你的项目做的不够大。

当随着项目越来越大以及人员的变动，你很难去确保你代码的正确性。也许一个小小的改动，引发了一系列错误的输出。这种时候很难通过“肉眼”去发现问题，也不可能把全部工作丢给测试。这时候我们就需要单元测试去提前发现问题。

单元测试就是去测试正确的输入是否能匹配到期望的输出。比如说我点击一个按钮，希望出现一个popup。如果出现了popup，就说明匹配上了期望的输出；如果没有出现，就没有匹配。

2.工具介绍

2.1 karam

官网：karma-runner.github.io/latest/inde…

Karma is essentially a tool which spawns a web server that executes source code against test code for each of the browsers connected.

Karma既不是一个测试框架也又不是一个断言库，本质是一个能够让你的测试代码在各个浏浏览器运行的工具。除了chrome,firefox,ideg,ie等浏览器上运行，还可以在无头浏览器headless上运行。

有了karma这个工具后，我还需要测试框架。

2.2 Mocha

现在流行的框架有：

Jasmin

开箱即用（支持断言和仿真）
全局环境
比较老，坑基本都踩过了

Mocha

灵活（不包含断言和仿真，可以自行选择断言库，如chai）
社区比较成熟
需要更多配置

Qunit

由JQuery团队开发的，目前Jquery UI和Jquery Mobile都在使用这个框架

More Other

2.3 Node Assert

官网： nodejs.cn/api/assert.…

3. 手把手搭建一个自动化测试环境

1. 新建一个文件夹 UnitTest

2. 进入UnitTest目录下，打开命名行，运行npm init -y。这是发现生成了一个新的文件package.json

3.安装webpack4

官网：webpack.js.org/guides/gett…

运行下面两行命令：

npm install webpack --save-dev

npm install webpack-cli --save-dev

4. 安装karma and Karma Plugins

karma Install: karma-runner.github.io/latest/intr…

npm install karma --save-dev  
npm install karma-mocha karma-chrome-launcher --save-dev 
npm install -g karma-cli

karma configuration: karma-runner.github.io/latest/intr…

karma init

多生成了一个karma.conf.js文件

5. 安装mocha

官网：mochajs.org/

npm install mocha --save-dev

6 创建一个test/test.js文件

const assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1, 2, 3].indexOf(4), -1);
    });
  });
});

7. 配置karma.conf.js

然后运行mocha

或者配置package.json文件,运行 npm test

运行结果如下：

到这里已经可以成功运行一个单元测试了,但是这个是用mocha 跑起来的，不是用karma。那接下来我们就看看怎么用karma和浏览器还有覆盖率结合起来。

4. 自动化debug模式

之前装过karma-chrome-launcher插件了

npm install karma-browserify --save-dev 
npm install browserify --save-dev

browserify主要是解决require is undefined的bug。如果没有用到require，可以忽略。

karma.cong.js配置：

frameworks: ['mocha', 'browserify'],    
plugins: ['karma-browserify', 'karma-mocha', 'karma-chrome-launcher'],    
preprocessors: {      'test/**.js': ['browserify']    },    
browsers: ['Chrome'],     
files: [      'test/**.js'    ]

运行karma start，运行结果如下

遇到的错误：

error_1:

require is not defined.

stackoverflow.com/questions/1…

因为require在node端是可以识别的，在浏览器端不能识别。所以需要添加karma-browserify去解决这个问题

npm install karma-browserify --save-dev

然后运行

karma start

o.o 又报错了

error_2

看得出来是缺少browserify，于是需要安装

npm install browserify --save-dev

5. 自动化converage

npm install karma-coverage --save-dev

karma.conf.js

plugins: ['karma-coverage', 'karma-browserify', 'karma-mocha', 'karma-chrome-launcher'],    
preprocessors: {      
'test/**.js': ['browserify'],      
'src/**/*.js': ['coverage']    },    
coverageReporter: {      type: 'html',      dir: 'coverage/'    },    
reporters: ['progress', 'coverage']

运行karma start之后会发现UnitTest会多加一个coverage

因为我src下面没有js文件，所以覆盖率为0

到此为止，我们已经实现了一个webpack4: karma + mocha + node assert的自动化测试。