How to provide context data to the Outlet in tests

[jacobleetodd]

Hi There!

In our _layout.tsx file I am providing context data to the outlet:

import { Outlet } from "react-router-dom";

<Outlet context={currentUser}

In my component I am then using the context data:

const currentUser = useOutletContext<CurrentUserFragment>();

But I am getting this error in my test (which makes sense):

Cannot read properties of null (reading 'data')

So how do I provide the context data to the Storybook test? I have been looking at the stories in the repo and the .dts files but nothing I've tried seems to work. Here is how we are currently setting up the Storybook tests:

export default {
  component: Proposals,
  decorators: [
    (Story) => (
      <UtilityContextProvider>
        <SavedViewContextProvider>
          <Story />
        </SavedViewContextProvider>
      </UtilityContextProvider>
    ),
    withRouter,
  ],
  parameters: {
    featureFlags: {
      [FeatureFlag.exportCustomizeSlide]: true,
    },
    reactRouter: reactRouterParameters({
      location: {
        path: AppRoutes.PROPOSALS,
      },
      routing: [
        { useStoryElement: true, path: AppRoutes.PROPOSALS },
        { element: <MockRoute name="ORDERS" />, path: AppRoutes.ORDERS },
      ],
    }),
  },
} satisfies Meta<typeof Proposals>;

Thanks in advance!