Async fake timers generate "not wrapped in act()" React warnings

[CharlineCouchot]

Describe the bug

I am attempting to test a polling component. Essentially the component re-fetches a status every 5s until the status becomes ready.
To that effect, I use msw polling mocking in conjunction with vi.runAllTimersAsync().
This works but triggers An update to ... inside a test was not wrapped in act(...) warnings. Wrapping the async timer in act essentially cancels it out, and the test times out.

I managed to do a minimal repro that doesn't involve msw or RTK to confirm the warning is indeed coming from the fake timer.

So far my only fix is to silence the warning 😅
Thanks for any help!

Reproduction

https://stackblitz.com/edit/vitest-fake-timers-act-warnings

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
    Memory: 23.64 GB / 31.22 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh

Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.22 - ~/.yarn/bin/yarn
    npm: 10.2.5 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.15.3 - ~/.nvm/versions/node/v20.9.0/bin/pnpm

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

I'm not sure "fake timer" is the cause of warning since if I genuinely wait for the interval, that can cause the same warning like this:
https://stackblitz.com/edit/vitest-fake-timers-act-warnings-ngkkxrrs?file=src%2FButton.test.tsx

import { describe, expect, it } from 'vitest';
import { Button } from './Button';
import { render, screen } from './utils/test-utils';

describe('Simple working test', () => {
  it('should refetch status when deploying until ready', async () => {
    render(<Button />);

    console.log('[before sleep 2sec]');
    await new Promise((r) => setTimeout(r, 2000));
    console.log('[after sleep 2sec]');

    expect(await screen.findByText('Stop')).toBeInTheDocument();
  });
});

I don't know if there's any gotcha for this, but maybe wrapping vi.runAllTimersAsync with act is supposed to work? Probably we can check relevant issues on https://github.com/testing-library/react-testing-library (like this one? testing-library/react-testing-library#1198 (comment)) and also compare with jest.

[hi-ogawa]

I think react-testing-library has some tricks to silence act warning for Jest when using their waitFor API https://github.com/testing-library/react-testing-library/blob/85ac2534a59abd38880011e77da4bb8c716eba84/src/pure.js#L39, so probably it's legitimate to manually silence the warning like you might have already done:
https://stackblitz.com/edit/vitest-fake-timers-act-warnings-kmaxc5u8?file=src%2FButton.test.tsx

  (globalThis as any).IS_REACT_ACT_ENVIRONMENT = false;
  try {
    await vi.runAllTimersAsync();
  } finally {
    (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
  }

[sheremet-va]

See Hiroshi's reply: #7196 (comment)

I agree this is not related to Vitest, but to how react works.