本文详细介绍Karma-Jasmine测试环境的搭建流程。涵盖Node.js环境配置、Karma核心及插件安装、karma.conf.js配置文件详解，以及如何启用自动监听和生成HTML代码覆盖率报告，帮助开发者快速建立前端自动化测试工作流。
Karma与Jasmine简介
1.Karma介绍
Karma的前身是Testacular，由Google于2012年开源发布，并在2013年正式更名为Karma。该名称源自佛教概念中的缘分与因果，相较于Cassandra等名称更具神秘色彩。
Karma是一款基于Node.js构建的JavaScript测试运行器（Test Runner）。它支持在所有主流Web浏览器中执行测试，并可集成至持续集成（CI）工具及各类代码编辑器中。其核心优势在于具备文件监控（Watch）功能，能够自动检测文件变更并重新执行测试，同时将结果输出至控制台。
2.Jasmine介绍
Jasmine（茉莉花）是一款独立的JavaScript行为驱动开发（BDD）测试框架，不依赖其他任何JavaScript库。其语法简洁清晰，便于编写测试代码，是JavaScript开发中优秀的测试框架选择之一。
目前流行的测试框架包括Qunit和Jasmine。若需深入了解两者的差异，可参考《Javascript单元测试框架Qunit和Jasmine的比较》一文。
温馨提示：本文涉及的资料链接及Karma插件安装步骤，可能需要使用代理工具（如翻墙）才能正常访问和执行。
Karma-Jasmine环境搭建步骤
步骤一：安装Node.JS（版本：v0.12.4, windows-64）
由于Karma依赖Node.js运行，因此首要任务是安装Node.js。访问 https://nodejs.org/download/ 下载对应操作系统的NodeJS版本，本文示例下载的是Windows 64位msi安装包。
下载完成后，双击 node-v0.12.4-x64.msi 进行安装。安装过程较为简单，一路点击“下一步”即可，建议修改默认安装目录以方便管理。
图1（选择安装内容，默认即可）：
步骤二：安装Karma
打开Node.js命令行工具：Node.js command prompt：
图2（处于“开始->所有程序->Node.js”中）：
图3（我们将安装到E:\Karma路径下）：
输入以下命令安装Karma：
代码如下:
npm install karma --save-dev图4（Karma安装完毕后）：
步骤三：安装karma-jasmine/karma-chrome-launcher插件
继续在命令行中输入npm命令，安装karma-jasmine和karma-chrome-launcher插件：
代码如下:
npm install karma-jasmine karma-chrome-launcher --save-dev图5（karma-jasmine、karma-chrome-launcher安装完毕之后）：
步骤四：安装karma-cli
karma-cli用于简化Karma的调用过程。安装命令如下，其中-g参数表示全局安装，以便后续能方便地使用karma命令：
代码如下:
npm install -g karma-cli图6（karma-cli安装完毕之后）：
Karma-Jasmine安装完毕：
图7（安装完毕后，在E:\Karma文件夹下会有一个node_modules目录，里面包含刚才安装的karma、karma-jasmine、karma-chrome-launcher目录，当然还包含了jasmine-core目录）：
Karma启动与基础配置
开启Karma：
输入命令：
代码如下:
karma start图8（运行后如图所示出现了一行INFO信息，并没有其他提示和动作，因为此时我们没有配置karma的启动参数。后面会加入karma.conf.js，这样karma就会自动启动浏览器并执行测试用例了）：
图9（手动打开Chrome，输入localhost:9876，如果看到这个页面，证明已经安装成功）：
Karma+Jasmine配置：
执行init命令进行配置：
karma init
图10（所有默认配置问题）：
说明：
1. 测试框架：我们当然选jasmine
2. 是否添加Require.js插件
3. 选择浏览器： 我们选Chrome
4. 测试文件路径设置，文件可以使用通配符匹配，比如*.js匹配指定目录下所有的js文件（实际操作中发现该路径是karma.conf.js文件的相对路径，详见下面我给出的实际测试配置及说明）
5. 在测试文件路径下，需要排除的文件
6. 是否允许Karma监测文件，yes表示当测试路径下的文件变化时，Karma会自动测试
我在虚拟机上测试的例子：
图11（TestFiles和NodeJS处于E盘根目录下，karma.conf.js处于文件夹NodeJS的根目录下）：
以下是karma.conf.js的完整内容：
// Karma configuration
// Generated on Fri May :: GMT+ (中国标准时间)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '../TestFiles',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: ,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};说明：
若所有测试文件均处于同一个目录下，我们可以设置basePath（也是相对于karma.conf.js文件的相对路径），然后指定files，此时files则为basePath目录下的文件相对路径；
当然你也可以不设置basePath，直接使用相对于karma.conf.js文件的文件相对路径，如本例中，我们若保持basePath默认为空，则files配置应为：
files: [
'../TestFiles/jasmineTest.js',
'../TestFiles/test.js'
]
test.js内容：
function TT() {
return "abc";
}
jasmineTest.js内容：
describe("A suite of basic functions", function () {
it("test", function () {
expect("abc").toEqual(TT());
});
}); 配置文件详解与测试执行
启动Karma：
karma start karma.conf.js
由于这次加上了配置文件karma.conf.js，因此Karma会按照配置文件中指定的参数执行操作了，由于我们配置的是在Chrome中测试，因此Karma会自动启动Chrome实例，并运行测试用例：
图12（左侧的Chrome是Karma自动启动的，右侧的Node.js command prompt窗口中，最后一行显示了执行结果）：
图13（如果我们点击图12中的debug按钮，进入debug.html并按F12打开开发者工具，选择Console窗口，我们将能看到jasmine的执行日志）：
若此时，我们将jasmineTest.js中对于调用TT方法的期望值改为"abcd"（实际为"abc"）：
describe("A suite of basic functions", function () {
it("test", function () {
expect("abcd").toEqual(TT());
});
}); 由于我们在karma.conf.js中设置了autoWatch为true：
autoWatch: true
Karma将自动执行测试用例，由于本例测试用例未通过，因此在屏幕上打印出了错误信息，Chrome的Console窗口中的日志信息需要刷新debug.html后显示。
图14（Karma自动检测到文件变化并自动重新执行了测试用例）：
代码覆盖率报告生成
代码覆盖率：
如果你还想查看测试的代码覆盖率，我们可以安装karma-coverage插件，安装命令为：
代码如下:
npm install karma-coverage图15（安装karma-coverage的过程）：
修改karma.conf.js，增加覆盖率的配置：
图16（主要是变动了以下三个配置节点，其他的配置内容不变）：
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'../TestFiles/test.js':'coverage'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress','coverage'],
coverageReporter:{
type:'html',
dir:'../TestFiles/coverage/'
}, 变动如下：
在reporters中增加coverage preprocessors中指定js文件
添加coverageReporter节点，将覆盖率报告类型type设置为html，输入目录dir指定到你希望的目录中
此时完整的karma.conf.js如下：
// Karma configuration
// Generated on Fri May 29 2015 19:30:26 GMT+0800 (中国标准时间)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'../TestFiles/jasmineTest.js',
'../TestFiles/test.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'../TestFiles/test.js':'coverage'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress','coverage'],
coverageReporter:{
type:'html',
dir:'../TestFiles/coverage/'
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};执行命令：
代码如下:
karma start karma.conf.js图17（执行命令后，在配置文件coverageReporter节点中指定的dir中，我们将找到生成的覆盖率报告，karma-coverage还生成了一层子文件夹，对应于执行测试的浏览器+版本号+操作系统版本）：
