Reactjs 在Jest中使用React测试库模拟React上下文提供程序

我有一个相当复杂的上下文，我围绕我的应用程序处理身份验证，并提供从身份验证服务检索到的相关数据。我想绕过提供者的所有功能，只模拟一个返回值。当上下文呈现时，它执行一系列初始化函数，我不希望在测试时发生这些函数

我在包装器函数中尝试了如下操作：

const mockValue = {
  error: null,
  isAuthenticated: true,
  currentUser: 'phony',
  login: jest.fn(),
  logout: jest.fn(),
  getAccessToken: jest.fn(),
}

const MockAuthContext = () => ( React.createContext(mockValue) )

jest.mock("../contexts/AuthContext", () => ({
  __esModule: true,
  namedExport: jest.fn(),
  default: jest.fn(),
}));

beforeAll(() => {
  AuthContext.mockImplementation(MockAuthContext);
});

const customRender = (ui, { ...renderOpts } = {}) => {
  const ProviderWrapper = ({ children }) => (
      <AuthContext.Provider>
         {children}
      </AuthContext.Provider>
  );
  return render(ui, { wrapper: ProviderWrapper, ...renderOpts });
};

// re-export everything
export * from "@testing-library/react";

// override render method
export { customRender as render };

我已尝试将提供程序设置为AuthContext.getMockImplementation（）.provider。没有骰子

---

不管怎样，有人看到我在这里想要完成什么吗？我只想模拟整个上下文，以便组件只获得一个提供程序，该提供程序返回已知值，而不执行任何上下文代码。react测试库和Jest是否可能出现这种情况？

错误意味着

AuthContext.Provider

不是react组件

AuthContext

是Jest spy，即一个函数，它没有

Provider

属性。由于

AuthContext

应为React context，因此应将其定义为React context。对于默认导出，它应该是：

jest.mock("../contexts/AuthContext", () => ({
  __esModule: true,
  default: React.createContext()
}));

然后，可以在测试中提供任何模拟值，如下所示：

<AuthContext.Provider value={mockValue}>

什么是AuthContext，为什么需要模拟它？这可能是个问题。通常不需要模拟提供程序，因为新值可以通过

value

传递给它们。因此，我想我不清楚我试图避免的是在提供程序中执行一堆代码。当它装载时，会发生一系列配置和身份验证数据检查。我想在测试时短路所有这些，这样它只会无声地返回我在

值中给出的值。我想我想出了一个不错的办法，在Provider组件上设置一个
testMode
标志prop，这样它只返回值（以及相关的mock jest.fn（）），而忽略其余的Provider初始化。事实证明，如果我这样做的话，我不需要嘲笑上下文本身。啊，更不用说黑客了。谢谢，我准备好了，不过为了教育的目的，我稍后会试一试。谢谢
<AuthContext.Provider value={mockValue}>