Reactjs 当试图模拟ES6模块中的一个函数时，为什么会绕过Jest mock？

我尝试在测试中模拟以下ES6模块。需要注意的重要一点是，我试图模拟此模块中的一个函数-

createHeadline（）

：

下面是我的测试，我使用

jest.requireActual

来保持模块的完整性，除了我想要模拟的

createHeadline（）

：

import React from 'react';
import userEvent from '@testing-library/user-event';
import { Headline } from '../../models';
import { createHeadline } from '../../services/HeadlineService';
import { render, waitFor } from '../../test/test-utils';
import { HeadlineDetail } from './HeadlineDetail';

...

const handleStartNewItem = jest.fn();
const handleItemSelected = jest.fn();
const handleItemUpdated = jest.fn();

// ---- mock createHeadline ----
jest.mock('../../services/HeadlineService', () => ({
  __esModule: true,
  ...jest.requireActual('../../services/HeadlineService'),
  createHeadline: jest.fn().mockImplementation((headline: Headline) => {
    console.log('-------> createHeadline()')
    return headline;
  }),
}));

const headline = {
  title: 'My headline',
  attribution: 'My attribution',
  teaser: 'My teaser',
};

describe('<HeadlineDetail />', () => {
  test('allows to add a new item', async () => {
    const selectionState = { isNew: true, itemId: '', version: 0 };

    const { getByText, getByLabelText } = render(
      <HeadlineDetail
        selectionState={selectionState}
        onStartNewItem={handleStartNewItem}
        onItemSelected={handleItemSelected}
        onItemUpdated={handleItemUpdated}
      />
    );

    // add a new item
    userEvent.type(getByLabelText('Title'), headline.title);
    userEvent.type(getByLabelText('Attribution'), headline.attribution);
    userEvent.type(getByLabelText('Teaser'), headline.teaser);
    userEvent.click(getByText('Add'));

    // expect createHeadline() to be called
    await waitFor(() => expect(createHeadline).toHaveBeenCalledTimes(1));

    // expect handleStartNewItem() to be called to start adding new item
    await waitFor(() => expect(handleStartNewItem).toHaveBeenCalledTimes(1));
  });
});

从“React”导入React；
从“@testing library/user event”导入userEvent；
从“../../models”导入{Headline}；
从“../../services/HeadlineService”导入{createHeadline}；
从“../../test/test-utils”导入{render，waitFor}；
从“/HeadlineDetail”导入{HeadlineDetail}；
...
const handleStartNewItem=jest.fn（）；
const handleItemSelected=jest.fn（）；
const handleItemUpdated=jest.fn（）；
//----模拟标题----
jest.mock（“../../services/HeadlineService”，（）=>({
__艾斯莫杜勒：没错，
…jest.requireActual（“../../services/HeadlineService”），
createHeadline:jest.fn（）.mockImplementation（（headline:headline）=>{
console.log（'---->createHeadline（）'））
返回标题；
}),
}));
常量标题={
标题：“我的标题”，
归属：“我的归属”，
挑逗者：“我的挑逗者”，
};
描述（“”，（）=>{
测试（'允许添加新项目'，异步（）=>{
const selectionState={isNew:true，itemId:''，版本：0}；
常量{getByText，GetByBelText}=render(
);
//添加新项目
userEvent.type（getByLabelText（'Title'），headline.Title）；
userEvent.type（getByLabelText（“属性”），headline.attribute）；
userEvent.type（getByLabelText（'striser'），headline.striser）；
单击（getByText（'Add'））；
//期望调用createHeadline（）
等待等待（（）=>expect（createHeadline）.toHaveBeenCalledTimes（1））；
//期望调用handleStartNewItem（）以开始添加新项
等待等待（（）=>expect（handleStartNewItem）。等待等待时间（1）；
});
});

不幸的是，当测试运行时，我在模拟中看不到console.log。相反，原始函数运行并尝试进行真正的HTTP调用

---

我遗漏了什么？

测试中的所有内容看起来都很好，可能测试证明了实现有问题，不幸的是，在您的问题中看不到

我已经尝试创建了一些，它证明了使用一个工作的组件实现，测试通过了

import React from 'react';
import userEvent from '@testing-library/user-event';
import { Headline } from '../../models';
import { createHeadline } from '../../services/HeadlineService';
import { render, waitFor } from '../../test/test-utils';
import { HeadlineDetail } from './HeadlineDetail';

...

const handleStartNewItem = jest.fn();
const handleItemSelected = jest.fn();
const handleItemUpdated = jest.fn();

// ---- mock createHeadline ----
jest.mock('../../services/HeadlineService', () => ({
  __esModule: true,
  ...jest.requireActual('../../services/HeadlineService'),
  createHeadline: jest.fn().mockImplementation((headline: Headline) => {
    console.log('-------> createHeadline()')
    return headline;
  }),
}));

const headline = {
  title: 'My headline',
  attribution: 'My attribution',
  teaser: 'My teaser',
};

describe('<HeadlineDetail />', () => {
  test('allows to add a new item', async () => {
    const selectionState = { isNew: true, itemId: '', version: 0 };

    const { getByText, getByLabelText } = render(
      <HeadlineDetail
        selectionState={selectionState}
        onStartNewItem={handleStartNewItem}
        onItemSelected={handleItemSelected}
        onItemUpdated={handleItemUpdated}
      />
    );

    // add a new item
    userEvent.type(getByLabelText('Title'), headline.title);
    userEvent.type(getByLabelText('Attribution'), headline.attribution);
    userEvent.type(getByLabelText('Teaser'), headline.teaser);
    userEvent.click(getByText('Add'));

    // expect createHeadline() to be called
    await waitFor(() => expect(createHeadline).toHaveBeenCalledTimes(1));

    // expect handleStartNewItem() to be called to start adding new item
    await waitFor(() => expect(handleStartNewItem).toHaveBeenCalledTimes(1));
  });
});