写作日期
2016-09-02
前端开发很多是界面开发，但我们可以将相对独立的逻辑和功能从整体业务逻辑中独立出来，这样就可以对它们做单元测试。使用 Karma 可以比较方便地搭建出测试环境。
安装 Karma
使用 Karma Mocha Chai（启动器、测试框架、断言库）组合。
npm install karma karma-mocha karma-chai --save-dev复制代码
如果 npm 版本 >=3.0，会看到如下提示：
UNMET PEER DEPENDENCY chai@karma@1.2.0karma-chai@0.1.0karma-mocha@1.1.1UNMET PEER DEPENDENCY mocha@
这是因为 npm 已经不再自动安装 peerDependencies：
于是继续安装 mocha chai
npm install mocha chai --save-dev复制代码
初始化 Karma
karma init复制代码
然后要回答一系列问题。
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.> mochaDo you want to use Require.js ?
This will add Require.js plugin.Press tab to list possible options. Enter to move to the next question.> noDo you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.> ChromeWhat is the location of your source and test files ?
You can use glob patterns, eg. "js/.js" or "test/**/Spec.js".Enter empty string to move to the next question.> "test/*/.spec.js"01 09 2016 16:43:20.743:WARN [init]: There is no file matching this pattern.>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "*/.swp".Enter empty string to move to the next question.>Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.> yes
然后就可以看到 Karma 已经创建的配置文件 karma.conf.js。如果选择使用 PhantomJS，需要单独安装。
添加 ES6 支持
现在前端开发的源码一般使用了 ES6 甚至 ES7，将这个处理工作用 webpack 搞定。
npm install karma-webpack --save-dev复制代码
既然将 ES6 的处理交给 webpack，如果之前没有安装过 babel 环境，还需要安装 babel-core babel-preset-es2015 以及 babel-loader。
如果出现下面的 TypeError 错误，只要在 exclude 中加入 /node_modules/ 就好了。
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
配置文件 karma.conf.js 中，需要注意的还有 files preprocessors 以及 webpack 部分。
// Karma configurationmodule.exports = function(config) { config.set({ // ...... files: [ 'test/**/*.spec.js' ], preprocessors: { 'test/**/*.spec.js': ['webpack'] }, webpack: { resolve: { root: __dirname + "/src" }, module: { loaders: [{ test: /\.js$/, exclude: [/node_modules/, __dirname + "xxx/xxx/lib"], loader: "babel-loader", query: { compact: false, presets: ["es2015"], plugins: ["es6-promise"] } }] } }, // ...... })}复制代码 启动 Karma
编写测试用例，这里是一个使用断言库 Chai，并使用它的 expect 断言风格的例子。
import {getMoneyText} from "xxx/xxx.js";import {expect} from "chai";describe("生成价格文案", () => { it("价格文案：积分", () => { expect(getMoneyText({ payType: 1, price: 100, points: 100, })).to.be.equal("100积分"); }); it("价格文案：人民币", () => { expect(getMoneyText({ payType: 2, price: 100, points: 100, })).to.be.equal("￥100.00"); }); it("价格文案：人民币+积分", () => { expect(getMoneyText({ payType: 3, price: 100, points: 100, })).to.be.equal("￥100.00+100积分"); }); it("价格文案：人民币+积分（多份数量）", () => { expect(getMoneyText({ payType: 3, number: 5, price: 100, points: 100, })).to.be.equal("￥500.00+500积分"); });});复制代码 启动 Karma
karma start复制代码
关于 Mocha （Chai, expect）的入门教程可以参考：