Storybook 7.5.3升级至8.x.x（保留React16.x.x）测试报错求助

问题原因 #

• Storybook 8的@storybook/react-dom-shim是多版本兼容包，会根据环境的React版本自动加载对应适配文件（react-16.js或react-18.js）。但Storybook运行时和测试环境的模块解析逻辑存在差异：
  • Storybook自身运行时会通过内部版本检测机制，精准加载适配React16的shim文件；
  • 用react-testing-library测试Story时，模块解析没触发Storybook的版本检测逻辑，错误加载了适配React18的react-18.js文件。而React16不存在react-dom/client模块，因此抛出找不到模块的错误。
• pnpm的依赖隔离特性可能放大这个问题：shim包同时兼容多版本React，但测试环境的解析规则没匹配到React16对应的入口，反而拉取了React18的适配代码。

解决办法 #

1. 强制指定shim的React16入口 #

在测试框架配置文件中添加模块别名，直接将@storybook/react-dom-shim指向适配React16的文件：

• 若使用Jest，修改jest.config.js：

module.exports = {
  moduleNameMapper: {
    '@storybook/react-dom-shim': '<rootDir>/node_modules/@storybook/react-dom-shim/dist/react-16.js',
  },
};

• 若使用Vitest，修改vitest.config.js：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  resolve: {
    alias: {
      '@storybook/react-dom-shim': './node_modules/@storybook/react-dom-shim/dist/react-16.js',
    },
  },
});

2. 全局设置React版本标识 #

在测试入口文件（比如setupTests.js）中提前声明全局变量，告知shim当前使用React16：

globalThis.STORYBOOK_REACT_VERSION = '16';

这样@storybook/react-dom-shim会根据该变量自动加载对应版本的适配文件。

3. 排查pnpm依赖树 #

运行pnpm list react查看项目依赖树，确认没有嵌套安装的React18版本。若存在，在package.json中通过pnpm overrides强制锁定React版本：

{
  "pnpm": {
    "overrides": {
      "react": "16.13.1",
      "react-dom": "16.13.1"
    }
  }
}

内容的提问来源于stack exchange，提问作者Nischal Pandit