Reactjs React测试库：为什么测试的顺序很重要？

这里有一个

重新排序下面的测试将使

一个接一个地找到要通过的测试

另一种让它通过的方法是让
应该能够直接找到3
测试通过，例如，让它找到
2
而不是
3

describe("Counter", () => {
  test("should be able to find 3 directly", async () => {
    render(<Counter />);

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });

  test("find one after the other", async () => {
    render(<Counter />);

    const one = await waitFor(() => screen.findByText(/1/i));
    expect(one).toBeInTheDocument();

    const two = await waitFor(() => screen.findByText(/2/i));
    expect(two).toBeInTheDocument();

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });
});

描述（“计数器”，（）=>{
测试（“应该能够直接找到3”，异步（）=>{
render（）；
constthree=wait waitFor（（）=>screen.findByText（/3/i））；
期望（三个）成为文档（）；
});
测试（“逐个查找”，异步（）=>{
render（）；
const one=wait waitFor（（）=>screen.findByText（/1/i））；
期望（一）成为文件；
consttwo=wait waitFor（（）=>screen.findByText（/2/i））；
期望（两个）成为文档（）；
constthree=wait waitFor（（）=>screen.findByText（/3/i））；
期望（三个）成为文档（）；
});
});

所以问题是，为什么测试的顺序很重要？为什么不工作？
看起来，
waitFor
已达到超时，因为等待计数器为3，这意味着在这种情况下它与订购无关

您可以通过增加等待计数器的超时时间进行修复，如下所示：

test（“应该能够直接找到3”，async（）=>{
render（）；
const three=wait waitFor（（）=>screen.findByText（/3/i）{
超时：3e3，//3s等待将找到3
});
期望（三个）成为文档（）；
});
计数器
正在使用
设置间隔
，因此第二次测试通过基本上是幸运的。通常，取决于特定日期/时间的任何测试（无论是否有反应），都将用于指定/控制时间增量。对于计数器，您可以设置假计时器，然后将时间更新为3秒后，这样您就可以检查文本
3
是否出现。另外，您可能没有在组件中正确使用setInterval。我要补充的是，虽然有一些测试库方法可以等待文本出现，但伪计时器是指如何在jest、mocha、tape或任何其他库中控制时钟，以确保事情以您期望的方式出现/执行。我明白了，我错误地认为超时时间是5秒。那么为什么
“与第一个测试相同，但由于第二个测试失败而失败”
只有当
“应该能够直接找到3个”
测试失败时，测试才失败？是的，这看起来很有趣。我猜它会抛出错误，因为在所有正在执行的测试用例中，
waitFor
达到其限制超时（因为它们是异步运行的）