1. 前端自动化测试
如果你觉得单元测试没有什么了不起的,只能说明你的项目做的不够大。
当随着项目越来越大以及人员的变动,你很难去确保你代码的正确性。也许一个小小的改动,引发了一系列错误的输出。这种时候很难通过“肉眼”去发现问题,也不可能把全部工作丢给测试。这时候我们就需要单元测试去提前发现问题。
单元测试就是去测试正确的输入是否能匹配到期望的输出。比如说我点击一个按钮,希望出现一个popup。如果出现了popup,就说明匹配上了期望的输出;如果没有出现,就没有匹配。
2.工具介绍
2.1 karam
官网:karma-runner.github.io/latest/inde…
Github: github.com/karma-runne…
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
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的自动化测试。