React Testing Library测试表单时getAttribute('value')为null如何解决

你混淆了DOM的**属性（Property）和特性（Attribute）**的差异：

• Attribute 是写在HTML标签上的静态值，仅代表初始状态，除非手动调用setAttribute修改，否则不会跟随用户输入、受控组件state更新而变化，getAttribute读取的就是这个静态值，所以永远拿不到动态更新的输入内容。
• Property 是DOM节点对象的JS属性，会实时同步当前输入值和受控组件的state，你测试时读取element.value能拿到正确值就是这个原因。

分两类场景处理：

1. 仅测试代码断言错误 #

直接修改测试里的断言逻辑即可：
把原来的

expect(Fields[0].getAttribute('value')).toBe("weaam");

替换为更符合React Testing Library最佳实践的写法：

// 写法1：直接读Property
expect(Fields[0].value).toBe("weaam");
// 写法2：用内置匹配器（更推荐，语义更清晰）
expect(Fields[0]).toHaveValue("weaam");

2. 业务提交逻辑存在错误 #

你当前用的是React受控组件方案，所有表单值都已经存在this.state.Submittion状态中，提交表单时直接读取这个状态数组即可，不需要手动从DOM节点取值，更不能用getAttribute取值，从state直接读值不仅更可靠，还能彻底规避这类DOM属性读取错误的问题。

你当前的测试写法存在冗余问题：

• fireEvent、waitFor本身已经内置了act包裹，不需要手动额外加act，多余的异步act包裹反而可能导致时序异常。
• 不要在waitFor回调中执行fireEvent触发操作，waitFor仅用来等待异步渲染的结果，操作逻辑放在waitFor外部执行即可。

内容的提问来源于stack exchange，提问作者We'Am BaSsem