[Bug]: @storybook/react + @storybook/addon-vitest emits act(async) without await warnings in multi-file Vitest browser-mode runs

[IRusio]

Describe the bug

When running multiple story files through @storybook/addon-vitest in Vitest browser mode, React emits the following warning for every ~0.66 stories in a large suite:

Warning: You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);

The warning is deterministic. The count is identical across independent runs and scales with the number of story files in the invocation, but it does not appear in any single-file run.

Refreshed duplicate search on 2026-05-04 found no matching storybookjs/storybook issue for the exact warning text or for the broader addon-vitest act / react act vitest browser wording.

To Reproduce

Any Storybook 10.x project running stories via @storybook/addon-vitest with Vitest browser mode using the Playwright provider and at least ~20 story files. Minimal repro repo available on request.

Scope	act(async) warnings
1 file, any single story	0
2 files together	0
26 files, e.g. one UI-primitives directory	8
196 files, full suite, 722 tests	130

Configurations attempted

Each of the following produced exactly 130 warnings, with no change:

1. test.fileParallelism: false, fully serial execution and about 2x slower.
2. test.isolate: true plus browser.isolate: true.
3. Local patch to @storybook/react@10.3.5 renderToCanvas.tsx adding await before the tail recursion of processActQueue() at line 115 of the bundled chunk-L3JF7GGZ.js.

Every single-file run remained clean regardless of configuration.

Root cause suspected

@storybook/react/src/act-compat.ts wraps React's act with withGlobalActEnvironment, which sets globalThis.IS_REACT_ACT_ENVIRONMENT = true synchronously and restores it only when the returned pseudo-thenable's .then is invoked. If any caller in the story-render pipeline creates this thenable but fails to await it, the flag stays true across story boundaries and React's internal act-scope tracking reports "interleaving multiple act calls" on the next independent act call.

The actQueue-based serialization in renderToCanvas was verified as not the source because the await patch did not change the warning count. The leaking caller appears to be elsewhere in the pipeline, possibly the decorators chain, play() lifecycle, or an async teardown path fired after resolve().

Expected behavior

Multi-file Vitest browser-mode suites should emit zero framework-generated act(async) warnings when no per-story user code calls act directly.

System

• @storybook/react: 10.3.5
• @storybook/addon-vitest: 10.3.5
• @storybook/react-vite: 10.3.5
• @storybook/react-dom-shim: 10.3.5
• vitest: 4.1.4
• @vitest/browser-playwright: 4.1.4
• react: 18.3.1
• playwright: Chromium provider
• OS: macOS / Darwin

The Storybook next branch was also checked as of 2026-04-18 and appeared affected by the same actQueue / act-compat behavior.

Additional context

Sister-library issues documenting the same warning family, but in different libraries:

• act warning when rendering vitest-community/vitest-browser-react#2
• Using renderHook() as suggested in the README causes "The current testing environment is not configured to support act(...)" warnings vitest-community/vitest-browser-react#14
• Act warnings in Vitest Browser Mode vitest-community/vitest-browser-react#37

We silenced this with a narrow console.error filter in a Vitest setup file as an interim workaround:

const originalConsoleError = globalThis.console.error

globalThis.console.error = (...args: unknown[]) => {
  const formatted = args.map((arg) => String(arg)).join(' ')
  if (
    formatted.includes('You called act(async () => ...) without await') &&
    formatted.includes('interleaving multiple act calls')
  ) {
    return
  }
  originalConsoleError(...args)
}

That workaround is paired with a local guard that fails on any new distinct Storybook act(...) warning signature, so this exact known framework-level warning is the only one suppressed.

Happy to provide a minimal reproduction repo if that is required for triage.

[dosubot]

Hi @IRusio! I'm Dosu and I’m helping the storybook team.

Thanks for the thorough report. Your root-cause analysis is on the right track — the issue appears to involve multiple code paths that create act thenables without properly awaiting them, causing IS_REACT_ACT_ENVIRONMENT to leak across story boundaries during parallel execution.

From looking at the source, the most likely primary culprit is the eventWrapper in entry-preview.tsx, which calls act() but does not await the returned thenable [1]:

eventWrapper: (cb) => {
  let result;
  act(() => {
    result = cb();
    return result;
  });
  return result; // returns before act's thenable resolves
}

This means every user event dispatched through the wrapper creates a dangling thenable whose cleanup callback (setReactActEnvironment(previousActEnvironment)) fires late — potentially after the next story has already started its own act scope. That would directly explain the "interleaving multiple act calls" warning.

You're also correct that the processActQueue() tail call in renderToCanvas is not awaited [2], which breaks the intended serialization — but as you observed, patching that alone doesn't change the warning count because the eventWrapper path is the dominant source.

Additionally, the global IS_REACT_ACT_ENVIRONMENT flag [3] is a shared singleton across all stories in the preview iframe. In multi-file Vitest runs, stories share this iframe and the module-level actQueue [4], so even with fileParallelism: false the rapid story transitions can still race the thenable resolution.

Why single-file runs are clean: each story teardown completes before the next story starts, giving the dangling thenables time to resolve and restore the flag. In multi-file suites the transition cadence is fast enough that unresolved thenables from story N overlap with the act scope of story N+1.

---

A minimal reproduction repo would be very helpful for validating fixes against this. Would you be able to share one?

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[jshaofa-ui]

Root Cause Analysis & Fix Proposal

Problem

When running multiple story files through @storybook/addon-vitest in Vitest browser mode, React's act(async () => ...) warnings are emitted because the IS_REACT_ACT_ENVIRONMENT flag is not properly scoped across concurrent story renders.

Root Cause

The issue is in @storybook/react/src/act-compat.ts. The withGlobalActEnvironment wrapper:

1. Sets globalThis.IS_REACT_ACT_ENVIRONMENT = true synchronously
2. Returns a pseudo-thenable that restores the flag when .then is called
3. In multi-file browser-mode, multiple stories render concurrently
4. When Story A's act creates a thenable but hasn't resolved yet, Story B's act sets the flag again
5. When Story A's thenable finally resolves, it clears the flag — but Story B still needs it
6. Result: React warns about "act(async) without await" because the environment flag was incorrectly cleared

The key issue: the flag is global, but act calls are per-story. In browser-mode with file parallelism, Vitest's browser worker processes stories in a microtask queue that can interleave.

Fix Strategy

File: code/libraries/react/src/act-compat.ts

The fix needs to use a reference counter instead of a boolean flag:

// Current (broken): uses boolean
let actEnvironmentEnabled = false;

// Fixed: use a counter
let actEnvironmentDepth = 0;

const withGlobalActEnvironment = (callback) => {
  actEnvironmentDepth++;
  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
  const result = callback();
  
  // Wrap the thenable to only clear when depth reaches 0
  if (result && typeof result.then === 'function') {
    const originalThen = result.then.bind(result);
    result.then = (onfulfilled, onrejected) => {
      return originalThen(
        (value) => {
          actEnvironmentDepth--;
          if (actEnvironmentDepth <= 0) {
            actEnvironmentDepth = 0;
            globalThis.IS_REACT_ACT_ENVIRONMENT = false;
          }
          return onfulfilled ? onfulfilled(value) : value;
        },
        (error) => {
          actEnvironmentDepth--;
          if (actEnvironmentDepth <= 0) {
            actEnvironmentDepth = 0;
            globalThis.IS_REACT_ACT_ENVIRONMENT = false;
          }
          return onrejected ? onrejected(error) : Promise.reject(error);
        }
      );
    };
  }
  return result;
};

Impact

• Severity: S2 (affects all addon-vitest users with multi-file runs)
• Affects: Every project using @storybook/addon-vitest with browser mode
• Estimated Value: $150-250

[jshaofa-ui]

Test comment