求助：Storybook Play函数底部交互面板无记录显示

我在使用Storybook的Interactions addon和Play功能时遇到以下问题：

• 组件可正常显示，但交互面板无任何交互记录
• 在Play函数末尾添加断言代码时，断言会失败（对比的是点击前的初始视图）；移除断言后，页面会显示点击后的视图，但底部控制面板仍无运行记录

组件Story代码 #

export default {
  component: MyComponent,
  title: "My Component",
  args: {
    someId: "someId",
  },
  decorators: [
    (Story) => (
      <QueryClientProvider client={queryClient}>
        <Header />
        <Box sx={{ float: "right" }}>
          <Layout>
            <Story />
          </Layout>
        </Box>
      </QueryClientProvider>
    ),
  ],
} as ComponentMeta<typeof MyComponent>;

const Template: ComponentStory<typeof MyComponent> = (args: any) => {
  return <MyComponent {...args} />;
};
export const MyComponentWithInteraction = Template.bind({});
MyComponentWithInteraction.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const addButton = canvas.getAllByText("+ Add")[0];
  await userEvent.click(addButton);
};

Storybook依赖配置（devDependencies） #

"@storybook/addon-essentials": "6.5.16",
    "@storybook/addon-interactions": "6.5.16",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/builder-webpack5": "6.5.16",
    "@storybook/jest": "0.0.10",
    "@storybook/manager-webpack5": "6.5.16",
    "@storybook/react": "^6.5.15",
    "@storybook/testing-library": "0.0.13",
    "@types/storybook__addon-knobs": "^5.2.1",
    "@types/storybook__react": "^5.2.1",
    "msw-storybook-addon": "1.7.0",
    "tsconfig-paths-webpack-plugin": "4.0.0",
    "webpack": "5"

main.ts配置 #

module.exports = {
  stories: ["../src/**/*.stories.@(mdx|tsx|ts|jsx|js)"],
  logLevel: "debug",
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@storybook/addon-interactions",
    "msw-storybook-addon",
  ],
  framework: "@storybook/react",
  features: {
    interactionsDebugger: true,
  },
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      include: path.resolve(__dirname, "../src"),
    });
    config.resolve.plugins = [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, "../tsconfig.json"),
      }),
    ];
    return config;
  },
  core: {
    builder: "@storybook/builder-webpack5",
  },
  docs: {
    autodocs: true,
  },
};

异常细节 #

在Play函数末尾添加以下断言代码时：

await expect(canvas.getByText("Some text")).toBeInTheDocument();

断言失败，因为它对比的是点击前的初始视图；但移除该代码后，页面会显示点击后的视图，且底部控制面板无任何运行记录。

解决步骤 #

1. 统一Storybook包版本
   当前@storybook/react版本为6.5.15，其他核心包为6.5.16，版本不一致可能引发兼容性问题。执行命令统一版本：

   npm install @storybook/react@6.5.16 --save-dev
   

2. 规范userEvent的使用方式
   确保正确导入@storybook/testing-library提供的工具，并初始化userEvent：

   import { within, userEvent } from '@storybook/testing-library';
   
   MyComponentWithInteraction.play = async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const user = userEvent.setup(); // 先初始化userEvent
     const addButton = canvas.getAllByText("+ Add")[0];
     await user.click(addButton); // 使用初始化后的user对象执行点击
   };
   

3. 等待异步更新完成再断言
   如果组件点击后存在异步操作（如React Query请求），需要用waitFor等待元素加载完成：

   import { waitFor } from '@storybook/testing-library';
   
   // 在Play函数末尾添加
   await waitFor(() => {
     expect(canvas.getByText("Some text")).toBeInTheDocument();
   });
   

4. 排查装饰器干扰
   暂时移除装饰器中的QueryClientProvider、Header等元素，仅保留基础布局，验证交互记录是否恢复。若恢复，再逐步排查装饰器内组件的影响。

5. 重启Storybook服务
   确保配置变更后重启服务，使Interactions addon的设置生效。

内容的提问来源于stack exchange，提问作者Andi Keikha