React Testing Library如何查找其他路由页面的元素？

你的查询语句写法、目标MUI输入框的可访问性配置都没有问题，报错核心原因有两个：

• 测试运行时应用默认停留在初始路由（通常为/），并没有导航到/step2路由。findBy* 系列方法只会在当前已挂载的DOM范围内等待匹配元素出现，不会自动触发路由跳转，只要/step2对应的表单组件没被挂载，等满默认超时时间就会抛出找不到元素的错误。
• 如果你测试时使用MemoryRouter包裹应用但没有配置初始路由，默认初始入口同样是/，会触发完全一致的报错。

根据你的测试场景选对应方案即可：

场景1：测试完整多步表单流程（从第一步走到第二步） #

先模拟用户完成第一步的操作触发路由跳转，等第二步页面渲染完成后再查找邮箱输入框，参考代码：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';

test('第二步表单的邮箱输入框可正常交互', async () => {
  const user = userEvent.setup();
  render(<App />);

  // 完成第一步表单操作，触发跳转
  await user.type(await screen.findByRole('textbox', { name: /第一步的字段名/i }), '测试值');
  await user.click(await screen.findByRole('button', { name: /下一步/i }));

  // 跳转完成后查找目标元素
  const emailInput = await screen.findByRole('textbox', { name: /email/i });
  expect(emailInput).toBeInTheDocument();
});

场景2：单独测试第二步表单（不需要覆盖前置流程） #

渲染组件时直接指定初始路由为/step2，跳过第一步的操作步骤，参考代码：

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

test('第二步页面直接渲染时存在邮箱输入框', async () => {
  render(
    <MemoryRouter initialEntries={['/step2']}>
      <App />
    </MemoryRouter>
  );

  const emailInput = await screen.findByRole('textbox', { name: /email/i });
  expect(emailInput).toBeInTheDocument();
});

额外排查技巧 #

如果配置完路由还是找不到元素，可以在findBy调用前加一句screen.debug()，打印当前DOM结构，确认是否存在接口请求loading、权限校验拦截等问题导致第二步表单未正常渲染。

内容的提问来源于stack exchange，提问作者Alex Kor