01-测试React组件

第9章　测试React组件

本章主要内容

• 测试前端应用程序
• 搭建React测试
• 测试React组件
• 搭建测试覆盖率

我们在上一章为应用程序添加了一些重要功能，它现在拥有路由和用户状态，而且已经被分解成更小的部分。我们甚至添加了一些基本身份验证以便用户可以使用GitHub账号登录。应用开始变得更加健壮，即便它可能不会让Facebook或Twitter的任何人感到担心。现在可以用React做更多的事情。但是，当我们专注于学习基础知识时，却忽略了开发过程的一个重要环节——测试。

我没有从一开始就涵盖测试是为了避免同时学习React和测试的基础知识而让大脑超负荷，但这并不意味着它是学习或Web开发中不重要的部分。我们在本章中会关注测试，因为它是开发高质量软件解决方案的基本部分，但不会演示每个组件的测试，而是仔细研究一个具有代表性的示例，以便读者理解起作用的重要原则，并能够编写自己的测试。

到本章结束，我们会了解一些测试Web应用程序的基本原则。我们还会搭建测试和测试运行器，使用Jest、Enzyme以及React测试渲染器，然后学习使用和理解测试覆盖率工具。我们将装备好开始测试应用程序，这将为我们学习React开发技能增加另一层信心。

如何获取本章代码

和每章一样，读者可以去GitHub仓库检出源代码。如果想从头开始编写本章代码，可以使用第7章和第8章的已有代码（如果跟着编写了示例）或直接检出指定章的分支（chapter-9）。

记住，每个分支对应该章末尾的代码（例如，chapter-9对应第9章末尾的代码）。读者可以在选定目录下执行以下终端命令之一来获取当前章的代码。

如果还没有代码库，请输入下面的命令来获取：

git clone [email protected]:react-in-action/letters-social.git

如果已经克隆过代码仓库：

git checkout chapter-9

如果你是从其他章来到这里的，则需要确保已经安装了所有正确的依赖：

npm install

软件开发中的测试是验证假设的过程。举个例子，假设你正在构建一个让用户书写和创建博客的应用程序（像Medium、Ghost或WordPress）。用户按月付费获得托管和工具来运行他们自己的博客。当创建此应用的前端程序时，（在其他一些事项中）有几个必须做的关键事项，包括正确显示那些帖子并允许用户编辑它们。

我们如何才能确定应用程序正在做它需要做的事情呢？我们可以自己试试看它是否正常工作。四处点点，编辑一些内容，并用能想到的尽可能多的方式使用应用程序。这个手动过程相当不错，它是防止bug和回归的第一道防线。我们应该始终注意检查自己正在做的工作，但却不能快速地测试这些东西，或者以一种完全一致的方式进行快速测试。

此外，随着应用程序的不断增长，需要手动测试的情境和功能也以惊人的速度增加。我曾见识过拥有成千上万测试用例的应用程序，但是很多应用程序的测试数量却很容易被忽视。在撰写本书时，React库本身就有4855个测试用例。想要测试React的人不可能手工验证所有这些测试所涉及的假设。

幸运的是，我们可以使用软件来测试软件，而不是手工测试所有东西。计算机至少在我们表现欠佳的两个领域出类拔萃：速度和一致性。我们可以用软件测试以手工方式无法完成测试的代码，即使有一大群人以各种可能的方式尝试。人们也许会认为，“我们的项目很小而且相当简单——不会出什么差错。”但即使编码技术再厉害，也无法避免bug。当改变一些东西时（有时甚至什么都没改变），应用程序就会崩溃并以无法预料的方式运行。

但无须对不可避免的bug感到绝望，我们可以接受它们发生并采取措施尽量减少其影响和频率。这正是测试的意义所在。你也许对什么是测试有一些大概的了解，但是作为开始，我们需要了解一些不同类型的测试。记住，测试的世界是非常庞大的，所以我不可能在这里介绍所有内容。我不会把测试作为一个领域进行深入介绍，也不会深入讲解一些类型的测试，包括集成测试、回归测试、测试自动化等。但在本章结束时，你应该对这些知识足够熟悉，而且可以开始用几种不同的方式测试React组件了。