使用Jest/TypeScript测试表单提交时无法通过name获取输入值的问题

常见原因及对应解决方法 #

• 测试框架未正确模拟表单元素的name映射
  部分测试框架（如Jest搭配React Testing Library）在模拟表单提交时，不会自动将带name属性的输入框挂载到e.target的属性上。可以改用FormData来获取值，这种写法在开发和测试环境都能稳定运行：

  // 替代 e.target.InputName.value 的写法
  const formData = new FormData(e.target);
  const inputValue = formData.get('InputName');
  

• 测试代码未正确传递输入框的name属性
  检查测试中渲染的输入组件是否正确传入了name属性。比如自定义输入组件在测试时漏传name，会导致e.target上没有对应属性：

  // 错误示例：未传递name属性
  render(<CustomInput />);
  // 正确示例：确保传入name
  render(<CustomInput name="InputName" />);
  

• 事件对象模拟存在差异
  原生事件对象和测试框架模拟的事件对象不完全一致。如果必须通过e.target.InputName访问，可以手动给模拟事件对象添加对应属性：

  // 在测试用例中手动配置事件对象
  const input = screen.getByRole('textbox', { name: /输入框说明/i });
  input.value = '测试内容';
  const form = screen.getByRole('form');
  fireEvent.submit(form, {
    target: {
      InputName: input
    }
  });
  

推荐实践 #

优先使用FormData处理表单数据，这种方式不依赖框架或测试环境的特定实现，兼容性更强，也更贴近真实浏览器的行为逻辑。

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