Der Test schlägt fehl, da vor findBy in der React Testing Library keine waitFor-Anweisung platziert ist

Question

render(view)
let timerCellsList;
await waitFor(() => {
  lockCellsList = screen.getAllByTestId('TimerCell');
  expect(lockCellsList).toHaveLength(2);
});

const startTimerButton = within(timerCellsList[1]).getByRole('button');
userEvent.click(startTimerButton);
await waitFor(() => {}, {timeout: 0}); // 测试通过了，没有这行就失败了。
                                       // 我可以设置超时时间为任意数字，包括0。
const activeTimer = await screen.findByRole('cell', {name: /00:00/i});
expect(activeTimer).toBeInTheDocument();

Ich habe einen Test geschrieben, bei dem der Benutzer auf eine Schaltfläche klickt. Die Schaltfläche sendet eine Netzwerkanfrage. Wenn 200 zurückgegeben werden, wird ein Timer angezeigt, der in Sekunden zählt. Ich verwende MSW, um eine Scheinantwort zurückzugeben. Da die Netzwerkanforderung offensichtlich asynchron ist, suche ich nach diesem Timer, indem ich darauf warte, dass screen.findByRole aufgerufen wird. Das Problem, das ich habe, ist, dass der Test nur besteht, wenn userEvent.click(startTimerButton)和调用await screen.findByRole('cell', {name: /00:00/i})之间调用await waitFor(() => {}) aufgerufen wird. Es scheint, dass dieser Test nur dann besteht, wenn ich ihn eine Weile ruhen lasse, bevor ich nach dem Timer suche. Ich verstehe nicht, warum ich den Suchtimer nicht sofort starten kann.

Ohne die waitFor-Anweisung erhalte ich folgende Fehlermeldung:

Fehler: Wirft Folgendes aus: „Test-Timeout hat 5000 ms überschritten.“ Wenn es sich um einen Test mit langer Laufzeit handelt, verwenden Sie jest.setTimeout(newTimeout), um den Timeout-Wert zu erhöhen. " var evt = document.createEvent('event'); TypeError: Die Eigenschaft „createEvent“ von null kann nicht gelesen werden

Kennt jemand den Grund? Ich wünschte, ich müsste es nicht so umgehen, wie ich es jetzt tue.

Ich habe auch versucht, mein „await findBy“ in ein „getBy“ zu ändern, das in eine „waitFor“-Anweisung eingeschlossen ist, aber auch das hat nicht funktioniert. Es kommt mir so vor, als müsste ich es einfach eine Weile schlafen lassen und dann mit der Suche beginnen.

Answer 1

你在这一行中缺少await：

userEvent.click(startTimerButton);

所以尝试一下：

await userEvent.click(startTimerButton);

自版本14起，userEvent API是异步的。