如何在测试中模拟React子组件并调用其Props？

我有如下React组件：

function ParentComponent() {
  const someLogicA = () => {
    // 具体业务逻辑
  }
  return <>
    <ChildComponent doSomething={() => {someLogicA()}}/>
  </>
}

需求很明确：要验证当ChildComponent调用props里的doSomething方法时，ParentComponent中的someLogicA逻辑是否正确触发。但ChildComponent本身逻辑复杂，没法通过React Testing Library抓取页面元素来触发操作，所以打算直接模拟ChildComponent，手动调用doSomething来复现真实调用场景。

实现步骤及测试代码 #

1. 模拟ChildComponent

用Jest的jest.mock来模拟子组件，让它接收props并把props暴露出来，方便后续获取doSomething方法：

2. 渲染父组件并获取doSomething

渲染ParentComponent后，从模拟的子组件实例中拿到传递过去的doSomething。

3. 调用方法并断言逻辑执行

调用doSomething，然后根据someLogicA的实际逻辑做对应断言（比如监听函数调用、验证副作用等）。

完整测试代码如下：

import { render } from '@testing-library/react';
import ParentComponent from './ParentComponent';
import ChildComponent from './ChildComponent';

// 模拟ChildComponent，将接收的props挂载到mock函数上
jest.mock('./ChildComponent', () => {
  const MockChild = jest.fn((props) => {
    MockChild.props = props;
    return null; // 无需渲染真实内容
  });
  return MockChild;
});

test('当doSomething被调用时触发someLogicA', () => {
  // 示例：若someLogicA抽离到独立工具模块，监听其调用
  // import * as logicUtils from './logicUtils';
  // const someLogicASpy = jest.spyOn(logicUtils, 'someLogicA');

  // 渲染父组件
  render(<ParentComponent />);

  // 获取传递给ChildComponent的doSomething方法
  const doSomething = ChildComponent.props.doSomething;

  // 调用doSomething
  doSomething();

  // 断言someLogicA被正确调用，或验证其产生的副作用
  // expect(someLogicASpy).toHaveBeenCalledTimes(1);
  // 若someLogicA会修改组件状态，可通过render结果查询对应元素变化来断言
});

额外说明 #

• 如果someLogicA是组件内部私有函数，建议把它抽离成独立的工具函数，这样不仅更易维护，也方便用Jest的spy方法监听调用情况。
• 模拟子组件时返回null，是因为我们只关心父组件传递的props，不需要渲染子组件的真实UI。

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