Storyshots is not working with React 18
See original GitHub issueDescribe 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.ts
file - Run
yarn test
and 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
)
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:17 (3 by maintainers)
Top Results From Across the Web
Storyshots is not working with React 18 #17985
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, ...
Read more >@storybook/addon-storyshots | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >How to do interaction testing with React 18 and Storybook
It works by taking screenshots of every story and comparing them to identify changes. Storybook is great for running visual tests, as every ......
Read more >StoryBookのStoryshotsアドオンがReact18で動かない時の対応
Storybookのissueにてドンピシャの内容があった Storyshots is not working with React 18. TypeError: Cannot read properties of undefined ...
Read more >storybook/addon-storyshots
Start using @storybook/addon-storyshots in your project by running `npm i @storybook/addon-storyshots`. There are 178 other projects in the ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.