React: Use Act wrapper in Storybook for component rendering

[valentinpalkovic]

Closes #

What I did

Previously, we have wrapped mounting and unmounting of React component, as well as test interactions via userEvent by act in a portable stories environment. Now we are adapting this behaviour to configure @storybook/test to wrap all component interactions and mounting/unmounting with act. This will make sure, that we can actually await a components rendering properly before we continue to the next Storybook render lifecycle phase.

Background:
The A11y addon has issues to find the right timing to trigger an automated test run if a component uses Suspense (e.g. RSC). With act we can actually properly await the complete rendering of a React component also in the Storybook preview, so that addon a11y can properly await its final rendering to trigger an a11y test run.

Introducing features.developmentModeForBuild

As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: developmentModeForBuild. This feature flag allows you to set process.env.NODE_ENV to development in built Storybooks, enabling development-related optimizations that are typically disabled in production builds.

In development mode, React and other libraries often include additional checks and warnings that help catch potential issues early. These checks are usually stripped out in production builds to optimize performance. However, when running tests or debugging issues in a built Storybook, having these additional checks can be incredibly valuable. One such feature is React's act, which ensures that all updates related to a test are processed and applied before making assertions. act is crucial for reliable and predictable test results, but it only works correctly when NODE_ENV is set to development.

// main.js
export default {
  features: {
    developmentModeForBuild: true,
  },
};

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-30037-sha-45971d9d. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-30037-sha-45971d9d
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/act-wrapping-of-components
Commit	45971d9d
Datetime	Thu Dec 19 11:30:56 UTC 2024 (1734607856)
Workflow run	12411834175

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=30037

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.8 MB	77.8 MB	828 B	3.56	0%
initSize	133 MB	133 MB	17.1 kB	-2.36	0%
diffSize	55.3 MB	55.3 MB	16.3 kB	-2.37	0%
buildSize	7.23 MB	7.19 MB	-34.2 kB	-8.35	-0.5%
buildSbAddonsSize	1.86 MB	1.85 MB	-7.66 kB	-2.9	-0.4%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	1.36	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.92 MB	3.92 MB	-7.66 kB	-3.17	-0.2%
buildPreviewSize	3.3 MB	3.28 MB	-26.5 kB	-296.69	-0.8%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	6.7s	16.3s	9.5s	0.25	58.4%
generateTime	19.4s	20.2s	789ms	-0.27	3.9%
initTime	14.8s	12.3s	-2s -512ms	-2.23	🔰-20.4%
buildTime	8.7s	8.3s	-407ms	-1.23	-4.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.5s	5s	503ms	-0.34	9.9%
devManagerResponsive	3.4s	3.7s	302ms	-0.45	8.1%
devManagerHeaderVisible	562ms	655ms	93ms	-0.17	14.2%
devManagerIndexVisible	573ms	664ms	91ms	-0.37	13.7%
devStoryVisibleUncached	1.8s	1.9s	110ms	0.2	5.7%
devStoryVisible	593ms	726ms	133ms	0.09	18.3%
devAutodocsVisible	509ms	598ms	89ms	0.1	14.9%
devMDXVisible	572ms	547ms	-25ms	-0.39	-4.6%
buildManagerHeaderVisible	545ms	623ms	78ms	-0.4	12.5%
buildManagerIndexVisible	622ms	730ms	108ms	-0.32	14.8%
buildStoryVisible	519ms	609ms	90ms	-0.23	14.8%
buildAutodocsVisible	454ms	587ms	133ms	0.61	22.7%
buildMDXVisible	451ms	524ms	73ms	0.14	13.9%

Greptile Summary

Based on the provided files and changes, here's a concise summary of the pull request:

Implements proper React act() wrapping for component rendering in Storybook, ensuring consistent behavior between development and testing environments.

• Added production mode bypass in act-compat.ts to skip act wrapping in production builds
• Updated renderToCanvas.tsx to wrap both render and unmount operations in act() for proper component lifecycle handling
• Added __isPortableStory flag in render context to control act wrapping behavior
• Modified bundle configuration to preserve process.env.NODE_ENV for proper environment-specific behavior
• Implemented testing library integration with act() for event handling and async operations

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b0737e7.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 36s	View ↗

---

☁️ Nx Cloud last updated this comment at 2024-12-21 11:48:56 UTC

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: b0737e7, ran on 21 December 2024 at 11:54:02 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/experimental-nextjs-vite

	Before	After	Difference
Dependency count	153	153	0
Self size	231 KB	231 KB	🚨 +298 B 🚨
Dependency size	44.67 MB	44.69 MB	🚨 +16 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	589	589	0
Self size	471 KB	472 KB	🚨 +298 B 🚨
Dependency size	83.25 MB	83.27 MB	🚨 +16 KB 🚨
Bundle Size Analyzer	Link	Link

[greptile-apps]

_{5 file(s) reviewed, 5 comment(s)
Edit PR Review Bot Settings | Greptile}

[kylegach]

Thanks for documenting this! Made some edits as suggestions.