使用Jest在React中测试组件：基础

您将要创造的

对许多开发人员而言，测试代码是一种令人困惑的做法。 这是可以理解的，因为编写测试需要更多的精力，更多的时间和预见可能的用例的能力。 由于缺少资源和人力，初创公司和从事较小项目的开发人员通常倾向于完全忽略测试。

但是，我认为应该测试组件的原因有两个：

1. 它使您对代码更有信心。
2. 测试可以提高您的生产力。

React也没有什么不同。 当您的整个应用程序开始变成一堆难以维护的组件时，测试将提供稳定性和一致性。 从第一天开始编写测试将帮助您编写更好的代码，轻松发现错误并维护更好的开发工作流程。

在本文中，我将带您了解为React组件编写测试所需的一切。 我们还将介绍一些最佳实践和技巧。 让我们开始吧！

在React中测试组件

测试是验证我们的测试断言是正确的，并在应用程序的整个生命周期中保持不变的过程。 测试断言是一个布尔表达式，除非代码中存在错误，否则该布尔表达式将返回true。

例如，一个断言可以像这样简单：“当用户导航到/ login时 ，应该呈现一个ID为#login的模式。” 因此，如果事实证明您以某种方式弄乱了登录组件，则断言将返回false。 断言不仅限于呈现的内容，您还可以断言应用程序如何响应用户交互和其他操作。

前端开发人员使用许多自动测试策略来测试其代码。 我们将讨论仅限于React中流行的三种软件测试范例：单元测试，功能测试和集成测试。

单元测试

单元测试是在测试界中仍然很流行的测试资深人士之一。 顾名思义，您将测试各个代码段，以验证它们是否按预期独立运行。 由于React的组件架构，单元测试是很自然的选择。 它们也更快，因为您不必依赖浏览器。

单元测试可帮助您隔离地考虑每个组件，并将其视为功能。 您对特定组件的单元测试应回答以下问题：

1. 有道具吗？ 如果是，这对他们有什么影响？
2. 它呈现什么成分？
3. 应该有状态吗？ 它何时或如何更新状态？
4. 安装或卸载时，或者在用户交互时，应遵循什么程序？

功能测试

功能测试用于测试应用程序一部分的行为。 功能测试通常是从用户的角度编写的。 功能通常不限于单个组件。 它可以是完整的表单，也可以是整个页面。

例如，在构建注册表单时，它可能涉及表单元素，警报和错误（如果有）的组件。 提交表单后呈现的组件也是该功能的一部分。 这不需要浏览器渲染器，因为我们将在测试中使用内存中的虚拟DOM。

整合测试

集成测试是一种测试策略，其中所有单个组件都作为一组进行测试。 集成测试试图通过在实际的浏览器上运行测试来复制用户体验。 这比功能测试和单元测试要慢得多，因为每个测试套件都是在实时浏览器上执行的。

在React中，单元测试和功能测试比集成测试更受欢迎，因为它们易于编写和维护。 这就是我们将在本教程中介绍的内容。

了解您的工具

您需要某些工具和依赖项才能开始对React应用程序进行单元和功能测试。 我在下面列出了它们。

笑话测试框架

Jest是一个需要零配置的测试框架，因此易于设置。 它比Jasmine和Mocha之类的测试框架更受欢迎，因为它是由Facebook开发的。