[Bug]: @storybook/addon-storyshots is not compatible with react 18

[barroudjo]

Describe the bug

storyshots with react v18 throws react-test-renderer TypeError: Cannot read properties of undefined

This is due to @storybook/[email protected] having the following dependency for react-test-renderer: ^16.8.0 || ^17.0.0 which is incompatible with react v18.

Using resolutions in package.json solves the problem, but it should really be solved in @storybook/addon-storyshots dependencies by allowing react-test-renderer@18.
"resolutions": { "react-test-renderer": "18.2.0" }

To Reproduce

@storybook/[email protected] and [email protected]

System

No response

Additional context

No response

[KorySchneider]

The resolutions workaround did not work for me, but updating @storybook/addon-storyshots and @storybook/addon-storyshots-puppeteer to @future (currently 7.0.0-alpha.40) seems to have fixed it.

@shilman It would be great to get this change released on 6.x, I'm not terribly happy about having storyshot deps on an unstable version while all the other storybook deps are on 6.x

[shilman]

@KorySchneider pretty sure that would be a breaking change. any idea why the resolutions workaround didn't work?

[KorySchneider]

@shilman Ah I see. Not sure why the resolutions didn't work...I'm using pnpm so potentially a bug with that?

[shilman]

@KorySchneider did you try overrides? https://pnpm.io/package_json#pnpmoverrides

[KorySchneider]

@shilman Yep that's what I used. resolutions is just an alias for overrides. I tried it two ways:

"overrides": {
  "react-test-renderer": "18.2.0"
}

and

"overrides": {
  "@storybook/addon-storyshots>react-test-renderer": "18.2.0"
}

[barroudjo]

Have you checked in your node_modules the package version of react-test-renderer to see if the overrides/resolutions were respected ? Le lun. 24 oct. 2022, 16:08, Kory Schneider ***@***.***> a écrit :

…

@shilman <https://github.com/shilman> Yep that's what I used. resolutions is just an alias for overrides. I tried it two ways: "overrides": { "react-test-renderer": "18.2.0" } and "overrides": { ***@***.***/addon-storyshots>react-test-renderer": "18.2.0" } — Reply to this email directly, view it on GitHub <#19541 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABY45AWULJIGW2SNZ64Q4U3WE2J55ANCNFSM6AAAAAARJDTE2Q> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[KorySchneider]

@barroudjo I believe I did but I'll try it again soon and see what I see. What I do remember is that in the logs, the TypeError was coming from [email protected] (with the overrides set in package.json)

[coolboy0961]

This solution fixed my problem.

"overrides": {
"react-test-renderer": "18.2.0"
}

steps

1. add overrides setting in package.json
2. delete node_modules and package-lock.json
3. npm install
4. execute npx jest --clearCache
5. npm run test

[barroudjo]

This solution fixed my problem.

"overrides": { "react-test-renderer": "18.2.0" }

steps

1. add overrides setting in package.json
2. delete node_modules and package-lock.json
3. npm install
4. execute npx jest --clearCache
5. npm run test

Yeah my bad, my solution with "resolutions": { "react-test-renderer": "18.2.0" } was for yarn, the solution if you use npm is "overrides": { "react-test-renderer": "18.2.0" }

[jonniebigodes]

The Storyshots addon is officially deprecated and will be removed in a future release of Storybook. To help with the transition process, we've created a migration guide for the available options and common use cases.