T
TanStack•15mo ago
afraid-scarlet

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();
  
  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();
  
  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();
  
  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!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?