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

版权声明: https://blog.csdn.net/qq_37925422/article/details/80322793

一般我们不管是做前端还是后端,为了提高代码的质量,会选择一种测试驱动开发(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.js12等于3 (5ms)

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

这篇只是Jest入门教程,只讲了一个非常简单的例子,人人都会写,想要了解更多,可以去Jest官网http://facebook.github.io/jest查看文档,全都是些一看就懂的例子,不会有特别深奥的东西,全都靠你熟能生巧。但是目前还没有完整的中文翻译,我正在努力帮忙译成中文,希望能帮到大家。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页