Portable Stories: Improve Handling of React Updates and Errors

[valentinpalkovic]

Closes #25304

What I did

This PR addresses several issues related to how React updates, errors, and asynchronous actions are handled during testing in Storybook’s portable stories:

1. React act Integration for Testing:

• We removed the custom preventActChecks function and fully integrated React's act wrapper. This ensures that all React updates triggered by asynchronous actions (such as user events) are properly wrapped, allowing for consistent and reliable testing.
• Functions related to rendering (mounting/unmounting) are now properly wrapped in act to ensure React updates are applied before making assertions.
• The WithCallback helper function was removed in portable stories due to conflicts with act, which led to unresolved mountings and timeouts in tests.

2. Improved Error Handling:

• Introduced error-handling enhancements where components throwing an error are now properly caught by Vitest.
• An example of this is the new ComponentWithError test case that ensures errors thrown during rendering are handled and reported as expected in tests.
• The use of an ErrorBoundary within portable-stories was removed as it conflicted with act. This change improves compatibility with React's testing utilities, ensuring more accurate test behavior.

3. Global Annotations:

• Modified setProjectAnnotations to include global project annotations from globalThis.defaultProjectAnnotations. This allows default configurations to be automatically applied when no project-specific annotations are provided.

---

These changes streamline the testing process in Storybook, improving reliability by fully leveraging React’s act wrapper. As a result, users will see more predictable test behavior, especially when dealing with asynchronous updates and error scenarios. These improvements set a foundation for future testing enhancements in Storybook 9.0 and beyond, particularly around error boundaries and React lifecycle management.

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/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-29044-sha-67f91ec6. 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-29044-sha-67f91ec6
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/propagate-error-in-testing
Commit	67f91ec6
Datetime	Thu Sep 5 09:30:22 UTC 2024 (1725528622)
Workflow run	10717718071

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=29044

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.4 MB	77.4 MB	507 B	1.65	0%
initSize	162 MB	162 MB	4.92 kB	2.39	0%
diffSize	85.1 MB	85.1 MB	4.42 kB	4.07	0%
buildSize	7.52 MB	7.53 MB	12.9 kB	1.7	0.2%
buildSbAddonsSize	1.62 MB	1.62 MB	102 B	1.27	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.34 MB	2.34 MB	0 B	1	0%
buildSbPreviewSize	352 kB	352 kB	68 B	Infinity	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.51 MB	4.51 MB	170 B	1.01	0%
buildPreviewSize	3.01 MB	3.02 MB	12.7 kB	5.47	0.4%
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	23.8s	20.1s	-3s -663ms	0.82	-18.2%
generateTime	20.8s	18.9s	-1s -899ms	-1.13	-10%
initTime	15.4s	15.8s	448ms	-0.71	2.8%
buildTime	10.8s	11.8s	982ms	-0.2	8.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.6s	6.1s	-509ms	-0.99	-8.3%
devManagerResponsive	4.2s	3.9s	-288ms	-0.89	-7.3%
devManagerHeaderVisible	755ms	674ms	-81ms	-0.92	-12%
devManagerIndexVisible	789ms	705ms	-84ms	-0.94	-11.9%
devStoryVisibleUncached	1.3s	1.2s	-110ms	-0.72	-8.8%
devStoryVisible	791ms	704ms	-87ms	-0.95	-12.4%
devAutodocsVisible	691ms	626ms	-65ms	-0.76	-10.4%
devMDXVisible	714ms	651ms	-63ms	-0.62	-9.7%
buildManagerHeaderVisible	744ms	740ms	-4ms	-0.07	-0.5%
buildManagerIndexVisible	818ms	742ms	-76ms	-0.39	-10.2%
buildStoryVisible	816ms	775ms	-41ms	-0.23	-5.3%
buildAutodocsVisible	922ms	610ms	-312ms	-0.91	-51.1%
buildMDXVisible	655ms	668ms	13ms	-0.04	1.9%

Greptile Summary

This PR enhances React integration and error handling in Storybook's portable stories, focusing on improved testing reliability and consistency.

• Removed preventActChecks and fully integrated React's act wrapper in code/lib/react-dom-shim/src/react-16.tsx and react-18.tsx
• Added new ComponentWithError story in code/renderers/react/src/__test__/ComponentWithError.stories.tsx to test error handling
• Introduced act-compat.ts in code/renderers/react/src/ to manage React's state updates during testing
• Modified code/renderers/react/src/portable-stories.tsx to enhance error handling and React act integration
• Updated code/renderers/react/src/renderToCanvas.tsx to conditionally render Story component with or without ErrorBoundary based on act environment

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 46aa6e0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[JReinhold]

🚀

[storybook-bot]

Failed to publish canary version of this pull request, triggered by @valentinpalkovic. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/10716151501

[greptile-apps]

_{19 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings}

[greptile-apps]

style: Consider removing 'as any' and properly typing the component

[greptile-apps]

style: Consider adding a return type annotation for better type safety

[kasperpeulen]

Thanks! Great work