JavaScript - Jest / mock 中的模拟控制台“未被调用”

Question

我正在尝试模拟 console.info，我知道它会在导入的函数运行时被调用。该函数完全由单个fetch 组成，当不在生产环境中运行时，它使用console.info 报告请求和响应。

在问题Jest. How to mock console when it is used by a third-party-library? 中，评分最高的答案建议覆盖global.console，所以我使用jest.spyOn 进行尝试：

import * as ourModule from "../src/ourModule";

test("Thing", () => {
    // Tested function requires this. Including it here in case it's causing
    // something quirky that readers of this question may know about
    global.fetch = require("jest-fetch-mock");

    const mockInfo = jest.spyOn(global.console, "info").mockImplementation(
        () => { console.error("mockInfo") }
    );

    ourModule.functionBeingTested("test");
    expect(mockInfo).toHaveBeenCalled();
}

正如预期的那样，输出包含一个“mockInfo”实例。但是，然后使用 toHaveBeenCalled() 进行测试失败。

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called, but it was not called.

  40 |
  41 |     ourModule.functionBeingTested("test");
> 42 |     expect(mockInfo).toHaveBeenCalled();
     |                      ^
  43 | 

  at Object.toHaveBeenCalled (__tests__/basic.test.js:42:22)

console.error __tests__/basic.test.js:38
  mockInfo

我已经尝试将spyOn 移动到模块加载之前，正如答案中的一个 cmets 所建议的那样，结果没有差异。我在这里错过了什么？

这是有问题的函数：

function functionBeingTested(value) {
    const fetchData = {
        something: value
    };

    fetch("https://example.com/api", {
        method: "POST",
        mode:   "cors",
        body:   JSON.stringify(fetchData),
    })
        .then( response => {
            if (response.ok) {
                if (MODE != "production") {
                    console.info(fetchData);
                    console.info(response);
                }
            } else {
                console.error(`${response.status}: ${response.statusText}`);
            }
        })
        .catch( error => {
            console.error(error);
        });
}

Answer 1

问题

console.info 在一个 Promise 回调中被调用，该回调在 ourModule.functionBeingTested 返回和 expect 运行时尚未执行。

解决方案

确保调用console.info 的Promise 回调在运行expect 之前已经运行。

最简单的方法是从ourModule.functionBeingTested返回Promise：

function functionBeingTested(value) {
  const fetchData = {
    something: value
  };

  return fetch("https://example.com/api", {  // return the Promise
    method: "POST",
    mode: "cors",
    body: JSON.stringify(fetchData),
  })
    .then(response => {
      if (response.ok) {
        if (MODE != "production") {
          console.info(fetchData);
          console.info(response);
        }
      } else {
        console.error(`${response.status}: ${response.statusText}`);
      }
    })
    .catch(error => {
      console.error(error);
    });
}

...并在断言之前等待它解决：

test("Thing", async () => {  // use an async test function...
  // Tested function requires this. Including it here in case it's causing
  // something quirky that readers of this question may know about
  global.fetch = require("jest-fetch-mock");

  const mockInfo = jest.spyOn(global.console, "info").mockImplementation(
      () => { console.error("mockInfo") }
  );

  await ourModule.functionBeingTested("test");  // ...and wait for the Promise to resolve
  expect(mockInfo).toHaveBeenCalled();  // SUCCESS
});