React Router 7 - Component doesn't render on GitLab CI #12914

ArthurGuez · 2025-01-30T16:28:10Z

ArthurGuez
Jan 30, 2025

After upgrading to React Router 7.1.2, one of our tests intermittently fails on GitLab CI (4 times out of 5), but always passes locally.

The test is supposed to check whether the component renders properly, including the header and footer. However, on CI, only is rendered, and adding a fallback component (HydrateFallback: () => <Loading />) results in only <Loading /> appearing.

The test:

vi.mock('@/services/menu', () => ({ getMenu: vi.fn() }));

const MOCK_LAYOUT_LOADER_DATA = {
  data: { api_hash: 'hash', api_version: '1.0.0' },
  ok: true,
};

function HydrateTheme({ theme }: { theme: Theme }) {
  useHydrateAtoms([[themeAtom, theme]]);
  return <Layout />;
}

function LayoutProvider({ theme }: { theme: Theme }) {
  return (
    <Provider>
      <HydrateTheme theme={theme} />
    </Provider>
  );
}

describe('Layout', () => {
  vi.mocked(getMenu).mockResolvedValue(MOCK_MENU);

  it('should render header and footer', async () => {
    const Stub = createRoutesStub([
      {
        Component: () => <LayoutProvider key="auto" theme="auto" />,
        loader: () => MOCK_LAYOUT_LOADER_DATA,
        path: HOME_PATH,
      },
    ]);

    render(<Stub />);

    expect(await screen.findByTestId('header')).toBeInTheDocument();
    expect(await screen.findByTestId('footer')).toBeInTheDocument();
  });
});

The test failing on the CI:

apps/client test:  FAIL  src/components/templates/Layout/Layout.test.tsx > Layout > should render header and footer
apps/client test: TestingLibraryElementError: Unable to find an element by: [data-testid="header"]
apps/client test: Ignored nodes: comments, script, style
apps/client test: <body>
apps/client test:   <div />
apps/client test: </body>

Could this be a timing issue with loaders in React Router 7?
Is there something missing in how we're handling loaders?

Any insights or suggestions would be greatly appreciated! 🚀
Thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Router 7 - Component doesn't render on GitLab CI #12914

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

React Router 7 - Component doesn't render on GitLab CI #12914

ArthurGuez Jan 30, 2025

Replies: 0 comments

ArthurGuez
Jan 30, 2025