如何测试一系列交互？答案

【问题标题】：How to test a series of interactions?如何测试一系列交互？
【发布时间】：2020-11-18 14:29:07
【问题描述】：

我一直在学习如何为 React 应用编写自动化测试，它提出了如何最好地测试与应用的一系列交互的问题。

假设我有一个 React 应用程序，它允许用户将学生分配到教室中的座位：Here's an image of what such an app would look like。

我想测试创建一个新学生，将该学生添加到教室中的一个座位，然后将该学生移回中间一列中没有座位的学生区域（我将其称为花名册）。

为此编写测试的最佳方式是什么？拥有一个大型测试用例是否有意义，其中将包含我正在测试的每个交互的断言（创建一个新学生，将其在教室和名册之间移动）？

或者我应该创建多个案例，其中一个依赖于另一个？也就是说……

测试1）提交表单时检查是否成功创建新学生

测试 2) 使用在测试 1 中创建的学生，将学生移动到教室中的座位

测试 3) 学生现在坐在座位上（由于测试 2），将其移回名册区域

我的另一个问题是 React 测试库是否足以满足此目的。或者这是否会被视为应该使用 Cypress 编写的端到端测试？

非常感谢您的反馈！

【问题讨论】：

您可以使用 RTL 进行 e2e，但它是为黑盒单元/集成测试而设计的。您描述的那种测试并不能消除对单元测试的需要。而且它并没有消除在浏览器中进行 e2e 测试的需要，因为 RTL 在 Node 中运行并且表现得不像真实的东西。所以这就是在适合它们的框架之间分离不同类型的测试的原因。

【解决方案1】：

您描述的过程肯定可以使用react-testing-library 作为集成测试进行测试。从 docs/faq 开始，它鼓励在组件树上测试足够高的组件，而不模拟子组件，以便模拟和测试实际的用户交互。

【讨论】：

感谢您的意见！另外，您对我的另一个问题有什么想法：对于我正在尝试实施的测试，是否应该将其分解为多个案例，其中每个后续测试都依赖于前一个？
就个人而言，我会将它们分解，以便获得更多描述性测试输出。在每个测试用例中，我都会断言流程的特定功能正在工作。后面的测试用例将重复第一个测试中的用户交互，但由于它们已经被覆盖，我只断言我针对该特定测试的功能。
Yw。测试还应该使用先前测试的数据/更改吗？可能不会，除非您有特定的理由这样做。
明白了。对我来说，测试不应该相互依赖是有道理的，因为这可能会使测试套件更加脆弱。在编写新测试时，我对“为第一个测试重复用户交互”的担忧是这是否会显着减慢测试的运行时间。但我认为这是值得的权衡？

【解决方案2】：

您希望您的测试尽可能细化，因为您已经将它们分成 3 种不同的情况。这将使每个人都更容易阅读您的代码。

至于测试库，我会选择 Cypress，它标榜自己是 JavaScript End to End Testing Framework。

您在此处通过操纵看似多个组件的方式来测试端到端功能。另一方面，React 测试库似乎专注于以更底层的方法测试单个组件 - 从长远来看，它有可能会步履蹒跚，但它可能也能完成工作。

【讨论】：