如何從 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方法在每個案例的基礎上完成。