"act" is necessary with Fake Timers even though (IIUC) shouldn't be

[mitchhentgesspotify]

Reproduction example

https://codesandbox.io/p/devbox/9r8lr2

Prerequisites

• The component being tested should update a useState() within a setTimeout() in response to user input
• The test should use Fake Timers, perform that user input, then verify the results of the useState() change (e.g. querying for an element that should now be rendered)

In my linked repro, this test will fail unless the "user input" done by the test happens in an act()

So, within the linked sandbox:

1. Run pnpm test, the test will fail
2. Tweak MyForm.test.js and uncomment the act(...) call. Running pnpm test will now succeed.

Expected behavior

The test should pass without needing to wrap the user input in act(...), because according to this comment:

No, wrapping with act is neither required nor recommended.

Actual behavior

If the user input isn't wrapped in act(...), then, even though the useState() value was updated, a re-render isn't triggered before the test continues, causing it to fail.

User-event version

14.5.2

Environment

Repro'd in a sandbox even though it's a bit tricky these days 😅

Additional context

No response

[pixie-cheeks]

A similar issue I encountered where the test was passing when it should fail.

App.jsx

function App() {
  const [counter, setCounter] = useState(0);
  return (
    <button
      type="button"
      // The next line should make the test fail
      onClick={() => setCounter(counter + 1)}
    >
      {counter}
    </button>
  );
}

App.test.jsx

  it('should increment a counter', async () => {
    const user = userEvent.setup();
    render(<App />);

    const button = screen.getByRole('button');
    // await act(async () => {
      await user.tripleClick(button);
    // });

    expect(button).toHaveTextContent('3');
  });

If the clicks are ever called really close to each other, it is possible that useState might use stale data. Hence, I was expecting it to catch the bug on its own since it's discouraged to wrap with act(...) according to the docs.
But unexpectedly, the test passes unless you wrap the tripleClick event with act(...).