单元测试之 React Native 项目实战

什么是单元测试

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。

单元测试的好处

提高代码质量（不用多说）

减少强耦合（能运行单元测试的代码，一定是低耦合的）

减少调试时间（不用跳转多个页面，就能验证任何地方的功能）

前端单元测试框架

Qunit: 该框架诞生之初是为了 的单元测试，后来独立出来不再依赖于 本身，但是其身上还是脱离不开 的影子。

Jasmine: 风格的测试框架，在业内较为流行,功能很全面，自带 功能。

Mocha: node 社区大神 tj 的作品，可以在 和 端使用，具有很强的灵活性，可以选择自己喜欢的断言库，选择测试结果的 。

Intern: 看官方介绍该测试框架功能极其全面，似乎囊括了业内跟测试相关的所有功能。

AVA 是的替代品。虽然 是单线程，但在 里由于其异步的特性使得 可以并行。 利用这个优点让你的测试可以并发执行，这对于 繁重的测试特别有用。

Jest 下面详细介绍。

为什么选择 Jest

适应性：Jest 是模块化、可扩展和可配置的。

沙箱环境：Jest 虚拟化了 JavaScript 的环境，能模拟浏览器，并且并行执行

快照测试：Jest 能够对 React 树进行快照或别的序列化数值快速编写测试，提供快速更新的用户体验。

支持异步代码测试：支持 Promise 和 async/await

自动生成静态分析结果：不仅显示测试用例执行结果，也显示语句、分支、函数等覆盖率。

已经集成了测试覆盖率检查、Mock 等功能，不需要安装额外的库

官方提供 snapshot testing 解决方案

Facebook 官方支持，持续维护、更新稳定

文档丰富（有中文文档），官方提供了和 Babel、Webpack 集成情况下以及异步调用的测试解决方案

如何配置 Jest

安装依赖，，是不是非常简单，就一句话。

最终在 package.json 里，配置成如下图所示：

Jest 体验

1.在 目录下创建一个 ，添加如下代码：

2.在 目录下创建一个 ，添加如下代码：

3.运行OK，就这么简单。

网络请求单元测试怎么写？

1.在 目录下创建一个 ，添加如下代码：

2.在 目录下创建一个 ，添加如下代码：

然后运行

单元测试怎么运行?

在 package.json 的 script 里配置如下代码：

在项目根目录命令行执行：

如果结合一些IDE，还能更直观的看到结果：

异步单元测试怎么写？

1.在 目录下创建一个 ，添加如下代码：

2.在 目录下创建一个 ，添加如下代码：

3运行

注：async、await 异步测试代码请参考 「网络请求单元测试怎么写」

测试覆盖率怎么显示？

统计测试覆盖率，方便我们全局的查看整个项目的测试覆盖情况，使用方法非常简单，只需添加 参数即可。

如：

React Component 怎么写？

下面是一个简单的「数据加载失败，请重试」的控件，代码如下：

LoadFailed.js

React Component 单元测试怎么写？

Redux Action 怎么写？

Redux Action 单元测试怎么写?

Redux Reducer 怎么写？

news.js

Redux Reducer 单元测试怎么写

Q & A

Jest 有中文文档吗？

答：有，请访问 https://facebook.github.io/jest/zh-Hans/

测试网络请求时报 之类的错误，怎么处理？

答：添加这行就可以了，。

如何在单元测试文件中禁用ESLint？

如何放把单元测试文件放在 外的其它路径？

答：如果你取名叫 , 那就在 package.json 根节点里添加如下代码：

只有 toBe、toEqual 可以用吗？

答：不是的，本文中还使用一些如：toBeCalled、toHaveProperty 等方法。 更多 API，请参考 http://facebook.github.io/jest/docs/api.html

文中提到的 IDE 是什么？

答： WebStorm

实际项目中 Jest 使用效果

在 Terminal 里执行 ，就会看到如下效果：

注：图中红色的部分是单元测试没有覆盖到的，我们正努力实现 100% 覆盖。

参考文档：

http://facebook.github.io/jest/docs/getting-started.html

http://zhenhua-lee.github.io/tech/test.html

http://www.10tiao.com/html/223/201701/2651232323/1.html

https://zhuanlan.zhihu.com/p/28162082

https://www.cnblogs.com/torri/p/7258262.html