如何从 Jest 手动模拟中检查默认导出 function

Question

以下用于 Jest 测试的isomorphic-fetch手动模拟文件返回预期值：

// __mocks__/isomorphic-fetch.ts

import * as req from "./requestData";

const Fetch = (url: string, options: any): Promise<any> => {
  const resultPromise = {
    text: () => {
      return Promise.resolve(req.generateMockResponseData(url, options.body));
    },
  };
  return Promise.resolve(resultPromise);
};

export default Fetch;

但是，我在尝试检查调用它的 arguments 时遇到了问题，因为fetch上的mock属性未定义。 我尝试了两件事：

首先，我将Fetch function 包装在jest.fn中，如下所示：

const Fetch = jest.fn((url: string, options: any): Promise<any> => {
// implementation is same as above
});

export default Fetch;

现在添加后

import _fetchMock  from "isomorphic-fetch"
const fetchMock = _fetchMock as jest.Mock<Promise<any>>;

在测试文件中，我可以检查调用来获取

fetchMock.mock.calls[0]

但是现在由于某种原因，应用程序代码中的fetch在测试期间返回未定义。

我尝试的第二件事是从Fetch中删除jest.fn包装器并添加

jest.mock("isomorphic-fetch")

到测试文件。 现在fetch在测试期间返回应用程序代码中的预期值，但fetchMock.mock现在再次未定义。

笑话配置：

// jest.config.js
module.exports = {
  "clearMocks": true,
  "coverageDirectory": "../coverage",
  "resetMocks": true,
  "restoreMocks": true,
  "rootDir": "./src",
  "testEnvironment": "jsdom",
  "preset": "ts-jest",
  "coveragePathIgnorePatterns": ["Error.ts"],
  "testEnvironmentOptions": {
    "resources": "usable",
    "features": {
      "FetchExternalResources": ["script", "iframe"],
      "ProcessExternalResources": ["script", "iframe"],
    }
  }
}

GitHub上有一个完整的例子。

Answer 1

Jest spy 和常规模拟 function 在相同的实现中可能表现不同的原因是 Jest spy 可以重置为无操作。

这正是此 Jest 设置中发生的情况：

...
"resetMocks": true,
"restoreMocks": true,
...

restoreMocks选项通常是可取的，它通过将间谍方法重置为原始实现来防止测试交叉污染。

resetMocks通常是不可取的并且几乎无法使用，它将可重用的间谍从__mocks__重置为无操作实现。

TL;DR： resetMocks配置选项和jest.resetAllMocks()破坏了可重用间谍的实现，通常应该避免。 如果需要重置特定的间谍，可以使用mockReset方法在每个案例的基础上完成。