Reactjs React jest mocking useAuth0无法解构属性'；孤岛加载'；未定义的

我试图从

@auth0/auth0 react

模拟

useAuth0

，但遇到返回模拟值的问题。我目前有一个使用

useAuth0

import React, { createContext } from 'react';
import { useAuth0 } from "@auth0/auth0-react";

export const UserContext = createContext();

export const UserProvider = props => {
    const {
        isLoading
    } = useAuth0();
    
    return (
        props.children
    )
};

此提供程序正在我的测试中的自定义

呈现

函数中使用

// 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 your own reducer
import applicationsReducer from "../app/slices/applications.slice";
import { UserProvider } from "../user-context";

function render(
  ui,
  {
    initialState,
    mock,
    store = createStore(applicationsReducer, initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>
              <MockedProvider mocks={mock} addTypename={false}>
                <UserProvider>{children}</UserProvider>
              </MockedProvider>
            </Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

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

该模拟的代码如下所示

export const withAuthenticationRequired = jest.fn().mockImplementation((component, _) => {
    return component
})

export const useAuth0 = jest.fn().mockReturnValue({
  error: null,
  isAuthenticated: true,
  isLoading: true,
  user: {},
})

带有AuthenticationRequired的

模拟可以正常工作，但是
useAuth0
会不断抛出错误
Error:Uncaught[TypeError:Cannot destructure属性'isLoading'of'（0，_auth0React.useAuth0）（…），因为它是未定义的。]
我已经为此挣扎了几个小时，如果有任何帮助，我将不胜感激。
最终发现，我的测试utils中缺少了
Auth0Provider
：

// 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 your own reducer
import applicationsReducer from "../app/slices/applications.slice";
import { UserProvider } from "../user-context";

function render(
  ui,
  {
    initialState,
    mock,
    store = createStore(applicationsReducer, initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
              <Provider store={store}>
                <MockedProvider mocks={mock} 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 }

//test-utils.js
从“React”导入React
从'@testing library/react'导入{render as rtlRender}
从“redux”导入{createStore}
从“react redux”导入{Provider}
从“@apollo/client/testing”导入{MockedProvider}；
从“@auth0/auth0 react”导入{Auth0Provider}”；
//进口你自己的减速机
从“./app/slices/applications.slice”导入applicationsReducer；
从“./用户上下文”导入{UserProvider}；
函数渲染(
ui，
{
初始状态，
嘲弄
store=createStore（applicationsReducer，initialState），
…渲染
} = {}
) {
函数包装器（{children}）{
返回
{儿童}
}
返回rtlRender（ui，{wrapper:wrapper，…renderOptions}）
}
//转口一切
从“@testing library/react”导出*
//覆盖渲染方法
导出{render}

// 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 your own reducer
import applicationsReducer from "../app/slices/applications.slice";
import { UserProvider } from "../user-context";

function render(
  ui,
  {
    initialState,
    mock,
    store = createStore(applicationsReducer, initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
              <Provider store={store}>
                <MockedProvider mocks={mock} 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 }