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

Đang mở
  • Có gì không ổn?
#99 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, testing-qa, typescript
Lĩnh vực
testing

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
537
Fork
22
Merge trung bình
2 giờ 19 phút
Pull request đã merge (30 ngày)
24

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/redact

Tất cả issue của TanStack/redact

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.