使用 Jest 进行愉快的 JavaScript(TypeScript) 测试

一般我们不管是做前端还是后端,为了提高代码的质量,会选择一种测试驱动开发(TDD)的办法来写代码进行单元测试。Jest 是 Facebook 团队开发的一款测试框架,为的是提高开发者的“开发体验”。我们做单元测试的时候需要分解出一个个独立的模块,但是这样做要写很多的 mock 代码(模拟的辅助函数),非常地繁琐,这是行业的一个“痛点”。如果你和我一样很懒,而且认同“懒惰即是美德”、“不要重复你自己(DRY)”这些原则的话,那么 Jest 测试框架就是你最好的选择。如果你用过一些其他测试框架比如 Mocha 和 Jasmine 的话,看一下 Jest 文档就马上会用了。

Jest 特性

  • 性能非常好,快速反馈
  • 用法非常简单,3 分钟快速上手
  • 容易安装和运行,无需任何配置
  • 自带覆盖率统计工具
  • 可以在沙盒环境运行
  • 自动 watch 你的代码变动并运行测试
  • 自动 mock 函数
  • 其他测试框架都没有的快照(snapshot)测试
  • 非常简单地就能测试异步代码
  • Vue,Angular,React 框架等等都能用

安装

使用熟悉的 npm

npm install --save-dev jest

或者也可以试一下用 Yarn,总之二选一

yarn add --dev jest

然后在项目根目录的package.json配置里面加上这句

"scripts": {
    "test": "jest"
  }

快速上手的例子


引用一下 Jest 官网http://facebook.github.io/jest/docs/en/getting-started.html的例子。假设我们要写一个加法函数,TDD开发流程第1步,先写测试,注意名字要带有test

// sum.test.js
// 导入代码文件,test函数第1个参数是要显示的文字信息,第2个回调函数里面写测试
// expect期望 加法函数 toBe正确的结果
const sum = require(‘./sum‘)

test(‘1加2等于3‘, () => {
  expect(sum(1, 2)).toBe(3)
})

TDD 开发流程第 2 步,我们用npm test来运行测试,毫无疑问这个测试会失败,因为要测试的函数根本不存在。这是非常正确的做法,因为我们如果要成功,先要学会失败。
TDD 开发流程第 3 步,现在再来实现这个加法函数:

// sum.js
// 文件名很重要,你发现命名规律了吗?
// 和测试放在同一个目录,并且要导出
function sum(a, b) {
  return a + b
}
module.exports = sum

然后可以再次运行npm test来看测试结果:

PASS  ./sum.test.js
? 1加2等于3 (5ms)

TDD 开发流程第 4 步,不断强化你的测试,然后又强化你的代码,重复这 4 个步骤。所谓道高一尺,魔高一丈,测试和代码都会逐渐变得符合你的需求。

这篇只是 Jest 入门教程,只讲了一个非常简单的例子,人人都会写,想要了解更多,可以去 Jest 官网http://facebook.github.io/jest查看文档,全都是些一看就懂的例子,不会有特别深奥的东西,全都靠你熟能生巧。