04-用Jest、Enzyme和React-test-render测试React组件

9.2　用Jest、Enzyme和React-test-render测试React组件

尽管人们开发了专门的工具来辅助测试，但测试软件也只是软件，它也是由与普通程序相同的基本类型和基础元素组成的。虽然我们可以尝试创建必要的工具来运行所有测试，但开源社区已经为一大堆强力工具做了大量的工作，因此我们会使用这些工具。

我们需要一些类型的库来测试自己的React应用程序。

• 测试运行器——开发者运行测试所需要的东西。虽然大部分测试可以作为常规JavaScript文件执行，但开发人员也想利用测试运行器的一些附加特性，例如，一次运行多个测试以及用更漂亮的方式报告错误或成功信息。对于本书，我们会将Jest用于测试的大多数方面（Jest是由Facebook工程师开发的测试库）。我们也可以考虑一些内置功能较少的流行替代方案，包括Mocha和Jasmine。Jest通常用于测试React应用程序，但也为其他框架创建了适配器。示例源代码包含一个调用React适配器的设置文件（test/setup.js）。
• 测试替身——在编写测试时，开发人员希望尽可能避免将测试与其他基础设施的脆弱部分或不可预测部分绑在一起；开发人员依赖的其他工具应该被mock——使用一个行为可以预期的“伪”函数来替代。这种方式的测试可以促进对被测代码和模块化的关注，因为测试不会依赖给定时间的确切代码结构。我们会使用Jest进行mock和测试替身，但其他库也可以做这些，如Sinon。
• 断言库——开发者可以使用JavaScript对代码进行断言（例如，X是否等于Y？），但我们仍然需要考虑大量的边界情况。开发者们创建了很多解决方案以使编写有关代码的断言更为容易。Jest自带内建的断言方法，所以我们会依赖这些方法。
• 环境助手——对于需要在浏览器环境中运行的代码，在其上运行测试对开发者的要求略有不同。浏览器环境是独特的，包含了诸如DOM、用户事件，以及Web应用程序的其他常规部分。这些测试工具有助于确保我们能够成功模拟浏览器环境。开发者将使用Enzyme和React test render来帮助测试React组件。Enzyme可使测试React组件更容易。它提供了一个健壮的API，允许开发者查询不同类型的组件和HTML元素、读写组件属性、检查和设置组件状态等。React test render做的事情类似，它还可以生成组件快照。我们并不会深入Enzyme或React test render API的方方面面，你可以在网上浏览更多信息。
• 框架特定的库——有一些专门为React（或者其他框架）开发的库，用以辅助库或框架的测试并处理框架需要的任何设置，它们使得编写特定框架的测试变得更容易。React中几乎所有东西都只是“JavaScript”，所以在这些工具中也看不到什么“魔法”。
• 覆盖率工具——由于代码的确定性，人们找到了方法确定测试“覆盖”了哪些代码。这非常棒，因为我们能够得到一个用来指导确定代码测试好坏的指标。它不能替代逻辑和基本分析（100%的代码覆盖率也不意味着没有bug），但是它可以指导我们如何测试代码。我们将使用Jest的内置覆盖率工具，它使用了名为Istanbul的流行工具。

接下来，我们将开始安装用于测试的工具。如果从GitHub克隆了本书的仓库，这些工具应该已经被安装好了。在切换章时需要再次运行 npm install ，以确保已经拥有该章所需要的全部库。