React单元测试：Jest + Enzyme（一）

前言

前端的单元测试在很多人看来都是一个可有可无的东西，理由一般有下面几条（以下内容统一称单元测试为单测）：

• 写单测比较费时，有这个时间不如多做几个需求
• 测试在验收的时候对页面的功能都会操作一遍，写单测相当于做无用功
• 后端提供给前端的接口需要保证质量，因此需要做单测，但前端很少需要提供接口给其他人

其实，我大体上是同意以上观点的。在大部分的情况下，如果公司的业务不复杂，是完全没必要做单测的。但如果涉及到以下几个方面，你就要考虑是否有必要引入单测了：

• 业务比较复杂，前端参与的人员超过3人
• 公司非常注重代码质量，想尽一切办法杜绝线上出bug
• 你是跨项目组件的提供方
• 你在做一个开源项目

React项目如何做单测

目前比较流行的React单测组合是Jest+Enzyme，下面我们先对它们做一个简单的了解。

Jest是Facebook开发的一个测试框架，它集成了测试执行器、断言库、spy、mock、snapshot和测试覆盖率报告等功能。React项目本身也是使用Jest进行单测的，因此它们俩的契合度相当高。

Enzyme是由airbnb开发的React单测工具。它扩展了React的TestUtils并通过支持类似jQuery的find语法可以很方便的对render出来的结果做各种断言。

这将会是一个系列教程，作为教程的第一篇，我们先定一个小目标：将Jest应用到已有的React项目中并跑一个简单的单测（假设打包工具为webpack）。

Jest的安装与配置

npm install --save-dev jest jest-cli babel-jest

其中，babel-jest的作用是让单测代码支持ES6。安装完后，在项目的根目录新建__jest__文件夹和__tests__文件夹，此时__mocks__文件夹我们暂时不管，如下图所示：

mudules文件夹将存放各个模块的单测代码，而utils文件夹里面是对一些公用的函数写的测试代码。

由于我的项目使用webpack作为打包工具，于是我在package.json里面做了以下的配置：

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__jest__/__mocks__/fileMock.js",
      "\\.(css|scss)$": "identity-obj-proxy",
      "^cpn(.*)$": "<rootDir>/src/components$1"
    }
  }

moduleFileExtensions对应webpack中的extensions；moduleDirectories对应webpack中的modulesDirectories；moduleNameMapper对应webpack中的alias。这里的<rootDir>对应我们项目的根目录。

对于多媒体文件(jpg/png等)，我们可以简单的手动mock一下：

// <rootDir>/__jest__/__mocks__/fileMock.js
module.exports = 'test-file-stub';

对于css和scss文件，我们使用identity-obj-proxy来mock，它会在引用到class的地方直接返回class的类名：

npm install --save-dev identity-obj-proxy

剩下的只是对一些简写路径的配置。

更详细的说明可以看这里。

至此，Jest已经安装配置完毕。为了验证安装配置是否成功，我们写一个简单的测试代码：

import {add} from 'common/utils/math.js'

test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

同时，在package.json文件中，加入以下script：

  "scripts": {
    "test": "jest __jest__/__tests__"
  }

此时在命令行输入npm run test，出现以下结果，说明Jes安装成功并通过第一个测试：

总结

按照上面说的步骤，如果一切顺利，你的第一个单测用例应该成功跑起来了！我们来回顾下我们都做了些什么：

• 安装Jest并让其支持ES6语法
• 新建对应的单测文件夹并新建一个单测文件
• 针对项目的webpack做相应的Jest配置
• 配置运行测试脚本

万事开头难，你已经踏出万里长征的第一步了！在下一篇文章中，我将会详细介绍如何使用Jest来mock方法和数据，敬请期待。