Mocking Auth0Client in @auth0 in jest

Question

I'm trying to mock out the import { Auth0Provider } from "@auth0/auth0-react"; in a react app and keep running into issues with this error [Error: For security reasons, window.crypto is required to run auth0-spa-js.] From what I can tell this error is coming from the Auth0Client which gets imported from import { Auth0Client } from '@auth0/auth0-spa-js'; My thought is to mock out the scoped module @auth0/auth0-spa-js and do something like this

const handleRedirectCallback = jest.fn(() => ({ appState: {} }));
const buildLogoutUrl = jest.fn();
const buildAuthorizeUrl = jest.fn();
const checkSession = jest.fn();
const getTokenSilently = jest.fn();
const getTokenWithPopup = jest.fn();
const getUser = jest.fn();
const getIdTokenClaims = jest.fn();
const isAuthenticated = jest.fn(() => false);
const loginWithPopup = jest.fn();
const loginWithRedirect = jest.fn();
const logout = jest.fn();

export const Auth0Client = jest.fn(() => {
  return {
    buildAuthorizeUrl,
    buildLogoutUrl,
    checkSession,
    handleRedirectCallback,
    getTokenSilently,
    getTokenWithPopup,
    getUser,
    getIdTokenClaims,
    isAuthenticated,
    loginWithPopup,
    loginWithRedirect,
    logout,
  };
});

This seems to be working if I import the Auth0Client into any of my tests, but the problem is that the Auth0Provider is still importing the non mocked out client. Is there anyway to get the Auth0Provider to import the mocked out Auth0Client instead of the actual implementation? The file that uses the Auth0Provider looks like this

// test-utils.js
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { MockedProvider } from '@apollo/client/testing';
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0Client } from '@auth0/auth0-spa-js';

// Import your own reducer
import applicationsReducer from "../app/slices/applications.slice";
import { UserProvider } from "../user-context";

import {getUserMock} from "../__tests__/apollo_mocks/get_user.mock"

// const MockedAuth0Provider = jest.requireActual("@auth0/auth0-react").Auth0Provider

function render(
  ui,
  {
    initialState,
    mocks,
    store = createStore(applicationsReducer, initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
              <Provider store={store}>
                <MockedProvider mocks={[getUserMock, ...mocks]} addTypename={false}>
                  <UserProvider>{children}</UserProvider>
                </MockedProvider>
              </Provider>
            </Auth0Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

Answer 1

Hopefully this helps someone else but I ended up mocking the provider as well as some of the other auth0 modules that I was using this way

jest.mock('@auth0/auth0-react', () => ({
  Auth0Provider: ({ children }) => children,
  withAuthenticationRequired: ((component, _) => component),
  useAuth0: () => {
    return {
      isLoading: false,
      user: { sub: "foobar" },
      isAuthenticated: true,
      loginWithRedirect: jest.fn()
    }
  }
}));

This is all in my setupTests.js file