搭建 karma + jasmine 测试环境
在前端开发的过程中，我们会写很多的功能函数，这样就会涉及到对这些功能函数进行单元测试，而karma就是一个很好用的可以在浏览器环境中进行测试的集成工具。
1. 什么是 karma
karma 是由Angular团队开发的一款测试工具，帮助开发者更好更快速地在多种环境下执行测试代码，拿到测试结果。在运行的时候，它会自动启动配置好的浏览器，同时也会启动一个 node 服务器，然后在启动好的浏览器中执行测试代码，并将测试代码执行结果传回给 node 服务器，然后 node 服务器在打印出收到的执行结果。
2. 安装 karma
$ npm install karma -D
复制代码这里安装到项目路径下就可以了（-D 是 --save-dev 的简写）。
3. 初始化
$ ./node-modules/.bin/karma init
复制代码这里如果不想每次都执行本地路径下的 karma 命令，可以在全局安装 karma-cli
$ 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配置文件。
4. 根据配置项的选择安装插件
（1） 测试框架选择的是jasmine，安装步骤如下：
$ npm install jasmine-core karma-jasmine -D
复制代码这里要装两个，一个是jasmine的核心，另一个是karma对jasmine的封装。
（2） 浏览器选择的是PhantomJS，安装步骤如下：
$ npm install karma-phantomjs-launcher -D
复制代码（3） 如果涉及到对以ES6编写的代码进行测试，就要安装Babel及其相关插件：
$ npm install babel-cli babel-preset-env babel-plugin-transform-es2015-modules-umd -D
$ npm install karma-babel-preprocessor -D
复制代码（4） 安装生成代码覆盖率报告的插件：
$ npm install karma-coverage -D
复制代码5. 修改karma配置文件
// 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配置文件：
// .babelrc
{
"presets": ["env"],
"plugins": ["transform-es2015-modules-umd"],
"auxiliaryCommentBefore": "istanbul ignore next"
}
复制代码6. 写测试文件
// 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);
});
});
复制代码7. 运行测试
$ karma start
复制代码8. 结束
按照上述步骤，大家应该可以配置好自己的 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