写作日期
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.0
karma-chai@0.1.0
karma-mocha@1.1.1
UNMET PEER DEPENDENCY mocha@
于是继续安装 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 configuration
module.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)的入门教程可以参考:测试框架 Mocha 实例教程