Jest：给你的 React 项目加上单元测试

,大家好，我是前端西瓜哥。,Jest 是一款轻量的 JavaScript 测试框架，它的卖点是简单好用，由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。,单元测试（Unit Testing），指的是对程序中的模块（最小单位）进行检查和验证。比如一个函数、一个类、一个组件，它们都是模块。,使用单元测试的优点：,Jest 需要 确认哪些是测试文件，默认判断测试文件的逻辑是：,可以通过设置  Jest 配置文件的 testMatch 或 testRegex 选项进行修改，或者 package.json 下的 "jest" 属性。,我们先写一个简单的函数，作为被测试的模块。,然后我们用 Jest 来做测试。,然后执行 jest 命令，得到测试结果。,,test 方法创建了一个测试的作用域，该方法有三个参数：,test 方法有一个别名叫做 it，二者的功能是一致的，只是语义不同。通常用 test，但在某些情况下更适合用 it。这种情况就是 it 可以和描述语句拼成一句话的时候，比如：,it 方法和后面的 should be true 拼成了一句主语为 it 的句子，语义更好。,我们通常使用 expect 来测试一个模块的逻辑是否符合预期。expect 会将模块返回的结果封装成一个对象，然后提供非常丰富的方法做测试。,比如 toBe 就可以做 Object.is 的对比测试。,expect 的实现思路大致为：,利用了闭包。,还有一些其他的 toXX API，我们称为 matcher。比如：,更多 API 可以看文档：,​​https://jestjs.io/docs/expect。​​,你可以用 describe 方法将多个相关的 test 组合起来，这样能让你的测试用例更好地被组织，测试报告输出也更有条理。,describe 里面可以嵌套 describe，即组里面还可以有组。,如果使用异步测试，需要将 Promise 作为返回值。,或使用 async / await。,也支持回调函数风格的测试，你需要调用函数传入的 done 函数来表明测试完成：,beforeAll，在当前文件的正式开始测试前执行一次，适合做一些每次 test 前都要做的初始化操作，比如数据库的清空以及初始化。,beforeEach，在当前文件的每个 test 执行前都调用一次。,afterAll，在当前文件所有测试结束后执行一次，适合做一些收尾工作，比如将数据库清空。,afterEach，在当前文件的每个 test 执行完后都调用一次。,本文不讲解安装和配置，我们先用 CreateReactApp 来搭建项目，并使用 TypeScript 模板。,执行单元测试的命令为：,CreateReactApp 内置了 Jest，但 Jest 本身并不支持 React 组件的测试 API，需要使用另外一个内置的 React Testing Library 库来测试  React 组件。,React Testing Library 是 以用户为角度 的测试库，能够模拟浏览器的 DOM，将 React 组件挂载上去后，我们使用其提供的一些模拟用户操作的 API 进行测试。,React Testing Library 的哲学是：,CreateReactApp 预置模板的 App.test.tsx 使用了 React Testing Library。,另一种比较流行的测试 React 组件的框架是  Enzyme，它的 API 简洁优雅，能够用类似 JQuery 的语法，对开发非常友好。Enzyme 由 Airbnd 出品，但目前已经不怎么维护了。,为此，你需要装一些包：,如果你使用了 TS，你还得补上类型声明。,示例：,我们先实现一个简单的 Button 组件。,然后我们创建一个 button.test.tsx 测试文件。我们使用 React Testing Library。,我们写个测试。,render 方法会将 React 组件挂载到虚拟的文档树上。screen.debug() 用于调试，能让我们看到虚拟树的完整结构。,测试 Button 的文本内容是否正常显示：,测试 Button 的 onClick 能否正常触发：,测试 Button 的 className 是否成功添加：,源码：,​​https://github.com/F-star/xigua-ui/blob/main/src/components/button/​​tests/button.test.tsx。,执行 yarn test ：,,为了让代码更健壮，做模块的单元测试还是有必要的，Jest 作为流行的测试库值得一试。