fix: avoid act warnings (#46)

sheremet-va · web-flow · commit 76a2765d64b3 · 2026-01-28T18:29:44.000+01:00
diff --git a/src/pure.tsx b/src/pure.tsx
@@ -17,7 +17,7 @@ function ensureTestIdAttribute(element: HTMLElement) {
 let activeActs = 0
 
 function setActEnvironment(env: boolean | undefined): void {
-  (globalThis as any).IS_REACT_ACT_ENVIRONMENT = env
+  ;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = env
 }
 
 function updateActEnvironment(): void {
@@ -30,7 +30,7 @@ const _act = React.act || React.unstable_act
 // we call act only when rendering to flush any possible effects
 // usually the async nature of Vitest browser mode ensures consistency,
 // but rendering is sync and controlled by React directly
-const act = typeof _act !== 'function'
+const act: typeof React.act = typeof _act !== 'function'
   ? async (cb: () => unknown) => { await cb() }
   : async (cb: () => unknown) => {
     activeActs++
@@ -115,7 +115,7 @@ export async function render(
     })
   }
 
-  await act(() => {
+  await act(async () => {
     root!.render(
       strictModeIfNeeded(wrapUiIfNeeded(ui, WrapperComponent)),
     )
@@ -127,12 +127,12 @@ export async function render(
     locator: page.elementLocator(container),
     debug: (el, maxLength, options) => debug(el, maxLength, options),
     unmount: async () => {
-      await act(() => {
+      await act(async () => {
         root.unmount()
       })
     },
     rerender: async (newUi: React.ReactNode) => {
-      await act(() => {
+      await act(async () => {
         root.render(
           strictModeIfNeeded(wrapUiIfNeeded(newUi, WrapperComponent)),
         )
@@ -210,7 +210,7 @@ export async function renderHook<Props, Result>(renderCallback: (initialProps?:
 
 export async function cleanup(): Promise<void> {
   for (const { root, container } of mountedRootEntries) {
-    await act(() => {
+    await act(async () => {
       root.unmount()
     })
     if (container.parentNode === document.body) {
diff --git a/test/no-act-error.test.tsx b/test/no-act-error.test.tsx
@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { page } from 'vitest/browser'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import { render } from 'vitest-browser-react'
+
+const fetchData = vi.fn()
+
+const AsyncComponent: FC = () => {
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')
+  const [data, setData] = useState<string | null>(null)
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const result = await fetchData()
+        setData(result)
+        setStatus('success')
+      }
+      catch {
+        setStatus('error')
+      }
+    }
+    void load()
+  }, [])
+
+  if (status === 'loading') {
+    return <div data-testid="status">loading</div>
+  }
+
+  return (
+    <div>
+      <div data-testid="status">{status}</div>
+      {data && <div data-testid="data">{data}</div>}
+    </div>
+  )
+}
+
+beforeEach(() => {
+  const spy = vi.spyOn(console, 'error')
+  return () => {
+    const calls = spy.mock.calls.flat()
+    spy.mockRestore()
+    expect(calls).not.toContainEqual(expect.stringContaining('act'))
+  }
+})
+
+describe('act() warning reproduction', () => {
+  it('produces act() warning when async operation resolves', async () => {
+    fetchData.mockResolvedValue('Hello World')
+
+    await render(<AsyncComponent />)
+
+    await expect.element(page.getByTestId('status')).toHaveTextContent('success')
+    await expect.element(page.getByTestId('data')).toHaveTextContent('Hello World')
+  })
+
+  it('produces act() warning when async operation rejects', async () => {
+    fetchData.mockRejectedValue(new Error('Failed'))
+
+    await render(<AsyncComponent />)
+
+    await expect.element(page.getByTestId('status')).toHaveTextContent('error')
+  })
+})
diff --git a/test/render-hook.test.tsx b/test/render-hook.test.tsx
@@ -37,7 +37,7 @@ test('allows rerendering', async () => {
 
   expect(result.current).toEqual(['left', expect.any(Function)])
 
-  rerender({ branch: 'right' })
+  await rerender({ branch: 'right' })
 
   expect(result.current).toEqual(['right', expect.any(Function)])
 })
diff --git a/test/render.test.tsx b/test/render.test.tsx
@@ -48,5 +48,5 @@ test('waits for suspended boundaries', async ({ onTestFinished }) => {
   await expect.element(page.getByText('Suspended!')).toBeInTheDocument()
   vi.runAllTimers()
   await result
-  expect(page.getByText('Hello Vitest')).toBeInTheDocument()
+  await expect.element(page.getByText('Hello Vitest')).toBeInTheDocument()
 })
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -11,17 +11,12 @@ export default defineConfig({
     projects: [
       {
         extends: true,
-        test: { name: 'prod' },
-      },
-      {
-        extends: true,
-        test: { name: 'dev' },
-        resolve: { conditions: ['vdev'] },
+        test: { name: 'react' },
       },
       {
         extends: true,
         test: {
-          name: 'selector-custom-attr',
+          name: 'custom-attr',
           include: ['test/render-selector.test.tsx'],
           browser: {
             locators: {
