testing react form using GraphQl & apollo client at Storybook

Question

I have a React Form Component using Graphql & Apollo. I am trying to test this Form at Storybook but I got the following error message :

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

here is my Preveiw.ts file content:

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: "[email protected]",
  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;

and here is my Form.stories.tsx file content:

  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 />,
};

Do you have any clue what could be wrong? or what should I look for?

Ahmed ElbessfyAhmed Elbessfy 1251 silver badge11 bronze badges · Accepted Answer · 2023-10-19 14:49:10Z

Ok the solution was that I needed to add the core attribute and rename preview.ts to preview.tsx so I can use JSX, fix the parameters, and create the decorators that will wrap the stories

here is the corrected version of code :

main.ts file

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  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",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  core: {
    builder: "@storybook/builder-vite", // 👈 The builder enabled here.
  },
};
export default config;

preview.tsx file:

import React from "react";
import type { Decorator, 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: "[email protected]",
  age: 34,
  gender: "male",
  phone: "01113334445",
  country: "Russia",
};

const parameters: Preview["parameters"] = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/i,
    },
  },
  apolloClient: {
    MockedProvider,
    // any props you want to pass to MockedProvider on every story
    globalMock: [
      {
        request: {
          query: ADD_PATIENT,
          variables: newPatientData,
        },
        result: { data: newPatientData },
      },
    ],
  },
};

const preview: Preview = {
  parameters,
};

export const decorators: Decorator[] = [
  (Story) => (
    <MockedProvider
      mocks={parameters.apolloClient.globalMock}
      addTypename={false}
    >
      <Story />
    </MockedProvider>
  ),
];

export default preview;

I hope this helps someone when s/he is in my situation. If this was helpful, please consider upvoting since I have a low rate I may get blocked soon. Thank you.

testing react form using GraphQl & apollo client at Storybook