使用Jest测试React：如何通过模拟子组件调用父组件props方法

我有一个父组件，它调用子组件并通过props传递handleIncrement方法。想要通过Jest对ParentComponent进行测试，步骤如下：

• 通过Jest模拟ChildComponent
• 通过模拟的ChildComponent调用ParentComponent的handleIncrement方法

核心问题：如何让模拟的ChildComponent接收父组件传递的props，并调用父组件的onIncrement方法

父组件代码

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const handleIncrement = () => {
     setCount(count + 1);
  };
return (
 <div>
  <ChildComponent onIncrement={handleIncrement} />
   <p>Count: {count}</p>
 </div>
);
};
export default ParentComponent;

子组件代码

import React from 'react';

const ChildComponent = (props) => {
  return (
    <button onClick={props.onIncrement}>
     Increment Count
    </button>
  );
};
export default ChildComponent;

我的测试代码（存在问题）

jest.mock('ChildComponent', () => {
  return {
  __esModule: true,
   default: () => {

     const onIncrementHandler = () => {
      props.onIncrement() // 这里无法获取props，怎么调用父组件方法？
     }
     return (
       <div>
         <Button id='test-button' onClick={onIncrementHandler}>Test Button</Button>
       </div>
      )
     },
   }
 })

describe('ParentComponent', () => {
  test('test button Click', async () => {
   render(<ParentComponent />)
   const testButton = await screen.findByTestId('test-button')
   fireEvent.click(testButton)
  })
})

修正后的测试代码 #

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ParentComponent from './ParentComponent';

// 模拟ChildComponent时接收父组件传递的props
jest.mock('./ChildComponent', () => {
  return {
    __esModule: true,
    default: (props) => { // 这里接收props参数
      return (
        <button data-testid="test-button" onClick={props.onIncrement}>
          Test Button
        </button>
      );
    },
  };
});

describe('ParentComponent', () => {
  test('点击按钮后count值增加', () => {
    render(<ParentComponent />);
    
    // 验证初始count值
    expect(screen.getByText('Count: 0')).toBeInTheDocument();
    
    // 点击模拟的子组件按钮
    const testButton = screen.getByTestId('test-button');
    fireEvent.click(testButton);
    
    // 验证count是否更新为1
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

关键修改说明 #

1. 模拟组件接收props：在模拟的default组件函数中添加props参数，直接获取父组件传递的onIncrement方法。
2. 直接绑定事件：无需额外封装handler，直接把props.onIncrement绑定到按钮的onClick事件，点击时自动触发父组件方法。
3. 使用规范的测试标识：用data-testid替代id，符合React Testing Library的最佳实践，避免业务id冲突。
4. 补充结果断言：添加count值的前后验证，确保测试逻辑完整。

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