导入组件的 Jest 模拟变量

Question

我正在尝试在我的 App 组件中模拟一个变量 (auth)，因为它正在执行条件渲染。如果不尝试导出变量本身，我应该怎么做？已经尝试了几天各种解决方案，但我似乎无法解决它，现在我被卡住了。

App.js

import React from "react";
import { useRoutes } from "react-router-dom";
import Routing from "./routes";
import useAuth from "./hooks/useAuth";
import SplashScreen from "./components/splashScreen/SplashScreen";

const App = () => {
  const content = useRoutes(Routing());
  const auth = useAuth();

  return (
    <>
      {auth.isInitialized ? content : <SplashScreen />}
    </>
  );
};

export default App;

App.test.js

import React from "react";
import { mount } from "enzyme";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

describe("App Unit Tests", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(
      <BrowserRouter>
          <App />
      </BrowserRouter>
    );
  });

  it("App should render", () => {
    expect(wrapper.length).toEqual(1);
  });

 //Below fails 
 it("should render splashscreen", () => {
    jest.mock("./hooks/useAuth", () => ({
      isInitialized: false,
    }));
    expect(wrapper.length).toEqual(1);
  });

  it("should render content", () => {
    jest.mock("./hooks/useAuth", () => ({
      isInitialized: true,
    }));
    expect(wrapper.length).toEqual(1);
  });
});

Answer 1

而不是 auth，useAuth 钩子应该被模拟到一个具有 isInitialized getter 的对象（比如 mockUseAuth）中。 getter 应该 return 一个 mockIsInitialized 值，可以根据每个测试用例进行更改。像这样：

let mockIsInitialized = true;

let mockUseAuth = {
  isAuthenticated: true
};

Object.defineProperty(mockUseAuth, 'isInitialized', {
  get: jest.fn(() => mockIsInitialized)
});

jest.mock('./hooks/use-auth', () => {
  return jest.fn(() => (mockUseAuth))
})

describe("App Unit Tests", () => {
 let wrapper;
 beforeEach(() => {
   wrapper = mount(
     <BrowserRouter>
       <App />
     </BrowserRouter>
   );
 });

 it("App should render", () => {
   expect(wrapper.length).toEqual(1);
 });

 it("should render splashscreen", () => {
   mockIsInitialized = false;
   expect(wrapper.length).toEqual(1);
 });

 it("should render content", () => {
   mockIsInitialized = true;
   expect(wrapper.length).toEqual(1);
 });
});

Answer 2

你可以这样做：

jest.mock('./hooks/use-auth', () => ({
isInitialized: true
});

这基本上意味着 use-auth returns 一个具有 inInitialized 属性

的对象

导入组件的 Jest 模拟变量

Jest mock variables of imported component

testing

mocking

reactjs

jestjs

babel-jest