使用 `react-testing-library` 和 `cypress` 有啥区别？

Posted 2023-02-15

【中文标题】使用 `react-testing-library` 和 `cypress` 有啥区别？

【英文标题】：What is the difference between using `react-testing-library` and `cypress`?使用 `react-testing-library` 和 `cypress` 有什么区别？

【发布时间】：2020-03-28 11:11:02

【问题描述】：

所以，react-testing-library 用于单元/集成测试，cypress 用于 e2e 测试。但是，两者似乎都在做同样的事情：

react-testing-library

便于模拟 以用户身份进行测试 从***组件开始（不是硬性要求，但如果不这样做，您最终会在子组件测试中得到一堆重复的测试用例） 即时反馈，快速

cypress

便于模拟 以用户身份进行测试 从***组件（页面）开始 反馈延迟、速度慢，但提供了额外的工具（视频证明、逐步测试等）

除了反馈周期之外，它们似乎几乎相同。有人可以澄清一下有什么区别吗？为什么要同时使用两者？

【问题讨论】：

将近一年之后，您对这个问题有更清楚的了解吗？除非您详细了解这两个库，否则这肯定会令人困惑

我已经广泛使用了这两个库，但我仍然没有任何新的见解。在我看来，事情总是如此。主要的区别似乎是反馈循环/工具，不管它是有价值的。选择你最喜欢的？在大多数情况下，我不明白为什么需要同时使用两者（也许使用赛普拉斯进行烟雾测试部署，同时使用 RTL 进行其他测试？）。我仍然在与 RTL 作斗争，因为我在 cmets 中提到的重复测试问题似乎一直在引起人们的注意，除非您将测试限制为“页面级”测试（即使这样也有灰色区域）。

【参考方案1】：

您已在第一行回答了您的问题。如果你想端到端测试你的 React 应用程序，连接到 API 并部署在某个地方，你会使用 Cypress。

react-testing-library 的目标是您的应用程序的较低级别，确保您的组件按预期工作。使用 Cypress，您的应用程序可能会部署在 CDN 后面的环境中，使用缓存，其数据可能来自 API。在 Cypress 中，您还可以编写端到端的旅程，这是一条通过您的应用程序的快乐路径，一旦您部署，它可能会给您额外的信心。

【讨论】：

是的，但是 react-testing-library 困扰我的部分是你可以使用它来测试单个组件，但是你需要在本质上复制这些测试你去测试更高/页面级别的组件。如果您只使用react-testing-library 来测试页面级组件以防止重复，而cypress 可以做所有这些以及更多（可用于模拟本地测试、部署到服务器测试等），为什么还要使用react-testing-library？它具有快速反馈的一个好处，但我没有看到其他任何好处。

我应该先说我不是开发人员，但我想快速反馈和完全本地运行、独立于其他连接/API 是它的主要卖点。与在 Cypress 中相比，您还可以在较低级别上编写更多测试，因为后者在时间和资源方面更加“昂贵”。

感谢您的回复！您可以在 cypress 中模拟外部 API 和其他内容，就像在 react-testing-library 中一样，所以我并没有真正看到那里的好处。我理解您关于在react-testing-library 中编写低级测试的观点，但是低级测试的问题在于，当有人去进行更高级别的测试时，它可能会导致重复。例如，如果我测试了组件A，然后将其放入组件B，我需要在B 中复制A 的测试。这有意义吗？

您不必为A 和B 重复测试。在B 中，您只需从与A 集成的角度以及任何自定义功能的角度对其进行测试。我就是这么看的。

我猜你仍然需要启动一个网络服务器来运行 cypress，所以永远不会像不需要完整应用服务器的低级 Dom 测试那么快？