reactjs - 使用 react-testing-library 在 Jest 中模拟 React 上下文提供程序

Question

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

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 };

唉，我收到一个错误: 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.而且，确实，如果我记录该 Provider 呈现的内容，我会得到:

    {
      '$$typeof': Symbol(react.element),
      type: undefined,
      ...

我已经尝试将提供者设置为 AuthContext.getMockImplementation().Provider。没有骰子。
反正 ，有没有人看到我想在这里完成什么？我只想模拟整个上下文，以便组件只获取一个返回已知值的提供程序，而无需执行任何上下文代码。使用 react-testing-library 和 Jest 可以吗？

Answer 1

错误意味着 AuthContext.Provider不是 React 组件。 AuthContext是 Jest spy，即一个函数，它没有 Provider属性(property)。自 AuthContext应该是 React 上下文，它应该被定义为这样。对于默认导出，它应该是:

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

然后可以在测试中提供任何模拟值:

<AuthContext.Provider value={mockValue}>