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