Jest测试：如何调用父组件传递给子组件的Props函数

数据老陈

2026-8-3

React父子组件页面切换测试问题解决

先修正测试里的低级错误

你测试用例里渲染的是<CreateDuty />，但实际要测的组件是<Parent />，这是最直接的问题，先把这个修正过来。

推荐方案：直接验证UI切换效果

没必要去mockhandleSetPage，直接模拟用户操作，验证页面切换后的UI变化更靠谱，这也是测试用户真实交互的思路：

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

it('点击按钮切换到第二页', () => {
  render(<Parent />);
  // 确认初始显示第一页的按钮
  expect(screen.getByText('Next page')).toBeInTheDocument();
  // 点击切换按钮
  fireEvent.click(screen.getByText('Next page'));
  // 验证第二页内容出现（假设ChildPage2里有"Page 2 text"文本）
  expect(screen.getByText('Page 2 text')).toBeInTheDocument();
  // 顺便验证第一页的按钮消失，确保切换逻辑正确
  expect(screen.queryByText('Next page')).not.toBeInTheDocument();
});

单独测试子组件的方式

如果只想测ChildPage1是否能正确触发回调，可以用Jest的mock函数来模拟：

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

it('点击按钮会触发传入的handleSetPage', () => {
  // 创建一个jest mock函数
  const mockSetPage = jest.fn();
  render(<ChildPage1 handleSetPage={mockSetPage} />);
  // 点击按钮
  fireEvent.click(screen.getByText('Next page'));
  // 验证mock函数被调用了一次
  expect(mockSetPage).toHaveBeenCalledTimes(1);
});