Fork me on GitHub

搭建 karma + jasmine 测试环境

test-karma

在前端开发的过程中,我们会写很多的功能函数,这样就会涉及到对这些功能函数进行单元测试,而karma就是一个很好用的可以在浏览器环境中进行测试的集成工具。

什么是 karma

karma 是由Angular团队开发的一款测试工具,帮助开发者更好更快速地在多种环境下执行测试代码,拿到测试结果。在运行的时候,它会自动启动配置好的浏览器,同时也会启动一个 node 服务器,然后在启动好的浏览器中执行测试代码,并将测试代码执行结果传回给 node 服务器,然后 node 服务器在打印出收到的执行结果。

安装 karma

1
$ npm  install karma -D

这里安装到项目路径下就可以了(-D 是 –save-dev 的简写)。

初始化

1
$ ./node-modules/.bin/karma init

这里如果不想每次都执行本地路径下的 karma 命令,可以在全局安装 karma-cli

1
$ npm install karma-cli -g

以后就可以在任何路径执行 karma start 并且运行的 karma 都是在当前项目下安装的版本。

在 init 时会让你选择一些配置项:

test framework
我这里选择的是jasmine,它是一款JavaScript断言测试库
use Require.js
根据个人情况,我选择的是no
capture any browsers automatically
选择浏览器,我选择的是无头浏览器PhantomJS
location of your source files
为空
any of files included by the previous patterns be excluted
为空
karma to watch all files and run the tests on change
是否监测,我选择的是no

在选择完所有配置项后,会自动生成karma.conf.js配置文件。

根据配置项的选择安装插件

(1) 测试框架选择的是jasmine,安装步骤如下:

1
$ npm install jasmine-core karma-jasmine -D

这里要装两个,一个是jasmine的核心,另一个是karma对jasmine的封装。

(2) 浏览器选择的是PhantomJS,安装步骤如下:

1
$ npm install karma-phantomjs-launcher -D

(3) 如果涉及到对以ES6编写的代码进行测试,就要安装Babel及其相关插件:

1
2
$ npm install babel-cli babel-preset-env babel-plugin-transform-es2015-modules-umd -D
$ npm install karma-babel-preprocessor -D

(4) 安装生成代码覆盖率报告的插件:

1
$ npm install karma-coverage -D

修改karma配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// karma.conf.js

module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'./src/**/*.js',
'./test/**/*.spec.js'
],
exclude: [
],
preprocessors: {
'./src/**/*.js': ['babel'],
'./test/**/*.spec.js': ['babel', 'coverage']
},
reporters: ['progress', 'coverage'],
coverageReporter: {
type: 'html',
dir: 'coverage/'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
singleRun: true,
concurrency: Infinity
})
}

修改Babel配置文件:

1
2
3
4
5
6
// .babelrc
{
"presets": ["env"],
"plugins": ["transform-es2015-modules-umd"],
"auxiliaryCommentBefore": "istanbul ignore next"
}

写测试文件

1
2
3
4
5
6
7
8
9
10
11
// PraiseButton.spec.js
import PraiseButton from '../src/PraiseButton.js';

describe('测试点赞组件', function () {
it('addOne() 函数', function () {
var testPraiseButton = new PraiseButton();
testPraiseButton.addOne();

expect(testPraiseButton.countNum).toBe(1);
});
});

运行测试

1
$ karma start

结束

按照上述步骤,大家应该可以配置好自己的 karma + jasmine 测试环境,如果遇到问题或者文中有写错的地方,欢迎大家来讨论。文章末尾是需要安装模块的链接,大家可以一键直达。

参考链接

karma官网
https://karma-runner.github.io/2.0/intro/installation.html
karma-cli
https://www.npmjs.com/package/karma-cli
karma-jasmine
https://www.npmjs.com/package/karma-jasmine
jasmine-core
https://www.npmjs.com/package/jasmine-core
karma-coverage
https://www.npmjs.com/package/karma-coverage