question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storyshots is not working with React 18

See original GitHub issue

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

  1. You can clone my small pet project: https://github.com/EugeneDraitsev/telegram-bot-ui
  2. Uncomment 2-4 lines in the /stories/__tests__/storyshots.test.ts file
  3. 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:closed
  • Created a year ago
  • Reactions:1
  • Comments:17 (3 by maintainers)

github_iconTop GitHub Comments

12reactions
jmcpeakcommented, May 3, 2022

I resolved this by updating my package.json file with this:

"resolutions": {
    "react-test-renderer": "18.1.0"
}
11reactions
MatejFackocommented, Jun 2, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found