如何在React中模拟或监视导出的函数

Question

我有一个组件是默认的导出

// Component.js
export default () => <>getData()</>;
export const getData = async () => await fetch('/');

// Component.test.js
import Component from 'Component'
describe('test getData', () => {
const getDataMock = jest.spyOn(Component, 'getData');
expect(getDataMock).toBeCalledOnce();
})

我得到错误：无法监视getData属性，因为它不是函数；未定义，而是给定

Answer 1

您导入了默认函数，而不是getData。

// Component.test.js
import mydefault, * as notdefaults from 'Component';
test('test getData', () => {
const getDataMocked = jest.spyOn(notdefaults, 'getData');
getDataMocked.mockResolvedValue('hello!');
expect(mydefault()).toBeDefined(); // call the default component to trigger getData()
expect(getDataMocked).toBeCalledTimes(1);
});