使用MaterialUI Autocomplete与MSW时React Testing Library的findByText超时问题

以下是几个无需延长全局超时即可解决问题的方案：

1. 等待MSW请求完成后再查找元素 #

MSW的请求处理是异步的，直接用findByText可能在请求还没响应时就开始等待，导致超时。可以通过MSW的waitForRequest方法，确保接口请求已经完成后再去定位Autocomplete选项：

import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  rest.get('/api/users/search', (req, res, ctx) => {
    return res(ctx.json([{ email: 'test@example.com' }]));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('显示Autocomplete选项', async () => {
  render(<ExpertWall />);
  
  // 点击创建按钮，展开输入框
  fireEvent.click(screen.getByText('创建新用户'));
  
  // 获取邮箱输入框并输入内容
  const emailInput = screen.getByLabelText('用户邮箱');
  fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
  
  // 等待MSW处理完搜索请求
  await server.waitForRequest('/api/users/search');
  
  // 此时请求已响应，直接查找选项
  const userOption = await screen.findByText('test@example.com', { timeout: 1000 });
  expect(userOption).toBeInTheDocument();
});

2. 先等待Loading状态消失 #

既然debug时看到Autocomplete处于loading状态，那可以先等待loading提示消失，再去查找目标选项，避免在加载过程中无效等待：

test('加载完成后显示Autocomplete选项', async () => {
  render(<ExpertWall />);
  
  fireEvent.click(screen.getByText('创建新用户'));
  const emailInput = screen.getByLabelText('用户邮箱');
  fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
  
  // 等待loading状态消失
  await waitFor(() => {
    expect(screen.queryByText('loading')).not.toBeInTheDocument();
  }, { timeout: 1000 });
  
  // 此时Autocomplete已加载完成，直接获取选项
  const userOption = screen.getByText('test@example.com');
  expect(userOption).toBeInTheDocument();
});

3. 优化Autocomplete的元素定位方式 #

MaterialUI的Autocomplete选项会被包裹在特定的DOM结构中，直接用findByText可能不够精准。可以结合getByRole并指定选项名称，或者给选项添加data-testid来提高定位效率：

方式一：用角色定位 #

const userOption = await screen.findByRole('option', { name: 'test@example.com' });

方式二：添加data-testid #

在Autocomplete组件中配置renderOption，给每个选项添加测试ID：

<Autocomplete
  renderOption={(props, option) => (
    <li {...props} data-testid={`user-option-${option.email}`}>
      {option.email}
    </li>
  )}
  // 其他配置
/>

然后在测试中直接定位：

const userOption = await screen.findByTestId('user-option-test@example.com');

4. 禁用React 18并发渲染（如果适用） #

如果你的项目用了React 18，并发渲染可能导致测试中异步更新的延迟。可以在测试中使用legacy渲染模式：

import { render } from '@testing-library/react';
import { createRoot } from 'react-dom/client';

const legacyRender = (ui) => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  const root = createRoot(container);
  root.render(ui);
  return {
    container,
    unmount: () => root.unmount(),
    ...screen,
  };
};

// 测试中用legacyRender替代原render
test('测试Autocomplete', async () => {
  legacyRender(<ExpertWall />);
  // 后续测试逻辑
});

为什么不推荐延长全局超时？ #

延长全局超时会增加单测的总执行时间，尤其是在CI环境中会拖慢构建速度。而且这种做法只是掩盖了测试逻辑中的异步等待问题，没有从根源上解决请求与元素查找的时序问题。

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