选择性React 18迁移：为Storybook单个Story配置React 18（Cypress测试）

在Storybook v6中，你可以通过**Story级别的参数（parameters）**覆盖全局React配置，实现单个或部分Story启用React 18的新渲染模式，具体操作如下：

1. 保留全局兼容配置 #

继续在Storybook全局配置中保持legacyRootApi: true，确保原有旧Story仍使用兼容React 17的渲染方式，避免现有测试持续失败：

// .storybook/main.js 或相关配置文件
module.exports = {
  // ...其他配置
  framework: {
    name: '@storybook/react',
    options: {
      reactOptions: {
        legacyRootApi: true,
      },
    },
  },
};

2. 为单个/部分Story启用React 18 #

针对需要切换到React 18的Story，通过parameters.reactOptions覆盖全局配置，将legacyRootApi设为false：

单个Story的单独配置

// 组件的Story文件
export const NewReact18CompatibleStory = () => <MyNewComponent />;

// 为该Story单独启用React 18渲染逻辑
NewReact18CompatibleStory.parameters = {
  reactOptions: {
    legacyRootApi: false,
  },
};

整个Story文件的批量配置

如果某个组件的所有Story都已适配React 18，可以在文件的默认导出中统一设置参数，让该文件下的所有Story都使用React 18：

export default {
  title: 'Components/MyUpdatedComponent',
  component: MyUpdatedComponent,
  // 该文件下所有Story启用React 18渲染
  parameters: {
    reactOptions: {
      legacyRootApi: false,
    },
  },
};

export const DefaultView = () => <MyUpdatedComponent />;
export const WithCustomProps = () => <MyUpdatedComponent foo="bar" />;

原理说明 #

Storybook v6的React框架支持通过Story/文件级别的parameters.reactOptions覆盖全局配置：当设置legacyRootApi: false时，该Story会使用React 18的createRoot API渲染，而非旧版render API，从而实现逐步迁移——新Story和已修复的Story用React 18，未修复的保持兼容模式。

内容的提问来源于stack exchange，提问作者Petr Savchenko