测试由react-keycloak保护的页面

Question

在我的 React 应用程序中，我使用“react-keycloak/web”库中的 keycloak 和 KeycloakProvider。

某些路由使用 PrivateRoute 组件进行保护，该组件使用钩子提取 keycloak 状态useKeycloak()并检查用户是否已获得授权并具有正确的角色：

const [keycloak, initialized] = useKeycloak();

我的问题是测试我的 PrivateRoute 组件。无论我尝试什么，初始化始终保持错误，阻止页面渲染。

使用 useKeycloak.test.js 文件作为灵感，我制作了一个 MockAuthProvider 组件来包装我的测试：

import React from "react";
import { KeycloakProvider } from "@react-keycloak/web";

export const createKeycloakStub = () => ({
  init: jest.fn().mockResolvedValue(true),
  updateToken: jest.fn(),
  login: jest.fn(),
  logout: jest.fn(),
  register: jest.fn(),
  accountManagement: jest.fn(),
  createLoginUrl: jest.fn(),
  ...
});

interface MockedAuthProviderProps {
  children: React.ReactChild;
  mocks: { [key: string]: typeof jest.fn };
}

export const MockedAuthProvider = (props: MockedAuthProviderProps) => {
  const { children, mocks } = props;
  const defaultMocks = createKeycloakStub();
  const keycloak = { ...defaultMocks, ...mocks };

  return (
    <KeycloakProvider keycloak={keycloak}>
      {children}
    </KeycloakProvider>
  );
};

然后我在测试中使用它

<MockedAuthProvider mocks={keycloakMocks}>
  <MemoryRouter initialEntries={["/secret"]}>
    <PrivateRoute roles={roles} path="/secret">
      <div>Protected Content</div>
    </PrivateRoute>
  </MemoryRouter>
</MockedAuthProvider>

有没有人找到一种与 useKeycloak 结合成功测试组件或初始化为 true 的方法？

谢谢

Answer 1

我设法通过模拟钩子本身来解决这个问题。它并不像我希望的那么干净，但目前已经足够好了。

let mockInitialized = false;

jest.mock("@react-keycloak/web", () => {
  const originalModule = jest.requireActual("@react-keycloak/web");
  return {
    ...originalModule,
    useKeycloak: () =>  [
      mockKeycloakStub,
      mockInitialized
    ]
  };
})

然后，我可以在每个测试中设置 的值mockInitialized，具体取决于我想要的初始化状态。