Question

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

某些路由通过使用PrivateRoute组件进行保护，该组件使用useKeycloak()挂钩拉出密钥隐藏状态，并检查用户是否被授权并具有正确的角色：

const [keycloak, initialized] = useKeycloak();

我的问题与测试我的PrivateRoute组件有关。无论我尝试初始化什么，始终保持为false，从而阻止页面呈现。

以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的值，具体取决于我希望的初始化状态是什么。

测试由react-keycloak保护的页面

1 个答案: