title: Mocking React context provider in Jest with react-testing-library
body: <p>I have a fairly complex context that I wrap around my app to handle authentication and provide the associated data retrieved from the auth service. I'd like to bypass all of the functionality of the provider and just mock a return value. When the context renders, it performs a bunch of initialization functions that I don't want to happen when I test.</p>
  <p>I tried something like this in my wrapper function:</p>
  <pre><code>const mockValue = {
    error: null,
    isAuthenticated: true,
    currentUser: 'phony',
    login: jest.fn(),
    logout: jest.fn(),
    getAccessToken: jest.fn(),
  }
  
  const MockAuthContext = () =&gt; ( React.createContext(mockValue) )
  
  jest.mock(&quot;../contexts/AuthContext&quot;, () =&gt; ({
    __esModule: true,
    namedExport: jest.fn(),
    default: jest.fn(),
  }));
  
  beforeAll(() =&gt; {
    AuthContext.mockImplementation(MockAuthContext);
  });
  
  const customRender = (ui, { ...renderOpts } = {}) =&gt; {
    const ProviderWrapper = ({ children }) =&gt; (
        &lt;AuthContext.Provider&gt;
           {children}
        &lt;/AuthContext.Provider&gt;
    );
    return render(ui, { wrapper: ProviderWrapper, ...renderOpts });
  };
  
  // re-export everything
  export * from &quot;@testing-library/react&quot;;
  
  // override render method
  export { customRender as render };
  </code></pre>
  <p>Alas, I get an error:
  <code>Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.</code></p>
  <p>And, indeed, if I log what that Provider renders as, I get:</p>
  <pre><code>    {
        '$$typeof': Symbol(react.element),
        type: undefined,
        ...
  </code></pre>
  <p>I've tried setting the provider to AuthContext.getMockImplementation().Provider. No dice.</p>
  <p><strong>Anyway</strong>, does anyone see what I'm trying to accomplish here? I'd like to just mock the entire context so that the component just gets a provider that returns known values without executing any context code. Is that possible with react-testing-library and Jest?</p>