在我以前的
javascript fullstack
项目中,单元测试一直是分裂的,react
前端用jest,node.js
后端用mocha。由于在前端使用jest
时,所体会到的简洁,让我一直有冲动想用jest
来一统江湖。在最近的一个项目中,我做到了,对比mocha
,我有下面一些体会。
配置简洁
jest
几乎是可以零配置的。它会自动识别一些常用的测试文件pattern,比如__test__
、*.spec.js
、 *.test.js
等。我的nodejs项目的配置文件只有下面几行,下面是指package.json
文件:
"scripts": {
"test": "jest"
},
"jest": {
"testEnvironment": "node"
}
testEnvironment
这个配置是对于nodejs项目是必须的,如果不配置,在async的单元测试中如果抛出异常,则系统不会立刻停止,而只会超时,并且不会定位错误位置。
配置完后,就可以用yarn run test
来运行测试了。
测试代码简洁
- 在
mocha
中我们必须要describe
,比如:
descibe('suiteA', () => {
before(() => {})
it('testA', () => {
})
it('testA', () => {
})
)
可是文件已经把一个个suite
分开,为什么还要describe
,所以jest
可以省略describe
,如下:
beforeAll(() => {})
it('testA', () => {
})
it('testA', () => {
})
-
jest
几乎内置了所有单元测试需要的库,比如mock
和expect
,无需像mocha
一样需要引入一堆。
易于和babel集成
为了能使用更多的纯nodejs
暂时不支持的语法(比如:import
),越来越多的nodejs
项目使用babel
来编译项目。在jest
中支持babel
只需要安装jest-babel
,即运行:yarn add jest-babel
。
内置丰富的expect
而jest
内置expect
,甚至比chai
[1]更丰富,比如:
- 支持snapshot,这个是
jest
的killing feature
比如我们要写一个JSON转XML函数jsonToXml: string => string
,而且输入和输出都相对长,我们可能会这样写测试用例:
it('make sure transform works', () => {
const input = `{
"name": "ron",
"job": "programmer",
"tags": ["javascript", "functional programming"],
}`
const expectedOutput = `
<user><name>ron</><job>programmer<job/><tags><tag>javascript</tag><tag>functional programmer</tags></tags></user>
`
expect(jsonToXml(input)).toEqual(expectedOutput)
})
请问此时你的眼睛花了没?更麻烦的是,当要修改函数时,所有的校对又要重新来一遍。
jest
针对这种场景提出了更好的解决方案snapshot
,上面的用例可以这样写:
it('make sure transform works', () => {
const input = `{
"name": "ron",
"job": "programmer",
"tags": ["javascript", "functional programming"],
}`
expect(jsonToXml(input)).toMatchSnapshot()
})
其原理就是,jest
会把需要expect
的内容(即expected result)自动保存到一个自动生成的文件中,在以后每次运行测试用例时都会比较以前保存的内容。如果修改了函数,则测试用例会fail,但若确定这是by design
,则可以运行jest -u
来更新自动保存的文件。
- 更好地对promise的支持,特别是对
reject
的支持
it('fetchData() rejects to be error', () => {
// make sure to add a return statement
return expect(Promise.reject('octopus')).rejects.toBeDefined();
});
test('fetchData() rejects to be error', async () => {
const drinkOctopus = new Promise(() => {
throw new DisgustingFlavorError('yuck, octopus flavor');
});
await expect(drinkOctopus).rejects.toMatch('octopus');
});
- 其它还有比如:
expect.objectContaining
、expect.arrayContaining
等
webstorm已经支持jest
之前,我没有转jest
的一个很重要的原因是webstorm
不支持,不过在2017.1的版本中已经支持jest
了。
jest还在频繁地更新中
mocha
似乎已经处于维护阶段,而jest
还在高频地开发中,一定会迭代出更多的新功能。
总结
在我迁移的这2个月中,jest
让我可以更简洁地测试,并没有感觉到用什么mocha
可以做,而jest
不能做或者做起来比较困难的。我想是时候和陪伴了我多年的mocha
说bye bye
了。
一个专门的
assert
库,mocha
不内置expect
,因此一般使用mocha
时会使用chai
↩