本文为实践的产物，总结从搭建到使用过程中遇到的问题，初学者可以参考。
- 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)$": "<rootDir>/__mocks__/fileMock.js",
".*\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"transform": {
"^.+\\.js$": "babel-jest"
}
},
}
- moduleFileExtensions：代表支持加载的文件名，与Webpack中的resolve.extensions类似
- moduleNameMapper：代表需要被Mock的资源名称。如果需要Mock静态资源（如less、scss等），需要配置Mock的路径<rootDir>/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 " } 即可生成。会在终端中显示如下报告：
而且还会在项目中生成 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/
总能找到你想要的~
