act() does not flush updates scheduled before it, so a following fireEvent's update is deferred too

Offen
  • Stimmt etwas nicht?
#99 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
72/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, testing-qa, typescript
Bereich
testing

Rechercherichtung

Start by tracing how Redact schedules state updates and flushes them when the outermost act() scope exits; the issue does not name implementation files or tests. Reproduce the case in the issue with a focus update before fireEvent.click, then compare the immediate state with the supplied React results. Done means pending updates are reflected synchronously when act() returns, including updates queued before it began.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Version: @tanstack/redact 0.2.2

If a state update is scheduled outside act() and then an event runs inside act(), React's act flushes both before it returns. Redact flushes neither: both updates land one microtask later. A click on its own is flushed synchronously, so this only shows up when an update is already pending.

The common case: a test calls element.focus() (whose onFocus sets state, e.g. a tooltip trigger opening on focus) and then fireEvent.click(element). Assertions right after the click see the old state under Redact.

Repro (Vitest + jsdom + Testing Library)
import { render, fireEvent } from "@testing-library/react";
import * as React from "react";

function App() {
  const [focused, setFocused] = React.useState(false);
  const [open, setOpen] = React.useState(true);
  return (
    <button
      data-focused={String(focused)}
      onFocus={() => setFocused(true)}
      onClick={() => setOpen((o) => !o)}
    >
      {open ? "open" : "closed"}
    </button>
  );
}

it("act flushes an update that was scheduled before it", async () => {
  const { getByRole } = render(<App />);
  const button = getByRole("button");
  button.focus();          // onFocus -> setState, outside act
  fireEvent.click(button); // wrapped in act by Testing Library
  expect(button.textContent).toBe("closed");
  expect(button.dataset.focused).toBe("true");
});
state read right after fireEvent.click after await Promise.resolve()
React 19 closed / focused true closed / true
Redact 0.2.2 open / focused false closed / true
Redact, click without prior focus closed closed
Expected

Like React: leaving the outermost act() scope flushes all pending work, including updates queued before the scope started.

Found in a TanStack Start app: two shell tests (sidebar toggle and detail panel with base-ui tooltip triggers) focus the trigger, click it and assert the new state and the focus hand-off synchronously. They pass under React and fail under Redact; with an extra await they pass.

Vorherrschende Sprache
TypeScript
Sterne
537
Forks
22
Ø Merge
1 Std. 57 Min.
Gemergte PRs (30 T.)
20

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

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 TanStack/redact

Alle Issues in TanStack/redact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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