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

Posted 2021-03-16 融合xx

一般我们不管是做前端还是后端，为了提高代码的质量，会选择一种测试驱动开发（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查看文档，全都是些一看就懂的例子，不会有特别深奥的东西，全都靠你熟能生巧。