仅模拟模块中的一个功能，但保留原始功能

Question

我只想从一个模块中模拟一个函数（名为导出），但保留其余模块函数不变。

使用jest.mock('package-name') 会模拟所有导出的函数，这是我不想要的。

我尝试将命名导出传播回模拟对象...

import * as utils from './utilities.js';

jest.mock(utils, () => ({
  ...utils
  speak: jest.fn(),
}));

但出现此错误：

jest.mock() 的模块工厂不允许引用任何超出范围的变量。

Answer 1

最直接的方法是使用jest.spyOn，然后使用.mockImplementation()。这将允许模块中的所有其他函数继续按照定义的方式工作。

对于包裹：

import axios from 'axios';

jest.spyOn(axios, 'get');
axios.get.mockImplementation(() => { /* do thing */ });

对于具有命名导出的模块：

import * as utils from './utilities.js';

jest.spyOn(utils, 'speak');
utils.speak.mockImplementation(() => { /* do thing */ });

这里的文档：https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname

Answer 2

对我来说这很有效：

const utils = require('./utilities.js');
...
jest.spyOn(utils, 'speak').mockImplementation(() => jest.fn());

Answer 3

这个答案的亮点是 jest.requireActual()，这是一个非常有用的实用程序，它开玩笑说“嘿，保持所有原始功能完整并导入它们”。

jest.mock('./utilities.js', () => ({
  ...jest.requireActual('./utilities.js'),
  speak: jest.fn(),
}));

让我们来看看另一个常见的场景，你正在使用酶 ShallowWrapper，它与 useContext() 挂钩并不顺利，那么你会怎么做？虽然我确定有多种方法，但这是我喜欢的一种：

import React from "react";

jest.mock("react", () => ({
  ...jest.requireActual("react"), // import and retain the original functionalities
  useContext: jest.fn().mockReturnValue({foo: 'bar'}) // overwrite useContext
}))

这样做的好处是您仍然可以使用 import React, { useContext } from "react" 在您的原始代码中，而不必担心将它们转换为 React.useContext() 就像您使用 jest.spyOn(React, 'useContext')

Answer 4

手动模拟

您可以在utilities.js 的同一级别创建__mocks__ 目录，然后在此目录中创建一个名为utilities.js 的文件。

utilities.js

const speak = () => "Function speak";
const add = (x, y) => x + y;
const sub = (x, y) => x - y;

module.exports = { speak, add, sub };

现在，保持一切不变，然后模拟 speak 函数。

__mocks__/utilities.js

const speak = jest.fn(() => "Mocked function speak");
const add = (x, y) => x + y;
const sub = (x, y) => x - y;

module.exports = { speak, add, sub };

现在你可以模拟utilities.js

utilities.test.js

const { speak, add, sub } = require("./utilities");

jest.mock("./utilities");

test("speak should be mocked", () => {
  expect(speak()).toBe("Mocked function speak");
});

模拟节点模块

在node_modules 的同级创建一个名为__mocks__ 的目录，并在该目录中添加一个文件'axios.js'。

__mocks__/axios.js

const axios = {
  get: () => Promise.resolve({ data: { name: "Mocked name" } }),
};

module.exports = axios;

fetch.js

const axios = require("axios");

const fetch = async () => {
  const { data } = await axios.get(
    "https://jsonplaceholder.typicode.com/users/1"
  );
  return data.name;
};

module.exports = fetch;

使用节点模块，您无需显式调用jest.mock("axios")。

fetch.test.js

const fetch = require("./fetch");

test("axios should be mocked", async () => {
  expect(await fetch()).toBe("Mocked name");
});

Answer 5

在jest.mock 中的jest.requireActual 似乎是可行的方法，但是我需要添加代理而不是对象传播，以防止在某些导入场景中可能发生的类型错误Cannot read properties of undefined (reading ...)。

这是最终结果：

jest.mock('the-module-to-mock', () => {
  const actualModule = jest.requireActual('the-module-to-mock')

  return new Proxy(actualModule, {
    get: (target, property) => {
      switch (property) {
        // add cases for exports you want to mock
        // ???
        case 'foo': {
          return jest.fn() // add `mockImplementation` etc
        }
        case 'bar': {
          return jest.fn()
        }
        // fallback to the original module
        default: {
          return target[property]
        }
      }
    },
  })
})