React 18升级后，RTL如何替代Enzyme查询Material-UI组件？

核心思路 #

RTL的设计理念是模拟用户实际交互方式查询元素，而非直接查找组件实例。针对你的场景，分两种常见情况处理：

情况1：优先推荐（符合RTL最佳实践） #

如果MoreMenu最终渲染为可交互的DOM元素（比如Material-UI的IconButton或按钮类组件），直接检查元素的禁用状态：

1. 先通过浏览器开发者工具确认组件对应的DOM角色（role）和可识别的标识（比如aria-label、文本内容）
2. 使用RTL的查询方法定位元素，再用toBeDisabled()断言状态

示例代码：

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

render(<InitialForm />);
// 假设MoreMenu是带"更多选项"标识的按钮，根据实际标识调整name匹配规则
const moreButton = screen.getByRole('button', { name: /更多选项/i });
expect(moreButton).toBeDisabled();

如果之前用findByRole未成功，大概率是name参数匹配不准确，可通过查看元素的aria-label、文本或title属性调整匹配规则。

情况2：直接检查组件props（适合自定义组件或DOM无对应禁用属性的场景） #

如果必须直接验证MoreMenu组件的disabled props，可以通过jest.mock跟踪组件渲染：

import { render } from '@testing-library/react';
import MoreMenu from './path-to-MoreMenu';

// 用jest.mock替换组件为模拟实现，记录传入的props
jest.mock('./path-to-MoreMenu', () => 
  jest.fn((props) => <div data-testid="mock-more-menu" {...props} />)
);

test('MoreMenu should be disabled', () => {
  render(<InitialForm />);
  
  // 获取传入MoreMenu的props（mock.calls[0][0]是第一次渲染的props对象）
  const moreMenuProps = MoreMenu.mock.calls[0][0];
  expect(moreMenuProps.disabled).toBe(true);
});

补充：给Material-UI组件添加testId（可选） #

如果组件结构复杂，难以通过role/name查询，可以给MoreMenu添加data-testid属性：

// 组件代码中
<MoreMenu data-testid="more-menu-button" disabled={isDisabled} />

// 测试代码中
const moreButton = screen.getByTestId('more-menu-button');
expect(moreButton).toBeDisabled();

内容的提问来源于stack exchange，提问作者Tushar Gupta