How to test components that rely on root loader data?

[garth]

  it('loads data from root', ({ expect }) => {
    const Stub = createRoutesStub([
      {
        id: 'root',
        Component() {
          return <Outlet />
        },
        loader: () => ({
          name: 'John Doe',
        }),
        children: [
          {
            path: '/',
            Component: () => {
              const data = useRouteLoaderData('root')
              return <div data-testid="name">{data.name}</div>
            },
          },
        ],
      },
    ])
    const page = render(<Stub />)

    expect(page.getByTestId('name').innerHTML).toEqual('John Doe')
  })

Running the above test it seems that the child component is not executed. Documentation for createRoutesStub seems to be a little thin, any suggestions how to test components that rely on loader data from 'root'?

[punkpeye]

@garth Have you ever figured out?

[punkpeye]

Finally got it to work:

export default {
  decorators: [
    (Story) => {
      const Stub = createRoutesStub([
        {
          children: [
            {
              Component: Story,
              id: 'story',
              index: true,
            },
          ],
          Component: Outlet,
          id: 'root',
          loader: () => {
            return {
              appGlobal: {
                config: { CLIENT_ASSETS_URL: 'http://localhost:5173' },
              },
            };
          },
          path: '/',
        },
      ]);

      return <Stub />;
    },
  ],
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/iu,
        date: /date$/iu,
      },
    },
  },
} satisfies Preview;

This issue led to a working solution: #12494 (comment)

[rossipedia]

The child component is executed, but since you're not supplying any hydrationData to the <Stub />, there's no loader data present during the initial render, and getByTestId() fails.

A quick fix is to wait for the successive re-renders after the loader is executed and the Router state updates:

-  expect(page.getByTestId('name').innerHTML).toEqual('John Doe')
+  expect(await page.findByTestId('name').innerHTML).toEqual('John Doe')

Or you can supply the hydration data direction to the <Stub>:

render(
  <Stub hydrationData={{
    loaderData: {
      root: {
        name: 'John Doe',
      },
    },
  }} />,
);