diff --git a/docs/source/development-testing/testing.mdx b/docs/source/development-testing/testing.mdx index 0f22cb09e4a..2e020c135ac 100644 --- a/docs/source/development-testing/testing.mdx +++ b/docs/source/development-testing/testing.mdx @@ -256,6 +256,70 @@ it("should render dog", async () => { }); ``` +## Testing with Suspense + +When testing components that use `useSuspenseQuery` or other [suspense hooks](../data/suspense/), wrap your React Testing Library `render` call in `await act()`. + +Unlike `useQuery`, which keeps the component mounted in a loading state while the request is in flight, `useSuspenseQuery` suspends the component immediately. Without `await act()`, the component stays suspended in your test environment and the test times out. + +For example, given this `Greeting` component that uses `useSuspenseQuery`: + +```jsx title="greeting.jsx" +import { Suspense } from "react"; +import { gql } from "@apollo/client"; +import { useSuspenseQuery } from "@apollo/client/react"; + +export const GET_GREETING_QUERY = gql` + query GetGreeting { + greeting { + message + } + } +`; + +export function Greeting() { + const { data } = useSuspenseQuery(GET_GREETING_QUERY); + return