React Testing Library中第二个元素fireEvent.change不更新问题求助

针对你遇到的弹窗内两个输入框触发change后第二个值无法更新的问题，结合场景给出几个排查和解决方向：

1. 检查state更新逻辑是否存在闭包陷阱 #

组件里的updateInput如果没有使用函数式更新，很可能因为React state异步更新的特性，导致第二个输入框的更新覆盖或失效。

错误示例（存在闭包问题）：

const [formData, setFormData] = useState({ input1: '', input2: '' });
const updateInput = (e) => {
  const { name, value } = e.target;
  // 直接使用当前formData，连续更新时可能拿到旧的state
  setFormData({ ...formData, [name]: value });
};

修正为函数式更新，确保每次取到最新的state：

const updateInput = (e) => {
  const { name, value } = e.target;
  setFormData(prevState => ({
    ...prevState,
    [name]: value
  }));
};

2. 测试中等待弹窗DOM稳定后再操作 #

弹窗的显示通常依赖state切换，属于异步DOM更新，直接用getBy*可能拿到未完全渲染的元素。改用findBy*（需await）或配合waitFor等待DOM更新：

// 打开弹窗
fireEvent.click(screen.getByRole('button', { name: '打开弹窗' }));

// 等待输入框渲染完成
const input1 = await screen.findByLabelText('输入框1');
const input2 = await screen.findByLabelText('输入框2');

// 触发第一个输入框更新，并等待状态生效
fireEvent.change(input1, { target: { name: 'input1', value: 'test' } });
await waitFor(() => expect(input1).toHaveValue('test'));

// 再处理第二个输入框
fireEvent.change(input2, { target: { name: 'input2', value: 'kekw' } });
await waitFor(() => expect(input2).toHaveValue('kekw'));

3. 匹配userEvent的兼容版本 #

@testing-library/react@12.1.5需要搭配**@testing-library/user-event@13.x**版本使用，旧版本userEvent会有兼容性问题。先安装对应版本：

npm install @testing-library/user-event@13 --save-dev

然后使用userEvent.type时必须加await，因为它是异步操作：

await userEvent.type(input1, 'test');
await userEvent.type(input2, 'kekw');
expect(input2).toHaveValue('kekw');

4. 确认输入框的name属性绑定正确 #

检查组件中输入框的name属性是否和formData的字段名完全一致，比如输入框的name="input2"要对应formData.input2，否则updateInput无法正确定位到要更新的字段。

另外注意：@testing-library/react已经自动处理了act包裹，手动添加act反而可能干扰测试流程，不需要额外包裹。

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