如何测试React组件Props传递正确性？基于@testing-library/react

要直接验证Dialog组件的onClose、onCancel等props是否正确传递，无需触发按钮点击，可以通过mock Dialog组件的方式捕获它接收的props，然后验证回调函数的行为。以下是具体实现步骤：

1. 准备测试环境 #

首先在测试文件中mock掉Dialog组件（根据你的实际导入路径调整），这样我们可以追踪它接收的所有props：

import React from 'react';
import { render } from '@testing-library/react';
import RankDialog from './RankDialog';
// 导入你的Dialog组件（自定义或第三方库组件）
import Dialog from './Dialog';

// Mock Dialog组件，保留子节点渲染以不影响其他测试逻辑
jest.mock('./Dialog', () => ({
  __esModule: true,
  default: jest.fn((props) => <div data-testid="mock-dialog">{props.children}</div>),
}));

2. 编写测试用例 #

渲染RankDialog并传入mock的setVisible函数，然后获取Dialog组件接收的props，直接调用onClose和onCancel回调，验证setVisible是否被正确调用：

describe('RankDialog', () => {
  it('正确传递onClose和onCancel回调给Dialog', () => {
    // 创建mock的setVisible函数
    const mockSetVisible = jest.fn();

    // 渲染RankDialog组件
    render(<RankDialog visible={true} setVisible={mockSetVisible} />);

    // 获取Dialog组件接收的props（mock函数的第一个调用参数）
    const dialogProps = Dialog.mock.calls[0][0];

    // 验证onClose回调逻辑
    dialogProps.onClose();
    expect(mockSetVisible).toHaveBeenCalledWith(false);

    // 重置mock，避免影响下一个断言
    mockSetVisible.mockReset();

    // 验证onCancel回调逻辑
    dialogProps.onCancel();
    expect(mockSetVisible).toHaveBeenCalledWith(false);

    // 可选：验证其他props是否正确传递
    expect(dialogProps.visible).toBe(true);
    expect(dialogProps.className).toBe('rank-dialog');
  });
});

关键说明 #

• 通过jest.mock替换Dialog组件为mock函数，可轻松捕获它接收的所有props；
• 直接调用回调函数，无需模拟用户点击操作，就能验证回调逻辑是否正确触发setVisible(false)；
• 这种方式不仅能覆盖回调代码，还能确保Dialog组件的所有预期props都被正确传递。

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