Stories for errorElements

[bostrom]

Hello,

I'm trying to figure out how to write stories for components used in the errorElement property in the router.

The initial thought is to treat the component as any component and just write a regular story for it.

But my error element uses useRouteError(), which won't be populated unless I throw an error in the loader, or perhaps populate the hydrationData.errors property in the router config. And if an error is encountered in the loader, then the story component won't be rendered, but the errorElement.

Hence, I could have a bogus component as story component, and the error component as errorElement, and throw an error in the loader.

const FakeComponent = () => <p>all is good</p>;

const meta: Meta<typeof FakeComponent> = {
  title: 'Errors/CustomError',
  component: FakeComponent,
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Error: Story = {
  parameters: {
    reactRouter: reactRouterParameters({
      routing: {
        id: 'app',
        path: '/',
        errorElement: <CustomError />,
        loader: () => {
          throw new Error('Oh no');
        },
      },
    }),
  },
};

Now the CustomError component renders instead of the real story component FakeComponent. However, all decorators are missing from the story, since the story component didn't render.

So, how can I reliably render an errorElement and have data returned from useRouteError() and have all the normal decorators in place?

[JesusTheHun]

So if I understand your issue correctly, your problem is that the decorators of your story are not rendered, because the real story is actually the error component, right ?

The first thing that comes to mind is to split the component : one that calls useRouteError() and one that accept the result of that call as a prop. This way you can make your story using the stateless component.

Also, the order of the decorators matters. It defines who wraps who. So if the router decorator comes first, even your error component will be wrapped, as you can see in this stackblitz : https://stackblitz.com/edit/storybook-addon-remix-react-router-d6htzf?file=src%2Fstories%2Fbasics.stories.tsx

[bostrom]

Yes, that's precisely the problem.

Good idea to split the component, that could surely be done. However, I went ahead and changed the order of my decorators, and voilà, the other decorators are now applied to the error component as well!

Problem solved. Thank you! 🙏