使用Material UI TextField时fireEvent.change无法修改元素值的解决方法

1. 确认组件为受控组件 #

Material UI TextField必须绑定state才能响应值更新。如果组件没有通过value和onChange关联状态，fireEvent.change无法触发值的同步修改。正确的组件写法示例：

import { useState } from 'react';
import TextField from '@mui/material/TextField';

function MyComponent() {
  const [inputValue, setInputValue] = useState("Step1");
  
  return (
    <TextField
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      // 其他属性
    />
  );
}

2. 替换fireEvent为@testing-library/user-event #

fireEvent仅模拟事件触发，无法完全复现真实用户交互的逻辑，而user-event更贴合实际操作流程，能正确处理Material UI内部的事件机制。使用方式如下：

import userEvent from '@testing-library/user-event';

// 直接输入新值（会覆盖原有内容）
await userEvent.type(screen.getByRole("textbox"), "new-value");

// 或者先清空再输入
await userEvent.clear(screen.getByRole("textbox"));
await userEvent.type(screen.getByRole("textbox"), "new-value");

注意：user-event的方法是异步的，必须配合async/await使用。

3. 修正断言逻辑 #

输入框的存储值在value属性中，并非页面渲染的文本节点，因此不能用getByText断言。正确的断言方式是直接检查输入框的value属性：

expect(screen.getByRole("textbox")).toHaveValue("new-value");

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