測試由 react-keycloak 保護的頁面

Question

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

某些路由使用 PrivateRoute 組件進行保護，該組件使用useKeycloak()鈎子拉取 keycloak 狀態並檢查用戶是否已獲得授權並具有正確的角色：

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的值，具體取決於我想要的初始化狀態。