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方法和数据，敬请期待。