[Bug]: “The current testing environment is not configured to support act” errors when changing between component docs pages

[joonass-visma]

Describe the bug

When switching between component docs pages you get bunch of

The current testing environment is not configured to support act(...)

and occasionally

An update to ZoomElement inside a test was not wrapped in act(...).

errors in browser console.

Reproduction link

https://stackblitz.com/edit/github-qczcaoih?file=package.json&preset=node

Reproduction steps

1. Navigate to Button docs page
2. While on Button docs page, navigate to Header or Page docs page.
3. Check browser console for errors.

System

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.6.0-alpha.1 => 8.6.0-alpha.1 
    @storybook/addon-interactions: ^8.6.0-alpha.1 => 8.6.0-alpha.1 
    @storybook/addon-onboarding: ^8.6.0-alpha.1 => 8.6.0-alpha.1 
    @storybook/addon-webpack5-compiler-swc: ^2.0.0 => 2.0.0 
    @storybook/blocks: ^8.6.0-alpha.1 => 8.6.0-alpha.1 
    @storybook/react: ^8.6.0-alpha.1 => 8.6.0-alpha.1 
    @storybook/react-webpack5: ^8.6.0-alpha.1 => 8.6.0-alpha.1 
    @storybook/test: ^8.6.0-alpha.1 => 8.6.0-alpha.1 
    storybook: ^8.6.0-alpha.1 => 8.6.0-alpha.1

Additional context

React version: 19
Brower: Chrome, Firefox

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is a known issue with React 19's strict mode and act() warnings. To resolve: 1. Add the following to your .storybook/preview.ts: ts export const parameters = { reactOptions: { legacyRootApi: false, strictMode: false } }; 2. If you need to keep strict mode enabled, you can alternatively silence these specific warnings by adding: ts const originalError = console.error; console.error = (...args) => { if (/not wrapped in act/.test(args[0])) { return; } originalError.call(console, ...args); }; The root cause is related to React 19's stricter act() requirements during component updates and Storybook's preview iframe navigation.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[joonass-visma]

Found another issue which might be related (can be reproduced in the same StackBlitz):

1. Click Button component
2. Click Primary story
3. On keyboard: arrow down to hightlight Secondary story, then hit Enter
4. Story does not change and you get following error in console:

An update to Root 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://react.dev/link/wrap-tests-with-act