RTL+Enzyme测试DataGrid分页大小切换功能失败求助

针对你测试DataGrid分页大小切换时弹窗未正常触发的问题，核心原因是对组件交互逻辑的测试方式有误，以下是修复方案及说明：

问题分析 #

1. Material UI DataGrid的分页下拉是基于Popper组件实现，并非传统modal，用presentation角色定位不准确
2. 无需手动包裹act：React Testing Library的fireEvent、findBy*等方法已自动处理React状态更新的act逻辑
3. 点击按钮后直接调用getByRole会因DOM未更新报错，需等待下拉选项渲染完成

修复后的测试用例 #

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

describe('Datagrid', () => {
  it('changes page size when selecting 10 rows per page', async () => {
    render(<DataGridDemo />);

    // 定位初始分页按钮
    const pageSizeBtn = await screen.findByRole('button', {
      name: /rows per page: 5/i
    });

    // 触发下拉弹窗
    fireEvent.click(pageSizeBtn);

    // 等待下拉选项渲染完成，定位"10"选项
    const tenRowsOption = await screen.findByRole('option', { name: /10/i });
    
    // 点击切换分页大小
    fireEvent.click(tenRowsOption);

    // 验证分页按钮文本已更新，确认切换生效
    await waitFor(() => {
      expect(screen.getByRole('button', { name: /rows per page: 10/i })).toBeInTheDocument();
    });
  });
});

关键修改说明 #

• 移除手动act包裹：避免冗余操作，RTL已内置状态更新处理逻辑
• 直接等待目标选项：跳过中间弹窗元素的定位，直接检测最终需要交互的option元素，更贴合用户真实操作路径
• 添加结果验证：通过断言分页按钮文本的变化，确保测试逻辑闭环，验证功能确实生效
• 使用waitFor确认状态：确保DOM完成更新后再执行断言，避免异步更新导致的测试失败

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