Storyshots is not working with React 18

[EugeneDraitsev]

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)

[Stunext]

You need to wait for version ^6.5 or use some of the alpha or beta versions. Keep in mind that as an "alpha/beta" version not all bugs are fixed.

[jmcpeak]

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

"resolutions": {
    "react-test-renderer": "18.1.0"
}

[EugeneDraitsev]

It seems like we have working workaround with resolutions for "react-test-renderer": "18.1.0", so I'll close this issue

[frbl]

I have:

• React pinned on 18.1.0
• React-dom pinned on 18.1.0
• react-test-renderer pinned on 18.1.0

And that didn't solve the issue for me.

You need to wait for version ^6.5 or use some of the alpha or beta versions. Keep in mind that as an "alpha/beta" version not all bugs are fixed.

I've upgraded to the prerelease versions (^6.5.5) for storybook and still the issue persists. Any other ideas?

[MatejFacko]

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.

[MatejFacko]

@shilman workaround doesn't work as well.

[thienna]

I am using testing lib for render and got the same issue

[mvarendorff]

A related PR has been merged a couple hours ago: https://github.com/storybookjs/storybook/pull/18296; as of now, there hasn't been a new release though

[shilman]

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 @future NPM tag to try it out!

npx sb upgrade --prerelease

[bonesoul]

it would be also good if #18926 was backported to 6.5.10 release.

[bonesoul]

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:

  ● Storyshots › Components/Molecules/Index › Title

    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:18)
      at node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:9:24
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/snapshotsTestsTemplate.js:29:24)

[mvarendorff]

@bonesoul It was not included in 6.5.10; I can neither see the MR nor the issue mentioned in the release notes.

[bonesoul]

@geisterfurz007 right, sorry for the misreport. I thought for a second that it was included in the release.

[aliceathens]

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 @future NPM tag to try it out!

npx sb upgrade --prerelease

I upgraded to the prerelease but still get the same issue doesn't work for me..

[sawadyecma]

Please let me report. I see that v6.5.13 has the same issue.

I tried without resoultions and tried with it. Specifying resolutions of react-test-renderer:18.1.0 doesn't seem to solve the problem.

[sawadyecma]

Sorry... I mistook about specifying dependency of dependency. → https://github.com/storybookjs/storybook/issues/17985#issuecomment-1310136737

When I use npm >= 8, I should have edit package.json bellow.

{
  ...
  "overrides": {
    "react-test-renderer": "18.1.0"
  }
}

In my enviroment, storyshot worked correctly !

[dennispio]

Working for react-test-renderer 18.1.0, but not on 18.2.0 :-)