Switching from jest to vitest causes thousands of act(...) related warnings.

[MarkLyck]

Describe the bug

I'm trying to switch my project with ~400 unit tests from using jest to using vitest.

It did not take much effort to get all my tests passing. But after fixing the tests that broke in the transition I'm now getting thousands of warnings like this:

Warning: An update to InnerLoadable inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
    at InnerLoadable (/Users/marklyck/colony/colony-frontend/node_modules/.pnpm/@[email protected][email protected]/node_modules/@loadable/component/dist/loadable.cjs.js:182:34)
    at LoadableWithChunkExtractor
    at Loadable

even a simple test like this:

test.only('renders with default deviceType', async () => {
    render(
      <MemoryRouter initialEntries={['/']}>
        <Dashboard />
      </MemoryRouter>
    )

    const dashboardElement = await screen.findByText(/dashboard/i)
    expect(dashboardElement).toBeInTheDocument()
  })

Generates 128 act related warnings.

The first thing I tried was to put in some:

await act(async () => {
  await waait(100)
})

Just to see if adding waiting time in-between statements would solve these? In some cases this will fix "some" of the act warnings. But not all of them.

E.g. I had 1 test that produced 32 act warnings and adding an act wait between every single line reduced it to 10 warnings. But there's no where else i could put one.

Next I tried vi.useFakeTimers() and vi.runAllTimers() as well as vi.runAllTicks()

I even tried adding them between every line like this:

test('render <NoActiveSites />, when there are no sites', async () => {
    vi.useFakeTimers()
    await act(async () => {
      await vi.runAllTicks()
      await vi.runAllTimers()
    })

    render(
      <MemoryRouter initialEntries={['/']}>
        <Dashboard />
      </MemoryRouter>
    )

    await act(async () => {
      await vi.runAllTicks()
      await vi.runAllTimers()
    })

    const noSitesMessage = await screen.findByText(
      "You don't have any sites yet"
    )
    await act(async () => {
      await vi.runAllTicks()
      await vi.runAllTimers()
    })
    expect(noSitesMessage).toBeInTheDocument()
    await act(async () => {
      await vi.runAllTicks()
      await vi.runAllTimers()
    })
  })

But the act warnings just won't go away :(

I'm running out of ideas on what to try to fix this. I was really hoping vitest would be "mostly" a drop-in replacement for jest. But there is clearly something here that jest handles gracefully that vitest doesn't have? and adding manual timers don't seem to fix it.

Reproduction

I spent hours trying to make a reproduction on StackBlitz, but so far I have had no luck :(.

I would be happy to share access to the private repo I am working on where this happens to any contributor of vitest to help resolve this, and I would be free to hop on a call and do what I can to help debug.

System Info

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 423.72 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.0.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.6.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 101.1.38.109
    Chrome: 101.0.4951.54
    Firefox: 99.0.1
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-react: ^1.2.0 => 1.3.2
    vite: ^2.8.6 => 2.9.7
    vitest: ^0.10.1 => 0.10.2

Used Package Manager

pnpm

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.

[sheremet-va]

What is your react version?

[MarkLyck]

@sheremet-va [email protected]

These might also be relevant:

"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "13.2.0",
"@testing-library/user-event": "14.1.1",

[airjp73]

I have a minimal reproduction of the issue here: https://github.com/airjp73/vitest-act-reproduction

[sheremet-va]

I will look into this today.

[sheremet-va]

@airjp73 coincidentally PR #1256 fixes your reproduction

[sheremet-va]

@MarkLyck can you try Vitest 0.12.0?

[MarkLyck]

@sheremet-va :) After upgrading to 0.12.0 my thousands of act warnings is now down to ~15 or so. 🎉

The ~15 warnings left (that do not happen with jest) are probably fixable, and the CI/CD while it still takes longer than jest for some reason? It no longer times out :)

Thank you! We can finally move forward with switching to vitest now I think.

[MarkLyck]

This issue seems to be fixed in 0.12.0 🎉 Thanks @sheremet-va