基于Jest+Enzyme的React单元测试

本文为实践的产物，总结从搭建到使用过程中遇到的问题，初学者可以参考。

• Jest 和 Enzyme 的基本介绍
• 测试环境搭建
• 测试脚本编写
• 运行并调试
• 匹配器使用
• 测试异步代码
• 遇到的问题
• 参考资料

Jest、Enzyme介绍
Jest是Facebook发布的一个开源的、基于Jasmine框架的JavaScript单元测试工具，支持断言、仿真、快照测试、测试覆盖率报告等。

Enzyme获得React 官方的推荐，Airbnb开源的React测试类库Enzyme提供了一套简介强大的API，并通过jQuery风格的方式进行DOM处理，开发体检十分友好。

强烈推荐阅读使用jest+enzyme进行react项目测试 - 介绍篇

测试环境搭建
在开发React应用的基础上，需要安装Jest、Enzyme以及对应的babel-jest。
使用 yarn 安装 Jest︰
yarn add --dev jest enzyme babel-jest

或 npm：
npm install --save-dev jest enzyme babel-jest

将下面的配置部分添加到package.json 里面：

{
  "scripts": {
    "test": "jest"
  } 
"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
      ".*\\.(css|less|scss)$": "/__mocks__/styleMock.js"
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  },
}

• moduleFileExtensions：代表支持加载的文件名，与Webpack中的resolve.extensions类似
• moduleNameMapper：代表需要被Mock的资源名称。如果需要Mock静态资源（如less、scss等），需要配置Mock的路径/mocks/xxMock.js
• transform：用于编译 ES6/ES7 语法，需配合 babel-jest使用
  这三个是常用的配置，更多 Jest 配置见官方文档：Jest Configuration

然后，创建xx.test.js的文件，写实际的测试逻辑
最后，运行yarn test

测试脚本编写
强烈推荐阅读使用jest+enzyme进行react项目测试 - 测试手法篇
测试用例写法总结

• 组件UI测试用snapshot
  snapshot可以测试到组件的渲染结果是否符合预期，预期就是指你上一次录入保存的结果，toMatchSnapshot方法会去帮你对比这次将要生成的结构与上次的区别
  需要注意的是一个足够健壮的测试应该覆盖到所有的渲染请况，也就是如果你的组件根据props传入的参数渲染结果可能不同，这样的情况必须写多个测试案例都覆盖到。

• DOM交互测试用Jest+Enzyme
  enzyme有3种渲染方式：render、mount、shallow
  render、mount、shallow的区别
  render采用的是第三方库Cheerio的渲染，渲染结果是普通的html结构，对于snapshot使用render比较合适。

  shallow和mount对组件的渲染结果不是html的dom树，而是react树，如果你chrome装了react devtool插件，他的渲染结果就是react devtool tab下查看的组件结构，而render函数的结果是element tab下查看的结果。

  这些只是渲染结果上的差别，更大的差别是shallow和mount的结果是个被封装的ReactWrapper，可以进行多种操作，譬如find()、parents()、children()等选择器进行元素查找；state()、props()进行数据查找，setState()、setprops()操作数据；simulate()模拟事件触发。

  shallow只渲染当前组件，只能能对当前组件做断言；mount会渲染当前组件以及所有子组件，对所有子组件也可以做上述操作。一般交互测试都会关心到子组件，我使用的都是mount。但是mount耗时更长，内存啥的也都占用的更多，如果没必要操作和断言子组件，可以使用shallow。

• 交互测试
  主要利用simulate()接口模拟事件，实际上simulate是通过触发事件绑定函数，来模拟事件的触发。触发事件后，去判断props上特定函数是否被调用，传参是否正确；组件状态是否发生预料之中的修改；某个dom节点是否存在是否符合期望。

• mock请求
  需要mock掉真正的http请求，模拟返回值。不用担心不准确，你只用保证请求时的参数符合期望就好，mock的返回值按预期编写就好，置于这些请求是否真的能返回这些结果，是接口测试改干的活。

运行并调试
在运行测试脚本过程，Jest 的错误提示信息友好，通过错误信息一般都能找到问题的所在。 同时 Jest 还提供了生成测试覆盖率报告的命令，只需要在package.json 里配置{ "scripts": { "test": "jest --coverage " } 即可生成。会在终端中显示如下报告：

image.png

而且还会在项目中生成 coverage 文件夹，非常方便。

匹配器使用
推荐阅读：
前端测试框架Jest系列教程 -- Matchers（匹配器）
Javascript单元测试工具-Jest 学习笔记(一）

测试异步代码
推荐阅读：
Javascript单元测试工具-Jest 学习笔记(一）
学习Jest——语法篇

遇到的问题
Image.onload不能被监听到
解决办法参考：https://zhuanlan.zhihu.com/p/37329102
我采用了自己 mock Image 构造函数方案

最后，在写测试用例过程中，不知道用什么匹配器，可以来Jest官网搜罗一圈https://jestjs.io/docs/zh-Hans/expect
不知道使用Enzyme什么API时，也来Enzyme搜罗一圈http://airbnb.io/enzyme/docs/api/
总能找到你想要的~

参考资料
https://zhuanlan.zhihu.com/p/26625269