前言
前端的单元测试在很多人看来都是一个可有可无的东西，理由一般有下面几条（以下内容统一称单元测试为单测）：
- 写单测比较费时，有这个时间不如多做几个需求
- 测试在验收的时候对页面的功能都会操作一遍，写单测相当于做无用功
- 后端提供给前端的接口需要保证质量，因此需要做单测，但前端很少需要提供接口给其他人
其实，我大体上是同意以上观点的。在大部分的情况下，如果公司的业务不复杂，是完全没必要做单测的。但如果涉及到以下几个方面，你就要考虑是否有必要引入单测了：
- 业务比较复杂，前端参与的人员超过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的安装与配置
代码语言：javascript复制npm install --save-dev jest jest-cli babel-jest其中，babel-jest的作用是让单测代码支持ES6。安装完后，在项目的根目录新建__jest__文件夹和__tests__文件夹，此时__mocks__文件夹我们暂时不管，如下图所示：
mudules文件夹将存放各个模块的单测代码，而utils文件夹里面是对一些公用的函数写的测试代码。
由于我的项目使用webpack作为打包工具，于是我在package.json里面做了以下的配置：
代码语言：javascript复制"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一下：
代码语言：javascript复制// <rootDir>/__jest__/__mocks__/fileMock.js
module.exports = 'test-file-stub';对于css和scss文件，我们使用identity-obj-proxy来mock，它会在引用到class的地方直接返回class的类名：
代码语言：javascript复制npm install --save-dev identity-obj-proxy剩下的只是对一些简写路径的配置。
更详细的说明可以看这里。
至此，Jest已经安装配置完毕。为了验证安装配置是否成功，我们写一个简单的测试代码：
代码语言：javascript复制import {add} from 'common/utils/math.js'
test('adds 1 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});同时，在package.json文件中，加入以下script：
代码语言：javascript复制 "scripts": {
"test": "jest __jest__/__tests__"
}此时在命令行输入npm run test，出现以下结果，说明Jes安装成功并通过第一个测试：
总结
按照上面说的步骤，如果一切顺利，你的第一个单测用例应该成功跑起来了！我们来回顾下我们都做了些什么：
- 安装Jest并让其支持ES6语法
- 新建对应的单测文件夹并新建一个单测文件
- 针对项目的webpack做相应的Jest配置
- 配置运行测试脚本
万事开头难，你已经踏出万里长征的第一步了！在下一篇文章中，我将会详细介绍如何使用Jest来mock方法和数据，敬请期待。
