基于 Jest + Enzyme 的 React 单元测试

前言

如果你想学习 React 单元测试，那就从这篇文章开始吧。Star 项目，clone 到本地，根据教程走一遍，有任何问题欢迎 issue 讨论。

项目GitHub地址：react-test-demo

文章主要内容如下：
* Jest 和 Enzyme 的基本介绍
* 测试环境搭建
* 测试脚本编写
* UI 组件测试
* Reducer 测试
* 运行并调试
* 参考资料

Jest、Enzyme 介绍

Jest 是 Facebook 发布的一个开源的、基于 Jasmine 框架的 JavaScript 单元测试工具。提供了包括内置的测试环境 DOM API 支持、断言库、Mock 库等，还包含了 Spapshot Testing、 Instant Feedback 等特性。

Airbnb开源的 React 测试类库 Enzyme 提供了一套简洁强大的 API，并通过 jQuery 风格的方式进行DOM 处理，开发体验十分友好。不仅在开源社区有超高人气，同时也获得了React 官方的推荐。

测试环境搭建

在开发 React 应用的基础上（默认你用的是 Webpack + Babel 来打包构建应用），你需要安装 Jest Enzyme，以及对应的 babel-jest

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

下载 npm 依赖包之后，你需要在 package.json 中新增属性，配置 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"
    }
  },

并新增test scripts

"scripts": {
    "dev": "NODE_ENV=development webpack-dev-server