编写测试是软件开发的一个重要部分，以确保一个强大的应用程序。测试使我们能够自动验证我们的应用程序是在一定水平上工作的。一定水平取决于你的测试的质量、数量（覆盖率）和类型（单元测试、集成测试、快照测试、端到端测试（也叫E2E测试））。下面的教程系列应该指导你完成测试React应用程序的整个主题。主要是测试React组件，但也包括纯JavaScript逻辑。教程展示了不同的React应用程序的测试库，而你可以决定哪些解决方案对你有意义。它指导你完成React应用程序的整个测试设置以及如何为React组件编写测试。
注意：如果你是来自create-react-app 应用程序，你可以忽略大部分的设置部分。create-react-app应用程序自带Jest作为测试运行器和断言库。你可以添加其他各种测试库，如Enzyme和React测试库。否则，如果你不使用create-react-app，我建议使用这篇文章来设置一个最小的React与Webpack应用程序。
如前所述，该系列教程将向你展示如何在你的React应用程序中设置不同的测试库以及如何使用它们。我们将主要遵循测试金字塔的约束。它说你应该主要写单元测试，其次是几个集成测试，只有少数端到端测试（E2E测试）。然而，对于React应用程序，存在第二种理念，因为它使用组件，而不是很多功能。第二种测试理念说，你应该写 "主要是集成测试，而不是那么多单元测试"。我们将在后面的系列教程中再来讨论这个话题。
React组件测试
简而言之，什么是单元、集成和端到端测试单元测试应该能够孤立地测试一个部件（如组件），而集成测试应该确保该部件（组件）在其上下文中与其他部件（组件）一起工作。例如，集成测试可以验证所有必要的道具都从被测试的组件传递到一个特定的子组件。最后但同样重要的是，端到端测试是在浏览器环境下测试你的应用程序。例如，你可以通过在表单中填写电子邮件地址和密码来模拟整个注册过程，并将这些凭证提交给后端应用程序。
这个测试教程系列的另一个目标是向你展示几个常见的测试模式和测试的最佳实践，这些测试模式和实践并不复杂，可以应用于你的整个应用程序。它应该能帮助你以一种有效的方式编写你的React组件测试，而不必每次都决定如何编写测试本身。因此，你的大多数测试应该遵循一个共同的模式，你可以在你的组件中应用。当使用TDD时，这些测试模式变得更加有趣，因为你可以先写你的测试，然后在第二步写你的组件。毕竟，本指南应该向你展示一些React测试的最佳实践，而不是太过主观。希望它能帮助你了解React测试框架的情况，如何设置这些测试工具以及如何使用它们。
React测试库
有各种测试库供你的React组件使用。如果你是以Node.js背景进入React生态系统的，你可能熟悉Mocha、Chai和Sinon来测试JavaScript应用程序。而Mocha是你的测试运行器，Chai将是你的断言库。Sinon可以选择性地用来测试你的JavaScript逻辑，包括spies、stubs和mocks。事实上，这三个测试库也可以用来测试React应用程序。How to test React components with Mocha, Chai and Enzyme.正如你所看到的，另一个叫做Enzyme的库被添加到混合中来渲染你的React组件。但所有的东西都会在Mocha中运行，Chai被用作断言库。
然而，如果你真的想用成语方式测试React组件，你将无法绕过Jest。Jest是由Facebook发布的，用于测试React组件，并带来了Mocha、Chai、Sinon等的综合力量。它是一个测试运行器，断言库，并提供间谍、存根和模拟。Jest可以与Enzyme或React测试库结合，以更强大的方式测试你的React组件。下面的教程给你一个很好的测试React组件的介绍。
- Jest + React测试库
- Jest + Enzyme。
正如你所看到的，有各种方法来测试React组件：
- Mocha, Chai, Sinon + Enzyme: 如果你是来自Node.js环境。
- Jest + Enzyme/React测试库。如果你想用更习惯的方式来测试。
我更喜欢的方式Jest + React测试库
此外，你可能还想对你的React应用程序进行端到端测试。我发现Cypress是进行此类测试的最佳选择。如何用Cypress测试React组件的E2E。如果你想深入研究可视化回归测试，你可以使用React Storybook。可视化回归测试和React Storybook。
最后但并非最不重要的是，为了在自动化环境中最大限度地利用你的测试，你可能想使用持续集成（CI）在部署你的JavaScript应用程序之前运行你的测试。CI为你提供了额外的强大功能，每次都能知道你的构建或测试是否失败，还能报告你整个应用程序的测试覆盖率。
如果你经历了所有提到的教程，你应该对测试React组件有很好的掌握。我想说的是，用Mocha/Chai测试React组件是相当可有可无的，因为Jest是更好的选择。此外，可视化回归测试可能不适合每个人。我推荐的测试栈是Jest + Enzyme/React测试库，用于单元/集成测试，Cypress用于端到端测试。然后将测试覆盖率添加到组合中，并将你的应用程序连接到你最喜欢的CI，在云中运行你的测试。
