Zenn
Closed6

StoryBookのStoryshotsアドオンがReact18で動かない時の対応

masashimasashi

エラー内容は TypeError: Cannot read properties of undefined (reading 'current')が生じた
Storybookのissueにてドンピシャの内容があった Storyshots is not working with React 18

 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)
masashimasashi

以下のバージョンで解決

  • storybook: 6.5.10
  • React: 18.2.0
  • react-dom: 18.2.0
  • react-test-render: 18.2.0

package.jsonに次を追記

  "resolutions": {
    "react-test-renderer": "18.2.0"
  },
masashimasashi

なんとresolutionsを追記した状態では、yarn add @storybook/addon-storyshots --devが動かず
、次のエラーが発生

error An unexpected error occurred: "https://registry.yarnpkg.com/react-test-rerender: Not found".
masashimasashi

一度resolutionsを削除し、再度yarn add @storybook/addon-storyshots --devを実行でインストールは成功
その後resolutionsを追記した後は、再度yarn installを実行すること

このスクラップは2022/08/15にクローズされました