React+TypeScript中MUI Select组件Jest测试失败排查

问题梳理 #

• 无法定位Select的listbox元素，尝试screen.getByLabelText/getByRole/getByTestId均失败，最终通过inputProps给子input传入data-testid解决
• 第二次切换Select选项后，LeaveConfirmationModal未被检测到，expect(changeOriginModal).toBeInTheDocument()断言失败
• 已用act()包裹fireEvent.change，但仍收到需用act()包裹的控制台警告

测试目标：模拟用户选择Select选项，Mock Formik实例验证actionOrigin字段更新

逐个问题解决 #

1. MUI Select的listbox定位问题 #

你之前遇到的定位失败，核心原因是MUI Select的listbox默认是隐藏状态，仅当用户点击触发下拉后才会渲染到DOM中，所以直接调用查询方法会找不到元素。

除了你用inputProps传入data-testid的方法，还有更贴合React Testing Library理念的方式：

// 先定位Select的input并点击，触发下拉菜单渲染
const selectInput = screen.getByTestId('your-select-input-testid');
fireEvent.mouseDown(selectInput);

// 此时listbox已渲染，可通过role定位
const listbox = screen.getByRole('listbox');
// 或者定位具体选项
const targetOption = screen.getByText('目标选项文本');
fireEvent.click(targetOption);

如果一定要用data-testid给listbox标记，可以通过MUI Select的MenuProps传入：

// 组件代码中
<Select
  // 其他props
  MenuProps={{
    'data-testid': 'select-listbox'
  }}
/>

2. 第二次切换选项后Modal未检测到的问题 #

这个问题大概率是状态更新的异步性未被正确处理，或者Formik的字段更新未被正确Mock，导致Modal的渲染条件不满足。

解决步骤：

• 用waitFor包裹断言，等待Modal异步渲染：

// 第二次切换选项后
fireEvent.click(secondOption);
await waitFor(() => {
  const changeOriginModal = screen.getByTestId('leave-confirmation-modal');
  expect(changeOriginModal).toBeInTheDocument();
});

• 检查Modal的渲染条件：确认actionOrigin字段变化是否是Modal显示的触发条件，且Formik的values.actionOrigin确实被更新
• 确保Formik的Mock正确：如果是MockuseFormik，要确保setFieldValue方法能正确更新mock的values

3. 冗余的act()警告问题 #

React Testing Library的fireEvent、screen.getBy*等方法已经自动包裹了act()，手动包裹反而会导致警告。你需要去掉手动的act()包裹，改用RTL的异步处理方法（如waitFor、findBy*查询）来处理异步更新。

错误示例：

act(() => {
  fireEvent.change(selectInput, { target: { value: 'new-value' } });
});

正确写法：

fireEvent.change(selectInput, { target: { value: 'new-value' } });
// 异步操作后用waitFor等待断言
await waitFor(() => {
  expect(formikMock.setFieldValue).toHaveBeenCalledWith('actionOrigin', 'new-value');
});

Mock Formik实例验证actionOrigin更新 #

如果你的组件使用useFormik hook，可以这样Mock：

// 测试文件顶部
import { useFormik } from 'formik';

jest.mock('formik');

// 测试用例中
const mockSetFieldValue = jest.fn();
const mockUseFormik = useFormik as jest.MockedFunction<typeof useFormik>;

mockUseFormik.mockReturnValue({
  values: { actionOrigin: 'initial-value' },
  setFieldValue: mockSetFieldValue,
  // 其他需要的Formik方法
});

// 触发Select选择后，验证方法调用
fireEvent.click(targetOption);
expect(mockSetFieldValue).toHaveBeenCalledWith('actionOrigin', 'selected-value');

如果组件是通过Formik组件包裹的，可以在渲染时传入Mock的props：

render(
  <Formik
    initialValues={{ actionOrigin: 'initial' }}
    onSubmit={jest.fn()}
  >
    {({ setFieldValue }) => {
      jest.spyOn({ setFieldValue }, 'setFieldValue');
      return <YourSelectComponent />;
    }}
  </Formik>
);

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