How to mock a client with React Suspense enabled?

[sheldonbaker]

The docs suggest using the following as a mock client:

const mockClient = {
  executeQuery: jest.fn(() => never),
  executeMutation: jest.fn(() => never),
  executeSubscription: jest.fn(() => never),
};

My issue is that I have some React components, however, that depend upon a client with suspense: true enabled. Am I instead relegated to constructing a new Client({ suspense: true }) in my tests and just mocking out the fetch call?

[JoviDeCroock]

Why do you need a client with suspense: true sorry not understanding what you mean here 😅 like you need them to throw promises?

[sheldonbaker]

My apologies, I wasn't clear.

I have a generic "loader" component (that essentially just wraps a Suspense component) that I'd like to test.

// Loader.tsx
function Loader({ children }: Props) {
  return (
    <Suspense fallback="Some loading UI">
      {children}
    </Suspense>
  )
}

I'd like to test that a second component, say, WidgetsList (which uses useQuery inside), when nested in the Loader component, will appropriately show the "Some loading UI" while the query is fetching.

<Loader>
  <WidgetsList numToFetch={42}></WidgetsList>
</Loader>

The mockClient as described in my first comment, being just a plain object, doesn't let React know that it should trigger the Suspense-related magic, so the "Some loading UI" text will never show.

[JoviDeCroock]

We currently don't have a great answer to this, the way I would do it is by probably having a real client in there with the executeExchange similar to how we do our E2E tests 😅 https://github.com/urql-graphql/urql/blob/main/packages/react-urql/e2e-tests/useQuery.spec.tsx#L73 the delayExchange here simulates going from loading to not-loading.

I will check whether there is more we can do to help you out here

[kitten]

just to point this out; you can still follow the advice in the docs of mocking the entire Client or make sure that the Client never finishes fetching by giving it no exchanges to test the loading state.

That said, if your loading state component is this specific, what you're asking to test is basically both the urql bindings, @urql/core, and React themselves, and not necessarily just the logic of your own code

[sheldonbaker]

That's very true; I'll see about instantiating a real client and/or re-think the usefulness of the tests I had in mind.

Thanks!