How to test the client with Jest?

[blakewilson]

Hi y'all, thank you for this package! I'm excited to see support coming for the app router. I was curious how I could go about testing the client in Jest? It seems I get an error because I'm not in the proper server context (createContext exists on react):

`registerApolloClient` should only be used in a React Server Component context - in Client Components, use the `ApolloNextAppProvider`!

However, it doesn't seem there is any way to control this from a testing perspective. For example, here is a simplified test that tries to ensure the http link is called with the appropriate uri:

import React from 'react';
import * as apolloClient from '@apollo/client';
import * as ApolloAppSupportRSC from '@apollo/experimental-nextjs-app-support/rsc';

test('apollo client uses http link', () => {
  const httpLinkSpy = jest.spyOn(apolloClient, 'createHttpLink');

  const { getClient } = ApolloAppSupportRSC.registerApolloClient(() => {
    return new apolloClient.ApolloClient({
      cache: new apolloClient.InMemoryCache(),
      link: apolloClient.createHttpLink({
        // this needs to be an absolute url, as relative urls cannot be used in SSR
        uri: 'http://example.com/api/graphql',
        // you can disable result caching here if you want to
        // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
        // fetchOptions: { cache: "no-store" },
      }),
    });
  });

  expect(httpLinkSpy).toHaveBeenCalledTimes(1);

  expect(httpLinkSpy).toHaveBeenCalledWith({
    uri: 'http://example.com/api/graphql',
  });
});

Obviously this is a simplified test, but we are building a framework on top of this experimental package, and having a way to test these things would be extremely helpful.

Any guidance would be appreciated!

[plausible-phry]

Hi Blake,
honestly, at this point there is just no "right" way to test RSC, since it's pretty much impossible to replicate the environment they are running in (as you experience here).

You could use jest to mock the react package to not have a createContext property (or, even better, be the actual RSC import of react, and not the browser import), or you could extract out the createClient function and test that in separation.

Alternatively (and this is what I would recommend) you could switch over to an integration testing approach - we are using Playwright and it is working great for us: https://github.com/apollographql/apollo-client-nextjs/tree/main/integration-test

[plausible-phry]

One more idea: you could try to start jest with a node resolution condition to favor "react-server" imports:

node --conditions=react-server path/to/jest ...

(Note: I haven't tested this and I don't know if jest maybe overwrites this node behaviour.)

[blakewilson]

Thanks for your response @plausible-phry! Playwright has been on my mind lately, maybe its time to make the switch.

[phryneas]

I'm doing some housekeeping so I'm closing some older issues that haven't seen activity in a while.
If this is still relevant, please feel free to reopen the issue.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.