storybook: Storyshots is not working with React 18
Describe the bug
"@storybook/addon-storyshots": "^6.4.22" is not working with React 18
Since version 6.4.22 Storybook works fine with React 18, however storyshots addon fails with an error:
TypeError: Cannot read properties of undefined (reading 'current')
at warnIfNotScopedWithMatchingAct (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14999:31)
at updateContainer (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16413:7)
at create (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17149:3)
at getRenderedTree (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/react/renderTree.js:24:16)
at node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:11:22
at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/snapshotsTestsTemplate.js:47:20)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/@jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)
To Reproduce
- You can clone my small pet project: https://github.com/EugeneDraitsev/telegram-bot-ui
- Uncomment 2-4 lines in the
/stories/__tests__/storyshots.test.tsfile - Run
yarn testand see the error
You can reach same result with an empty nextjs project with Storybook and Storyshots addon
System
Environment Info:
System:
OS: Windows 10 10.0.22598
CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 100.0.4896.127
Edge: Spartan (44.22598.100.0), Chromium (100.0.1185.39)
npmPackages:
@storybook/addon-actions: ^6.4.22 => 6.4.22
@storybook/addon-backgrounds: ^6.4.22 => 6.4.22
@storybook/addon-info: ^5.3.21 => 5.3.21
@storybook/addon-knobs: ^6.4.0 => 6.4.0
@storybook/addon-links: ^6.4.22 => 6.4.22
@storybook/addon-options: ^5.3.21 => 5.3.21
@storybook/addon-storyshots: ^6.4.22 => 6.4.22
@storybook/addon-viewport: ^6.4.22 => 6.4.22
@storybook/addons: ^6.4.22 => 6.4.22
@storybook/react: ^6.4.22 => 6.4.22
@storybook/theming: ^6.4.22 => 6.4.22
Additional context
If you downgrade react to 17.0.2 then storyshot tests work fine (even with react-dom 18.0.0 and react-test-renderer 18.0.0)
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 2
- Comments: 17 (3 by maintainers)
Commits related to this issue
- Allow react-test-renderer 18 for storyshots (#17985) — committed to geisterfurz007/storybook by geisterfurz007 2 years ago
- template: Working Storyshots generator: Issue resolution path: 1. Needed correct Storyshots config (`framework` & `configPath`, RTFM!) 2. Needed to use correct Jest config to transpile Storyshots an... — committed to Valeriy-Burlaka/rn-taskbox by Valeriy-Burlaka 2 years ago
- template: Working Storyshots generator: Issue resolution path: 1. Needed correct Storyshots config (Using `jsdom`, setting `framework` & `configPath` properties. All happened to be in Storyshots doc... — committed to Valeriy-Burlaka/rn-taskbox by Valeriy-Burlaka 2 years ago
- Downgrade react-test-renderer by https://github.com/storybookjs/storybook/issues/17985 — committed to mryhryki/example-storybook-testing by mryhryki 2 years ago
I resolved this by updating my package.json file with this:
Why is this issue closed? Doesn’t work with newest version 6.5.6 Also workaround with resolutions doesn’t fix this issue for me.
It seems like we have working workaround with
resolutionsfor"react-test-renderer": "18.1.0", so I’ll close this issueI have:
And that didn’t solve the issue for me.
I’ve upgraded to the prerelease versions (^6.5.5) for storybook and still the issue persists. Any other ideas?
it would be also good if #18926 was backported to 6.5.10 release.
@shilman workaround doesn’t work as well.
Working for react-test-renderer 18.1.0, but not on 18.2.0 😃
I upgraded to the prerelease but still get the same issue doesn’t work for me…
i see that #18296 was included in 6.5.10 release (https://github.com/storybookjs/storybook/releases/tag/v6.5.10)
but still getting the same error:
Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.16 containing PR #18296 that references this issue. Upgrade today to the
@futureNPM tag to try it out!