TanStackT
TanStack•2y ago
brilliant-lime

Testing react query with Suspense and react testing library

I have a simple test like this

  const { user, debug } = await setup(
    <Suspense fallback={<div>loading</div>}>
      <IdentityProvider>
        <AuthorizationProvider>
          <Actions ... />
        </AuthorizationProvider>
      </IdentityProvider>
    </Suspense>
  );

  expect(await screen.findByText("loading")).toBeVisible();

  expect(await screen.findByRole("button", { name: /open menu/i })).toBeInTheDocument();


But it gets stuck in loading. Both IdentityProvider and AuthorizationProvider are simple contexts that use useSuspenseQuery. Both queries are mocked with MSW.

It works if I do this.

  const { user, debug } = await setup(
    <Suspense fallback={<div>loading</div>}>
      <IdentityProvider>
        <div>hello world</div>
      </IdentityProvider>
    </Suspense>
  );

  expect(await screen.findByText("loading")).toBeVisible();
  expect(await screen.findByText("hello world").toBeInTheDocument();


or this

  const { user, debug } = await setup(
    <Suspense fallback={<div>loading</div>}>
      <AuthorizationProvider>
         <div>hello world</div>
      </AuthorizationProvider>
    </Suspense>
  );

  expect(await screen.findByText("loading")).toBeVisible();
  expect(await screen.findByText("hello world").toBeInTheDocument();


So it's only when I have multiple nested providers it fails.
Any ideas would be much appreciated!
Was this page helpful?