react 单元测试--关于测试框架

单元测试需要注意的几点：

• 即使单元测试覆盖率达到100%,也不表示程序没有bug，单元测试知识手段之一，不要对单元测试覆盖率有带过偏执的要求
• 程序架构的可测试性非常重要，开发者不喜欢单元测试代码一个很重要的原因就是单元测试太难写。。。要克服这个问题就是要架构能把程序拆分称足够小到方便测试的部分。只要每个小部分被验证能够正确的各司其职，组合起来就能够完成整体功能，开发者此时只要专注各个小的部分就行，这就是更高的“可测试性”。另外纯函数的可测试性更好一些：测试一个更加输入返回输出的纯函数，要比测试包含很多状态的对象容易更多。因为纯函数的结构根据输入完全可以预测。

单元测试框架

Jest是Facebook开发的一个测试框架
特点:

• 现有项目，只需创建一个名为 test 的目录，然后在该目录中创建以 .spec.js 或 .test.js 结尾的文件即可
• 内置强大的断言与 mock 功能
• 内置测试覆盖率统计功能
• 内置 Snapshot 机制
• 内置测试执行器、断言库、spy等功能

Enzyme由 Airbnb 出品
特点：

• Enzyme 的定位是一个工具库
• Enzyme 的出现是为了让我们更方便的遍历、操作 React 组件输出的内容

Mocha与 Jest 不同的是，它自身只提供作为一个测试框架最核心的功能。而其它增强功能，如丰富的断言语法、mock、测试覆盖率统计等功能则是通过各种 Add-ons 提供的。与各种 Add-ons 搭配在一起形成了各种各样的“套餐”。而最常见的组合应该就是如下这样的搭配：

• Chai 负责断言
• Sinon.js 负责 mock
• Istanbul 负责统计测试覆盖率

react-test-renderer
在说 react-test-renderer 之前，让我们先聊聊什么是 renderer。React 最早是被用来开发网页的，所以早期的 React 库中还包含了大量和 DOM 相关的逻辑。后来 React 的设计思想慢慢被迁移到其它场景，最被人们熟知的莫过于 React Native 了。为了灵活性和扩展性，React 的代码被分拆为 React 核心代码与各种 renderer。React 自带了 3 个 renderer，前两个是大家常见的：

• react-dom 负责将组建渲染到浏览器页面中。
• react-native-renderer 负责将组件渲染成原生场景中的各种 “View”。

而今天提到的 react-test-renderer 则负责将组件输出成 JSON 对象以方便我们遍历、断言或是进行 snapshot 测试。

备注：这里有一份各种各样的 renderer 列表。

react-dom/test-utils

首先从名称可以看出这个库是包含在 react-dom 中的。所以它只是 react-dom 的辅助测试工具。在 React 文档站中它的介绍页上用的标题却只有 “Test Utilities” 两个单词，很容易让人产生误解。该库中的方法主要作用是帮我们遍历 ReactDOM 生成的 DOM 树，方便我们编写断言。注意：使用该库时必须提供一个 DOM 环境。当然这个 DOM 环境可以是 jsdom 这种模拟环境。(友情提示：Jest 默认的执行环境就是 jsdom)

react-test-renderer 和 react-dom/test-utils 之间的选择：

• 如果需要测试事件（如 click, change, blur 等），那么使用 react-dom/test-utils
• 其它时候使用更简单、灵活的 react-test-renderer

关于选择

测试框架可以分为2大类：

• 通用的基础设施：test runner、断言、mock、测试覆盖率统计均包含在这个范畴里。这些功能与测试什么项目并没有太大关系。Jest、Mocha以及它的小伙伴们都属于这一类。
• React 测试辅助工具库：Enzyme 以及 react-test-renderer 和 react-dom/test-utils 兄弟俩属于这一类。事实上，Enzyme 底层也是调用了这兄弟俩。并在之上做了大量接口封装。
  这里：Enzyme 固然用起来 API 会更简单。但大量的封装对我们来说并不透明。而使用react-test-renderer 和 react-dom/test-utils 虽然在 API 上会略微繁琐，但是可以让我们更好的理解 React 的工作原理。