8 个 React 测试库和实用程序，用于您的下一个开发项目

已发表: 2021-06-22

测试不会为您的应用程序添加任何额外的功能，但它会让您更有信心将应用程序交付到生产环境中。

我想你已经熟悉测试了，你来这里是为了了解你的 React 应用程序的测试库。 如果是这种情况，那么您来对地方了。 在我们研究不同类型的库之前，让我们快速了解测试如何影响您的应用程序质量和开发时间。

测试效果

你们中的一些人可能会觉得为应用程序编写测试是一个耗时的过程。 让我们暂时跳过这个。 不，为您的应用程序编写测试并不是一件浪费时间的事情。

假设您开发了一个没有任何测试的应用程序。 它具有 100 多种功能。 经过相当长的一段时间后，比如 3 个月。 您的客户希望您在之前开发的 100 个功能中添加 5 个新功能并调整 2 个功能。

您对此没有任何问题，并完成了所有这些并将您的代码发送到生产环境（没有像往常一样进行测试）。 几天后，您的客户再次来找您，说旧功能正在破坏。 你不明白为什么？ 同样，您花费了大量时间来解决问题。 解决完问题后，你开始失去信心。

如何获得这种信心？

伤心

并节省您花在解决问题上的额外时间。 一件事会做所有的事情，即测试。

假设您已经为您的应用程序编写了测试。 当您开发新功能或调整旧功能时，您将再次运行测试。 在这种情况下，您将在了解产品本身之前了解这些问题。 它可以节省大量时间，并使您对应用程序的质量充满信心。

现在，是时候为您的下一个 React 项目研究不同的测试库了。

测试库

测试库是一组帮助您测试 UI 组件的包。 我们的重点是 React 测试库。

react 测试库是一个轻量级的库，包含一整套用于测试 React DOM 的实用程序。 它允许我们在不提供库的实现细节的情况下测试反应组件。 它通过简化测试来帮助我们获得更多的信心。

大多数时候，它与Jest测试库一起工作。 它提供了简单的测试方法和实用程序，并指导我们遵循测试的最佳实践。

反应测试库的一些功能是：

  • 它不关心组件内部状态的测试。
  • 测试组件的渲染结果。
  • 测试 DOM 节点而不是类的实例。
  • 它提供了一种自定义方式来访问库中的 DOM 元素。
  • 确保 UI 正常工作。
  • 它有大量的社区支持。

笑话

Jest 是一个测试框架，用于测试 JavaScript 和 TypeScript 代码。 它与前端库很好地集成在一起。 它由 Facebook 开发和维护。 React 团队推荐使用它来测试 React 应用程序。

它的下载量比周围所有其他测试库最多。 Jest 与 react 测试库一起，对于 React 测试将更加强大。 大多数开发人员都在使用这种组合进行测试。

Jest 的一些特点是：

  • 测试彼此隔离。
  • 它提供代码覆盖率。
  • 它很快。
  • 它提供了一种模拟函数的方法。
  • 它为测试提供了不同类型的异常。

酶

该酶是用于测试 React 组件的测试实用程序。 它允许我们遍历并轻松操作 React 组件渲染的输出。 它是由 Airbnb 创建的。

它必须与 jest、mocha、jasmine 等其他测试运行程序一起使用，以测试 React 组件。 它提供了额外且简单的方法来渲染和测试 React 组件。 它只适用于 React 库。

摩卡

Mocha 是一个让测试变得简单的测试框架。 它在 NodeJS 上运行。 它的测试运行器与其他测试库一起用于 React 测试。

摩卡的一些特点是：

  • 提供测试覆盖率报告。
  • 使用配置文件完全可配置。
  • 异步测试超时支持。
  • 基于测试的超时。
  • 它甚至为您突出显示缓慢的测试。

Mocha 在其主页上还有许多其他功能等着您。

业力

Karma 是您的应用程序的测试环境。 它允许我们在真实的浏览器和设备（手机、平板电脑和台式机）上运行测试。 它旨在为开发人员提供不同的测试环境。

Youtube 视频

业力的一些特点是：

  • 在真实设备上测试您的代码。
  • 它允许我们在像 PhantomJS 这样的无头环境中测试我们的代码。
  • 您可以将 Karma 与Jenkins 、 Travis和Semaphore等 CI/CD 工具集成。
  • 您可以轻松地将其与其他测试框架（如Mocha 、 Jasmine等）集成。
  • 使用 IDE 使调试变得容易。

茉莉花

Jasmine 是 JavaScript 的行为驱动开发 (BDD) 测试框架。 它不需要 DOM 来测试代码。 Jasmine 是为测试 NodeJS 代码而设计的。 我们可以使用 Jasmine 和其他测试库来测试 React。

茉莉花的一些特点是：

  • 它具有用于编写测试的简洁语法。
  • 我们可以为前端和后端编写测试。
  • 茉莉花的核心没有任何依赖关系，这使得它很快。

柴

Chai 是一个断言库。 它可以与任何其他 JavaScript 测试库配对。 Chai 提供了诸如should 、 assert和except断言之类的功能。

柏

Cypress 是 JavaScript 端到端测试框架。 它允许我们在浏览器中设置、编写、运行和调试测试。 它有一个仪表板，可为您提供有关您编写的每个测试状态的详细报告。

赛普拉斯在实际的浏览器环境中运行测试，您也可以访问开发工具。 它用于测试应用程序中功能的端到端流程。

赛普拉斯的一些特点是：

  • 您可以看到每个步骤的快照。 它在运行测试时拍摄每个步骤的快照。
  • 使用 DevTools 使调试变得容易。
  • 当您对测试进行类似于 React 实时功能的更改时，赛普拉斯会自动重新运行测试。
  • 测试将自动等待输出而不使用 await 语句。

结论

编写测试对您和应用程序都有好处。 它使事情在困难时期变得容易。 不要在里面找借口。 文章中测试库的顺序并不重要。 这只是为了计数。 没有图书馆比其他图书馆低。 每个图书馆都有自己的优点和缺点。

我们主要可以使用React 测试库和Jest来测试 React 应用程序的完整功能。 大多数 React 社区成员都推荐它。 使用这两个不是强制性的。 如果您是初学者，那么您可以尝试一下。 如果您正在为您的 React 应用程序寻找更具体的东西，那么请浏览每个库。

快乐测试