模拟在反应组件中使用的函数 "multiple times"

Question

我目前正在以这种方式模拟 React 项目中的内部依赖项：

import { QueryClient, QueryClientProvider } from "react-query";
import { render } from "@testing-library/react";
import SectionCourses from "./SectionCourses";

const queryClient = new QueryClient({});

jest.mock("@myORG/axiosWrapperReactQuery", () => {
  const original = jest.requireActual("@myORG/axiosWrapperReactQuery");
  return {
    ...original,
    getAllCourses: jest.fn().mockImplementation(() => ({
      isLoading: false,
      typedData: [],
    })),
  };
});

it("not found", async () => {
  const { findByText } = render(
    <QueryClientProvider client={queryClient}>
      <SectionCourses />
    </QueryClientProvider>
  );

  const firstCourse = await findByText("No courses found");
  expect(firstCourse).toBeInTheDocument();
});

它工作得很好，但是当我尝试在同一个文件中再次模拟依赖项时，它失败了

// ALL THE PREVIOUS CODE

jest.mock("@myORG/axiosWrapperReactQuery", () => {
  const original = jest.requireActual("@myORG/axiosWrapperReactQuery");
  return {
    ...original,
    getAllCourses: jest.fn().mockImplementation(() => ({
      isLoading: true, // This was changed to true
      typedData: [],
    })),
  };
});

it("is loading", async () => {
  const { findByText } = render(
    <QueryClientProvider client={queryClient}>
      <SectionCourses />
    </QueryClientProvider>
  );

  const firstCourse = await findByText("Loading...");
  expect(firstCourse).toBeInTheDocument();
});

好像只拿最后一个jest.mock

那么，如果我需要多次模拟该函数以便我可以看到我的 React 组件将显示什么，那么处理这个问题的方法是什么？

我知道我可以创建多个文件，例如 SectionCourses-V1.test.tsx、SectionCourses-V2.test.tsx...但是有这么多文件并不理想

注意：这不是

的副本

Answer 1

您可以在测试方法本身内部移动 mock 的实现，以便每个测试方法都适用于提供的 mock 实现。

it("not found", async () => {
  jest.mock("@myORG/axiosWrapperReactQuery", () => {
  const original = jest.requireActual("@myORG/axiosWrapperReactQuery");
   return {
      ...original,
      getAllCourses: jest.fn().mockImplementation(() => ({
      isLoading: false,
      typedData: [],
     })),
   };
 });

  const { findByText } = render(
    <QueryClientProvider client={queryClient}>
      <SectionCourses />
    </QueryClientProvider>
  );

  const firstCourse = await findByText("No courses found");
  expect(firstCourse).toBeInTheDocument();
});




it("is loading", async () => {
  jest.mock("@myORG/axiosWrapperReactQuery", () => {
    const original = jest.requireActual("@myORG/axiosWrapperReactQuery");
    return {
      ...original,
      getAllCourses: jest.fn().mockImplementation(() => ({
        isLoading: true, // This changed to true
        typedData: [],
      })),
    };
  });
  const { findByText } = render(
    <QueryClientProvider client={queryClient}>
      <SectionCourses />
    </QueryClientProvider>
  );

  const firstCourse = await findByText("Loading...");
  expect(firstCourse).toBeInTheDocument();
});

Answer 2

您可以链接 getAllCourses 的模拟实现 jest docs

试试这个，

jest.mock("@myORG/axiosWrapperReactQuery", () => {
const original = jest.requireActual("@myORG/axiosWrapperReactQuery");
return {
  ...original,
  getAllCourses: jest.fn()
                 .mockImplementationOnce(() => ({
                             isLoading: false, // 1st call
                             typedData: [],
                 }))
                 .mockImplementationOnce(() => ({
                             isLoading: true, // 2nd call
                             typedData: [],
                 }))
}

模拟在反应组件中使用的函数 "multiple times"

Mock a function used inside a react component "multiple times"

reactjs

unit-testing

jestjs

mocking

react-tsx