为什么需要前端单元测试

前端单元测试

概念

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如 C 语言中单元指一个函数，Java 里单元指一个类，图形化的软件中可以指一个窗口或一个菜单等。总的来说，单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动，软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。

认为前端代码都运行在浏览器里，如何做单元测试？！对于 Javascript 来讲，当然是可以进行单元测试的，并且也通常是针对函数、模块、对象进行测试。前端单元测试狂阶也有不少，比如 QUnit、Sinon、Mocha 等等，单元测试的执行环境可以是我们日常使用的浏览器 ie、Chrome 等，也可以是无界面浏览器比如 PhantomJS、Headless Chrome。

在前端的世界里，至少需要三类工具来进行单元测试：

• 测试管理工具

测试管理工具是用来组织和运行整个测试的工具，它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来，并运行被测试代码进行测试。比如使用 Karma

• 测试框架

测是框架是单元测试的核心，它提供了单元测试所需的各种 API，你可以使用它们来对你的代码进行单元测试。我们使用Mocha

• 断言库

断言库提供了用于描述你的具体测试的 API，有了它们你的测试代码便能简单直接，也更为语义化，理想状态下你甚至可以让非开发人员来撰写单元测试。比如使用chai
可选工具包括：

• 测试浏览器

这个比较好理解，就是测试代码所执行的浏览器环境。比如使用 PhantomJS 或者Headless Chrome

• 测试覆盖率统计工具

我们使用和 Karma 配套的Karma-coverage

单元测试规范

目标

提升代码质量，
保证代码的整洁清晰
减少原子功能模块的副作用
兼容各种边界条件，降低出错率
自动化单元测试，提高开发和测试效率

测试框架

依据前端框架选型来选择配套的单元测试方案，如 React 项目使用 jest。
如移动端均使用 jest 以及 babel-jest 插件来完成。

测试case编写规范

【强制】核心业务、核心应用、核心模块的增量代码确保单元测试通过。
【强制】保持单元测试的独立性。为了保证单元测试稳定可靠且便于维护，单元测试用例之间决不能互相调用，也不能依赖执行的先后次序。
【推荐】单元测试必须是自动化执行的，界面交互类通过其他方式做UI自动化测试。
【强制】单元测试必须是无副作用的，相同输入得到相同输出。
【推荐】对不可测代码进行重构，而不是对测试用例做兼容修改，保证测试用例的规范化。

React项目如何做单测

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

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

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

总结

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

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

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

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