使用 React 测试库和 Mock Service Worker 测试 React 模态的最佳实践？

Question

如果我要构建一个将一个数除以另一个数的简单函数，我会：

1. 在所有情况下，调用该函数。 第一个测试可能是一条快乐的路径，比如10 / 2 。
2. 另一种测试将一个较小的数字除以一个较大的数字，从而得到一个十进制值。
3. 其他一些测试会在混合中引入负数。
4. 最后，我肯定会有一个除以零的测试，看看它是如何处理的。

我在 React 中有一系列模态需要测试。 他们有一些共同点：

1. 他们收到一套道具。
2. 他们对这些道具采取行动，向用户显示一堆元素，并用道具中的数据的某种组合预先填充这些元素。
3. 他们使用fireEvent.###函数来模拟用户将在模态中执行的操作。
4. 在涉及 POST 或 PATCH 的每个测试接近尾声时，按下Submit按钮。
5. 按下Submit按钮后，我在每次测试结束时有两个expect函数，如下例所示：

expect(spy).toHaveBeenCalledTimes(1);

expect(spy).toHaveBeenCalledWith({
  type: 'SOME_ACTION',
  payload: {
    property1: 'Some value',
    property2: 'Some other value',
    property3: 53.2
  },
});

这种方法对我来说完全有意义，因为就像一个简单的数学函数一样，模态有数据输入和数据输出。 但是一些同事坚持认为我们不应该使用这样的expect(spy)函数进行测试。 相反，他们说我们应该在页面上测试最终结果。 但是没有“页面”，因为模态是单独测试的，我也认为这是最佳实践。

另一个建议是向 Mock Service Worker (MSW) 响应字符串添加成功或失败字符串，例如“您已成功保存新数据”。 我不喜欢这种方法的原因是：

1. 这样的字符串在测试中只是一个人为的构造，那么它究竟证明了什么？
2. 如果 POST 或 PATCH 发送的内容涉及计算，我们难道不想知道发送的数据是否正确吗？ 例如，如果提示用户输入他们在过去一周中每天工作的小时数，我们难道不想比较input元素中input内容与发送的内容吗？ 也许这些小时数被加总（出于某种原因）并包含在另一个包含的属性中 - 我们不想确认发送了正确的总数吗？

我确实尊重我同事的意见，但还没有从他们那里听到任何可以证明我放弃我采用的方法并采用他们的替代方法的理由。 因此，我正在寻求社区的见解，以更好地了解您是否会遵循这种做法……或不会。

Answer 1

这是一个逐案场景，没有真正的答案，因为性能和其他变量可能会在做出这些决定时发挥作用。

但是，根据您提供的信息，您和您的团队都是正确的。 您可能想要验证是否将正确的数据发送到后端，但您还想验证用户是否正在接收视觉响应，例如“已成功保存数据”。

然而，如果我必须选择一个，那就是检查数据，因为它具有最多的“代码覆盖率” 。 检查“成功”消息只是检查提交按钮是否被按下，因为数据检查确保大多数（如果不是全部）数据状态都被正确设置。

Answer 2

我更喜欢两者都做。

但是没有“页面”，因为模态是单独测试的，我也认为这是最佳实践。

我喜欢这样做，因为对于更复杂的组件，带有单元测试的 TDD 让我保持清醒。 有时我构建单元测试只是为了确保一切正常，然后在集成测试完成后将其删除。 （因为过多的单元测试可能是维护负担）。

最终我更喜欢集成测试而不是单元测试，因为我经历过单元测试通过的情况，但是一旦组件嵌套了 3 层深，它就会开始崩溃。 Kent Dodds 有一篇关于它的优秀文章。

我最喜欢这篇文章的要点：

如果您的组件<A />使用 props c和d呈现组件<B />并不重要，如果组件<B />在没有提供 prop e情况下实际上中断了。 因此，虽然进行一些单元测试来验证这些部分独立工作并不是一件坏事，但如果您不同时验证它们是否可以正常工作，则对您没有任何好处。 并且您会发现，通过测试它们是否能正常工作，您通常不需要单独测试它们。