react-testing-library测试时Mock函数未被调用，原函数却执行如何解决

最常见原因1：未触发Modal打开，表单未处于可交互状态 #

你的组件中Modal默认处于隐藏状态，直接查找Modal内的提交按钮要么查询失败，要么点击的是不可交互的隐藏元素，不会触发表单提交逻辑。你没有触发打开Modal的操作，表单的onFinish回调根本没有执行的前提。

最常见原因2：表单项未校验通过 #

Ant Design的Form组件onFinish回调仅会在所有表单项校验全部通过后才触发，如果你有必填项未填写、校验规则不满足，点击提交按钮不会执行onFinish里的addStory调用。

其他可能原因 #

• 路径不匹配：测试文件中导入addStory的相对路径和组件内的导入路径不完全一致，包括大小写、层级、文件名拼写错误，导致mock的不是同一个函数
• 导出导入方式不匹配：如果add_story文件用的是命名导出（export const addStory = xxx），你用默认导入的写法会导致导入的不是目标函数，mock自然不生效
• 未等待异步逻辑完成：如果Modal打开有动画、表单校验有异步逻辑，需要等待逻辑完成再执行后续断言

修正方案 #

1. 补全前置操作流程 #

先触发打开Modal的按钮，再操作Modal内的元素

2. 补全表单填值逻辑 #

按照你的表单项校验规则，填入符合要求的值，确保校验通过

3. 验证mock正确性 #

可以在测试中打印addStory，确认输出为jest.fn()构造的mock函数，否则检查导入路径和导出导入方式是否匹配

修正后的测试代码示例 #

import AddStoryModal from './AddStoryModal';
import addStory from '../api/add_story';

jest.mock('../api/add_story');

describe('Story tests', () => {
  // 每次用例执行前重置mock调用记录，避免用例间干扰
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('makes an API call to add a story', async () => {
    render(<AddStoryModal />);

    // 先点击按钮打开Modal
    fireEvent.click(screen.getByTestId('add-story'));
    // 等待Modal渲染完成
    expect(await screen.findByTestId('add-story-modal')).toBeVisible();

    // 示例：如果有标题必填项，先填入符合规则的值（替换为你实际的表单项逻辑）
    fireEvent.change(screen.getByTestId('story-title-input'), {
      target: { value: '测试故事标题' }
    });

    // 点击提交按钮
    const submitButton = screen.getByTestId('add-submit');  
    fireEvent.click(submitButton);

    expect(addStory).toHaveBeenCalled();
  });
});

命名导出场景的修正方式 #

如果你的add_story文件是命名导出，需要修改导入和mock写法：

// 导入改为命名导入
import { addStory } from '../api/add_story';

// mock改为对应命名导出
jest.mock('../api/add_story', () => ({
  __esModule: true,
  addStory: jest.fn()
}));

内容的提问来源于stack exchange，提问作者barksy