如何使用 Jest 监视默认导出的函数？

Question

假设我有一个导出默认函数的简单文件：

// UniqueIdGenerator.js
const uniqueIdGenerator = () => Math.random().toString(36).substring(2, 8);

export default uniqueIdGenerator;

我会这样使用：

import uniqueIdGenerator from './UniqueIdGenerator';
// ...
uniqueIdGenerator();

我想在我的测试中断言在保持原始功能的同时调用了此方法。我会用 jest.spyOn 来做到这一点，但是它需要一个对象和一个函数名作为参数。你怎么能以干净的方式做到这一点？对于任何感兴趣的人，jasmine 都有类似的 GitHub issue。

Answer 1

我最终放弃了默认导出：

// UniqueIdGenerator.js
export const uniqueIdGenerator = () => Math.random().toString(36).substring(2, 8);

然后我可以像这样使用和监视它：

import * as UniqueIdGenerator from './UniqueIdGenerator';
// ...
const spy = jest.spyOn(UniqueIdGenerator, 'uniqueIdGenerator');

Some recommend 将它们包装在一个 const 对象中，然后将其导出。我想您也可以使用 class 进行包装。

但是，如果您无法修改 class，还有一个（不太好）的解决方案：

import * as UniqueIdGenerator from './UniqueIdGenerator';
// ...
const spy = jest.spyOn(UniqueIdGenerator, 'default');

Answer 2

在某些情况下，您必须模拟导入才能监视默认导出：

import * as fetch from 'node-fetch'

jest.mock('node-fetch', () => ({
  default: jest.fn(),
}))

jest.spyOn(fetch, 'default')

Answer 3

也可以模拟导入并将原始实现作为模拟实现传递，例如：

import uniqueIdGenerator from './UniqueIdGenerator'; // this import is a mock already

jest.mock('./UniqueIdGenerator.js', () => {
  const original = jest. requireActual('./UniqueIdGenerator')
  return {
     __esModule: true,
     default: jest.fn(original.default)
  }
})

test(() => {
  expect(uniqueIdGenerator).toHaveBeenCalled()
})

Answer 4

对我有用的是的答案和 OP 自己的解决方案的组合。我想要测试的只是使用正确的参数调用了辅助方法，因为我已经为辅助方法编写了测试并且它对我的后续测试没有任何影响：

// myHelperMethod.js

export const myHelperMethod = (param1, param2) => { // do something with the params };

// someOtherFileUsingMyHelperMethod.js

import * as MyHelperMethod from '../myHelperMethod';


jest.mock('../myHelperMethod', () => ({
  myHelperMethod: jest.fn(),
}));

let myHelperMethodSpy = jest.spyOn(MyHelperMethod, 'myHelperMethod');

// ...
// some setup
// ...

test(() => {
  expect(myHelperMethodSpy).toHaveBeenCalledWith(param1, param2);
});

Answer 5

仅模拟默认导出或任何其他导出，但保留模块中剩余的导出：

import myDefault, { myFunc, notMocked } from "./myModule";

jest.mock("./myModule", () => {
  const original = jest.requireActual("./myModule");
  return {
    __esModule: true,
    ...original,
    default: jest.fn(),
    myFunc: jest.fn()
  }
});

describe('my description', () => {
  it('my test', () => {
    myFunc();
    myDefault();
    expect(myFunct).toHaveBeenCalled();
    expect(myDefault).toHaveBeenCalled();
    
    myDefault.mockImplementation(() => 5);
    expect(myDefault()).toBe(5);
    expect(notMocked()).toBe("i'm not mocked!");
  })
});

Answer 6

这里有一种在不修改导入（甚至根本不需要在测试中导入）的情况下进行默认导出的方法：

const actual = jest.requireActual("./UniqueIdGenerator");
const spy = jest.spyOn(actual, "default");

如何使用 Jest 监视默认导出的函数？

How to spy on a default exported function with Jest?

reactjs

unit-testing

mocking

jestjs

spy