前言
前端的单元测试在很多人看来都是一个可有可无的东西，理由一般有下面几条（以下内容统一称单元测试为单测）：
其实，我大体上是同意以上观点的。在大部分的情况下，如果公司的业务不复杂，是完全没必要做单测的。但如果涉及到以下几个方面，你就要考虑是否有必要引入单测了：
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来mock方法和数据，敬请期待。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
