React：如何模拟 Auth0 以使用 Jest 进行测试

我正在使用 React（react-create-app 和 TypeScript）。使用 Auth0 进行登录。

我想用 Jest 编写测试，我发现这个资源基本上是唯一谈论模拟 Auth0 对象的资源。

所以我的代码如下所示：

import React from "react";
import ReactDOM from "react-dom";
import TopBar from "./index";
import {
  useAuth0
} from "react-auth0-spa";

const user = {
  email: "[email protected] /cdn-cgi/l/email-protection",
  email_verified: true,
  sub: "google-oauth2|12345678901234"
};

// intercept the useAuth0 function and mock it
jest.mock("react-auth0-spa");

describe("First test", () => {
  beforeEach(() => {
    // Mock the Auth0 hook and make it return a logged in state
    useAuth0.mockReturnValue({
      isAuthenticated: true,
      user,
      logout: jest.fn(),
      loginWithRedirect: jest.fn()
    });
  });

  it("renders without crashing", () => {
    const div = document.createElement("div");
    ReactDOM.render( < TopBar / > , div);
  });
});

但我最终陷入了这个错误：

Property 'mockReturnValue' does not exist on type '() => IAuth0Context | undefined'.ts(2339)

我在这里有点迷失，任何帮助将不胜感激！

我自己花了一个小时左右解决这个问题。问题源于修改模拟返回值后应用于 useAuth0 的错误类型。我的解决方案是使用“ts-jest/utils”中的模拟。您还可以将角色、范围等添加到用户对象。 （参见 adminUser 对象）

更新2022年11月21日 The mocked函数从ts-jest从版本 28.0+ 开始，软件包已被删除（请参阅mockedv27 文档 https://kulshekhar.github.io/ts-jest/docs/27.1/guides/test-helpers)

此功能现已弃用，并将在28.0.0。该功能已集成到jest-mock包作为 Jest 的一部分27.4.0, see https://github.com/facebook/jest/pull/12089 https://github.com/facebook/jest/pull/12089。请使用来自jest-mock反而。

import { render, screen } from "@testing-library/react";
import { useAuth0 } from "@auth0/auth0-react";

// if you're using jest 27.4.0+ and ts-jest 28.0.0+
import { mocked } from "jest-mock";

// if you're using ts-jest < 28.0.0
// import { mocked } from "ts-jest/utils";

const user = {
   email: "[email protected] /cdn-cgi/l/email-protection",
   email_verified: true,
   sub: "google-oauth2|12345678901234",
};

const adminUser = {
   email: "[email protected] /cdn-cgi/l/email-protection",
   email_verified: true,
   sub: "google-oauth2|12345678901234",
   "https://<<API_URL>>/roles": ["admin", "superuser"],
};


jest.mock("@auth0/auth0-react");
 
const mockedUseAuth0 = mocked(useAuth0, true);
 
describe("TopNav Component Tests - Logged in", () => {
   beforeEach(() => {
       mockedUseAuth0.mockReturnValue({
           isAuthenticated: true,
           user,
           logout: jest.fn(),
           loginWithRedirect: jest.fn(),
           getAccessTokenWithPopup: jest.fn(),
           getAccessTokenSilently: jest.fn(),
           getIdTokenClaims: jest.fn(),
           loginWithPopup: jest.fn(),
           isLoading: false,
       });
   });
   test("Logout Button displays when logged in", () => {
       render(
               <TopNav />
       );
       const loginButton = screen.getByText(/Logout/i);
       expect(loginButton).toBeInTheDocument();
   });
   test("Make sure Admin Panel Button doesnt show without Role", () => {
       render(
               <TopNav />
       );
       const adminPanelButton = screen.queryByText(/Admin Panel/i);
       expect(adminPanelButton).toBeNull();
   });
});

describe("TopNav Component Tests - Admin User", () => {
   beforeEach(() => {
       mockedUseAuth0.mockReturnValue({
           isAuthenticated: true,
           user: adminUser,
           logout: jest.fn(),
           loginWithRedirect: jest.fn(),
           getAccessTokenWithPopup: jest.fn(),
           getAccessTokenSilently: jest.fn(),
           getIdTokenClaims: jest.fn(),
           loginWithPopup: jest.fn(),
           isLoading: false,
       });
   });
   test("Admin Panel Button displays", () => {
       render(
               <TopNav />
       );
       const adminPanelButton = screen.getByText(/Admin Panel/i);
       expect(adminPanelButton).toBeInTheDocument();
   });
});