title: Apollo client setContext is not a function when running tests with Jest
body: <p>I've been updating a frontend application developed using <strong>React 16 (CRA 3 ejected)</strong> to <strong>React 17</strong> in order to use MUI5 and other newest resources.</p>
  <p>However, at some point (I don't know exactly when it started) my tests broke with the following message:</p>
  <pre><code> TypeError: (0 , _context3.setContext) is not a function
  
        14 |   useEffect(() =&gt; {
        15 |     const initClient = async () =&gt; {
      &gt; 16 |       const link = await (async () =&gt; setContext(() =&gt; ({
           |                                       ^
        17 |         headers: {
        18 |           'myHeaderInfoKey': myPublicHeader,
        19 |         },
  
  </code></pre>
  <p>This same test was working before other library updates. I haven't updated the Jest or apollo versions.</p>
  <p><strong>The updates:</strong></p>
  <ul>
  <li>&quot;@babel/core&quot;: &quot;^7.17.9&quot; from 7.7.4</li>
  <li>&quot;react&quot;: &quot;17.0.2&quot; from 16.12.0</li>
  <li>&quot;react-dom&quot;: &quot;17.0.2&quot; from 16.12.0</li>
  <li>&quot;babel-loader&quot;: &quot;^8.2.5&quot; from 8.0.6</li>
  <li>&quot;babel-loader&quot;: &quot;8.0.6&quot; from 7.4.0</li>
  </ul>
  <p><strong>The additions</strong></p>
  <ul>
  <li>&quot;@babel/eslint-parser&quot;: &quot;^7.17.0&quot;</li>
  <li>&quot;@babel/plugin-syntax-class-properties&quot;: &quot;^7.12.13&quot;,</li>
  <li>&quot;@babel/plugin-syntax-class-properties&quot;: &quot;^7.12.13&quot;,</li>
  <li>&quot;@babel/preset-react&quot;: &quot;^7.16.7&quot;,</li>
  <li>&quot;@babel/preset-react&quot;: &quot;^7.16.7&quot;,</li>
  </ul>
  <p><strong>Kept:</strong></p>
  <ul>
  <li>&quot;jest&quot;: &quot;24.9.0&quot;,</li>
  <li>&quot;babel-jest&quot;: &quot;^24.9.0&quot;,</li>
  <li>&quot;@apollo/client&quot;: &quot;^3.1.2&quot;,</li>
  </ul>
  <p>The jest.config.json is like this:</p>
  <pre><code>{
    &quot;roots&quot;: [
      &quot;&lt;rootDir&gt;/src&quot;
    ],
    &quot;collectCoverageFrom&quot;: [
      &quot;src/**/*.{js,jsx,ts,tsx}&quot;,
      &quot;!src/**/*.d.ts&quot;
    ],
    &quot;setupFiles&quot;: [
      &quot;react-app-polyfill/jsdom&quot;
    ],
    &quot;setupFilesAfterEnv&quot;: [],
    &quot;testMatch&quot;: [
      &quot;&lt;rootDir&gt;/src/**/__tests__/**/*.{js,jsx,ts,tsx}&quot;,
      &quot;&lt;rootDir&gt;/src/**/*.{spec,test}.{js,jsx,ts,tsx}&quot;
    ],
    &quot;testEnvironment&quot;: &quot;jest-environment-jsdom-fourteen&quot;,
    &quot;transform&quot;: {
      &quot;^.+\\.(js|jsx|ts|tsx)$&quot;: &quot;babel-jest&quot;,
      &quot;^.+\\.css$&quot;: &quot;&lt;rootDir&gt;/config/jest/cssTransform.js&quot;,
      &quot;^(?!.*\\.(js|jsx|ts|tsx|css|json)$)&quot;: &quot;&lt;rootDir&gt;/config/jest/fileTransform.js&quot;
    },
    &quot;transformIgnorePatterns&quot;: [
      &quot;[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$&quot;,
      &quot;^.+\\.module\\.(css|sass|scss)$&quot;
    ],
    &quot;modulePaths&quot;: [
      &quot;&lt;rootDir&gt;/src&quot;
    ],
    &quot;moduleNameMapper&quot;: {
      &quot;^react-native$&quot;: &quot;react-native-web&quot;,
      &quot;^.+\\.module\\.(css|sass|scss)$&quot;: &quot;identity-obj-proxy&quot;
    },
    &quot;moduleFileExtensions&quot;: [
      &quot;web.js&quot;,
      &quot;js&quot;,
      &quot;web.ts&quot;,
      &quot;ts&quot;,
      &quot;web.tsx&quot;,
      &quot;tsx&quot;,
      &quot;json&quot;,
      &quot;web.jsx&quot;,
      &quot;jsx&quot;,
      &quot;node&quot;
    ],
    &quot;watchPlugins&quot;: [
      &quot;jest-watch-typeahead/filename&quot;,
      &quot;jest-watch-typeahead/testname&quot;
    ]
  }
  
  </code></pre>
  <p><strong>Edit</strong>
  Here is the test file:</p>
  <pre><code>import React from 'react';
  import { renderHook, act } from '@testing-library/react-hooks'; // eslint-disable-line import/no-extraneous-dependencies
  import { ApolloLink } from '@apollo/client';
  import { SchemaLink } from '@apollo/client/link/schema';
  import useApiClient from './useApiClient';
  
  const triggerConnection = ({ apiUrl= '', xApiHeaderPublic = '', sleepTime = 0 }) =&gt; {
    const { client } = useApiClient({ apiUrl, xApiHeaderPublic, sleepTime });
    return { client };
  };
  
  test('Connects to a url', async () =&gt; {
    const wrapper = ({ children }) =&gt; &lt;div&gt;{children}&lt;/div&gt;;
    const { result, waitForNextUpdate } = renderHook(() =&gt; triggerConnection({
      apiUrl: '',
      xApiHeaderPublic: '',
      sleepTime: 0,
    }), { wrapper });
    await act(async () =&gt; {
      await waitForNextUpdate();
    });
    expect(result.current.client).toBeTruthy();
    expect(result.current.client.link).toBeTruthy();
    expect(result.current.client.link instanceof ApolloLink).toBeTruthy();
    expect(result.current.client.link instanceof SchemaLink).toBeFalsy();
  });
  </code></pre>
  <p>Here is the <strong>useApiClient</strong>:</p>
  <pre><code>import { useState, useEffect } from 'react';
  import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
  import { setContext } from '@apollo/client/link/context';
  
  const useApiClient= (
    {
      apiUrl,
      xApiHeaderPublic,
      sleepTime,
    } = { apiUrl: '', sleepTime: null },
  ) =&gt; {
    const [client, setClient] = useState(null);
  
    useEffect(() =&gt; {
      const initClient = async () =&gt; {
        const link = await (async () =&gt; setContext(() =&gt; ({
          headers: {
            'myHeaderInfoKey': myPublicHeader,
          },
          uri: apiUrl,
        })).concat(new HttpLink()))();
  
        setClient(
          new ApolloClient({
            cache: new InMemoryCache(),
            link,
          }),
        );
      };
  
      initClient();
    }, [apiUrl, xApiHeaderPublic, sleepTime]);
  
    return { client };
  };
  
  export default useApiClient;
  
  </code></pre>
  <p>Can anyone give me a tip about how to handle it?</p>