在Storybook中测试GraphQL&Apollo React表单时遇MockedProvider未定义错误

在Storybook中测试使用GraphQL和Apollo的React表单组件时，出现以下错误：

Error: Cannot destructure property 'MockedProvider' of 'context.parameters[PARAM_KEY]' as it is undefined.

相关代码 #

.storybook/Preview.ts #

import type { Preview } from "@storybook/react";

import { MockedProvider } from '@apollo/client/testing';
import { ADD_PATIENT } from '../src/features/AddPatientForm/AddPatientForm.gql';


const newPatientData = {
  id: 7,
  key: 7,
  name: "Ahmed Taha",
  email: "ahmed@gmail.com",
  age: 34,
  gender: "male",
  phone: "01113334445",
  country: "Russia",
};


const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export const parameters = {
  apolloClient: {
    MockedProvider,
    // any props you want to pass to MockedProvider on every story
    globalMock: [
    {
      request: {
        query: ADD_PATIENT,
        variables: { data: newPatientData },
      },
      result: { data: newPatientData },
    },
    ]
  },
};

export default preview;

Form.stories.tsx #

import type { Meta, StoryObj } from "@storybook/react";
import AddPatientForm from "./AddPatientForm";

const meta: Meta<typeof AddPatientForm> = {
  component: AddPatientForm,
  title: "Add Patient Form",
  tags: ["autodocs"],
};
export default meta;

type Story = StoryObj<typeof AddPatientForm>;

export const Basic: Story = {};

export const Primary: Story = {
  args: {
    primary: true,
  },
  render: () => <AddPatientForm />,
};

• 检查Storybook Apollo插件的安装与配置
  确保已安装@storybook/addon-apollo-client依赖，未安装则执行对应包管理命令：

  npm install @storybook/addon-apollo-client --save-dev
  # 或 yarn add @storybook/addon-apollo-client --dev
  # 或 pnpm add @storybook/addon-apollo-client -D
  

  同时在.storybook/main.ts的addons数组中添加该插件：

  export default {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
      "@storybook/addon-links",
      "@storybook/addon-essentials",
      "@storybook/addon-onboarding",
      "@storybook/addon-interactions",
      "@storybook/addon-apollo-client" // 新增这一行
    ],
    // ...其他配置
  };
  

• 修正全局参数的配置位置
  当前代码将apolloClient参数单独导出，不符合Storybook参数配置规范，需将其合并到preview对象的parameters中，删除单独导出的parameters：

  const preview: Preview = {
    parameters: {
      actions: { argTypesRegex: "^on[A-Z].*" },
      controls: {
        matchers: {
          color: /(background|color)$/i,
          date: /Date$/i,
        },
      },
      // 把apolloClient参数移到这里
      apolloClient: {
        MockedProvider,
        globalMock: [
          {
            request: {
              query: ADD_PATIENT,
              variables: { data: newPatientData },
            },
            result: { data: newPatientData },
          },
        ]
      },
    },
  };
  
  export default preview;
  // 删掉下面这行
  // export const parameters = { ... }
  

• 验证故事组件的渲染逻辑
  若Apollo插件配置正确，无需在故事的render方法中手动渲染组件，插件会自动用MockedProvider包裹所有故事组件。可尝试移除Primary故事中的render属性，改用默认的args驱动渲染：

  export const Primary: Story = {
    args: {
      primary: true,
    },
    // 删掉render属性
  };
  

• 检查依赖版本兼容性
  确认@storybook/react、@apollo/client和@storybook/addon-apollo-client的版本相互兼容，避免因版本不匹配导致参数无法被插件识别。可查阅各包的官方文档确认支持的版本范围。

内容的提问来源于stack exchange，提问作者Ahmed Elbessfy