Jest mockImplementation 在一个测试文件中工作，但在另一个文件中失败答案

【问题标题】：Jest mockImplementation works in one test file, but fails in anotherJest mockImplementation 在一个测试文件中工作，但在另一个文件中失败
【发布时间】：2021-05-13 06:59:22
【问题描述】：

/api
  index.js
  base.js
  notebooks.js
/components
  AllNotebooks/
  NewNotebook/
/containers
  AllNotebooks/
  NewNotebook/
  common/withList/

我正在使用jest.spyOn.mockImplementation 模拟我的notebooks.js api，这是<NewNotebookContainer /> 的工作测试用例，但它没有被AllNotebooksContainer 模拟。

// api/base.js
const instance = axios.createinstance({url: BASE_URL})

export default instance

// api/notebooks.js
const getAll = () => instance.get("/notebooks");
const create = id => instance.post("/notebooks")

export {getAll, create}

// api/index.js
import * as notebooksApi from './notebooks'
export {notebooksApi}

现在，它适用于

import NewNotebook from "../../components/NewNotebook";
import { notebooksApi } from "../../api/index";

const NewNotebookContainer = function () {
  const handleSubmit = () => {
    if (!newNotebook.title.length) {
      return false;
    } else {
      return notebooksApi.create(newNotebook).then(() => {
        toggleModal();
      });
    }
  };
  return (
    <NewNotebook handleSubmit={handleSubmit}/>
  );
};

export default NewNotebookContainer;


// ./__test__/index.js

it("should invoke api if title exists", async () => {
    renderNotebook();
    const spy = jest
      .spyOn(notebooksApi, "create")
      .mockImplementation((x) => Promise.resolve(x));
    await act(() => {
      fireEvent.click(screen.getByRole("button", { name: /Create Notebook/ }));
      return Promise.resolve();
    });
    expect(spy).toHaveBeenCalledTimes(1);
  });

但是，notebookApi 不会被 <AllNotebooksContainer /> 嘲笑

// AllNotebooksContainer/index.js

import AllNotebooks from "../../components/AllNotebooks";
import { notebooksApi } from "../../api/index";
import withList from "../common/withList";

const AllNotebooksContainer = withList(AllNotebooks, notebooksApi.getAll);

export default AllNotebooksContainer;

// ../withList/index.js

const withList = (Component, getList) => {
  return function WithList(props) 
    useEffect(async () => {
      // invoke getList and store data in state
    }, []);

    if (!loading) {
      return <Component data={list} {...props} />;
    } else {
      return <Loading />;
    }
  };
};

// ./__test__/index.js

  it("should render correct number of <Notebook />", async () => {
    const spy = jest
      .spyOn(notebooksApi, "getAll")
      .mockImplementation(() => Promise.resolve({ data: mockData }));
    renderComponent();
    await waitFor(() => expect(spy).toHaveBeenCalledTimes(1));
    // some assertions
  });

对于<AllNotebooksContainer />，实际方法getAll 正在被调用，我在终端中得到Network Error，并且expect(spy).toHaveBeenCalledTimes(1) 失败，并以0 作为接收值。

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

我通过模拟整个 notebooksApi 模块解决了这个问题。

import {notebooksApi} from './somewhere/api/index'
jest.mock('./somewhere/api/index')

然后在我的测试用例中，我将其用作，

notebooksApi.getAll.mockResolvedvalue({data: mockData})
expect(notebooksApi.getAll).toHaveBeenCalledTimes(1)

我仍然不明白之前jest.spyOn 的奇怪行为，我会继续研究并相应地更新答案。

【讨论】：