fireEvent.change()无法输入值：React表单测试问题求助

首先看你的测试失败原因，主要有两个关键点：

1. 断言逻辑错误 #

你当前的断言expect(input).toBe('name')是把DOM元素和字符串做比较，这显然不对——input是一个DOM节点对象，你需要检查它的value属性，或者用React Testing Library提供的更贴合用户行为的查询方法。

2. 状态更新的潜在优化点 #

你的updateForm函数里，setFormData直接依赖当前的formData，当后续添加多个输入框或遇到异步更新场景时，可能会因为闭包导致状态更新不及时，建议改用函数式更新的方式。

修正后的测试代码 #

it('Can put enter value into the input', () => { 
  const {getByLabelText} = render(<Submission/>);
  const input = getByLabelText(/name/i);
  // 明确传入id（和输入框的id对应，确保updateForm能正确匹配字段）
  fireEvent.change(input, { target: { id: 'name', value: 'name' }});
  // 方式1：直接检查input的value属性
  expect(input.value).toBe('name');
  // 方式2：用RTL更贴近用户视角的查询方法
  // expect(getByDisplayValue('name')).toBeInTheDocument();
});

主代码的优化建议（可选） #

把updateForm改成函数式更新，避免闭包带来的状态异常：

const updateForm = (e) => {
  // 接收前一次的state作为参数，确保状态更新的准确性
  setFormData(prev => ({ ...prev, [e.target.id]: e.target.value }));
};

这样修改后，fireEvent就能正确触发onChange并更新表单状态，测试也能正常通过了。

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