Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

`waitFor` utils are not wrapped in `act` so some state updates are not applied to the DOM

Offen
  • Stimmt etwas nicht?
#1,416 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, react
Bereich
frontend, testing

Rechercherichtung

Beginne mit dem async wrapper, der an die DOM Testing Library übergeben wird, und der in App.test.tsx gezeigten Verwendung von waitForElementToBeRemoved. Prüfe den verlinkten Commit, der den direkten act-Aufruf entfernt hat, und verwende die StackBlitz-Reproduktion, um zu verifizieren, dass das abschließende Zustandsupdate ohne ein explizites async act auf das DOM angewendet wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

  • @testing-library/react version: 16.3.0
  • Testing Framework and version: jest 30.1.3
  • DOM Environment: jsdom 26.1.0
Relevant code or config:
  test('it loads', async () => {
    render(<App />);

    await waitForElementToBeRemoved(screen.queryByRole('progressbar'));
    // Commenting this out fails the test
    // await act(() => new Promise((r) => setTimeout(r, 0)));

    expect(screen.getByText('Loaded')).toBeDefined();
  });
What you did:

Upgrading to React 18 along with react testing library v14, I found that some of my tests were now failing unless I add an explicit async act.

Digging into it, it seems to be this change to the async wrapper passed to the dom testing library where it no longer directly calls act, so state updates from the final iteration of the waitFor are not flushed to the DOM.

It looks like it only flushes the microtask queue, which won't give react an opportunity to process this state update.

Reproduction:

I'm using React 18 and RTL 14 but I've reproduced it on React 19 and RTL 16.

https://stackblitz.com/edit/rtl-template-4a3jt9jx?file=src%2FApp.test.tsx&view=editor

Suggested solution:

I don't have enough knowledge of the codebase to understand why the call to act was removed.

Vorherrschende Sprache
JavaScript
Sterne
19.7k
Forks
1.2k
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus testing-library/react-testing-library

Alle Issues in testing-library/react-testing-library

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.