React单元测试表单时如何访问输入节点value属性完成断言

云上老周

2026-8-27

问题原因

原生input属于无内容的空元素，不存在子节点，所以访问childNodes[0]会得到undefined，自然无法读取其上的textContent、nodeValue等属性。
你在控制台看到的React内部props上的value是框架内部维护的属性，不属于DOM标准API，直接读取内部属性做断言既不符合测试规范，也会因为React版本迭代出现兼容性问题。

正确实现方式

你通过screen.getByTestId拿到的firstNameInput本身就是标准DOM元素，直接访问它的原生value属性就能拿到当前输入框的值，不需要绕路读取子节点或者框架内部属性。
修正后的测试代码：

test("pressing cancel clears form fields", async () => {
  render(<App />);

  const firstNameInput = screen.getByTestId("name-input");
  const cancelForm = screen.getByTestId("cancel-form");

  // 模拟输入后可以先校验输入是否生效，提前排除输入事件未触发的问题
  fireEvent.change(firstNameInput, { target: { value: "Bob" } });
  expect(firstNameInput.value).toBe("Bob");

  fireEvent.click(cancelForm);

  await waitFor(() => {
    // 直接断言原生value属性为空即可
    expect(firstNameInput.value).toEqual("");
  });
});

优化参考

官方更推荐使用@testing-library/user-event代替原生fireEvent做交互模拟，它的触发逻辑更贴近真实用户操作，稳定性更高，写法如下：

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

test("pressing cancel clears form fields", async () => {
  const user = userEvent.setup();
  render(<App />);

  const firstNameInput = screen.getByTestId("name-input");
  const cancelBtn = screen.getByTestId("cancel-form");

  // 模拟用户逐字输入
  await user.type(firstNameInput, "Bob");
  expect(firstNameInput.value).toBe("Bob");

  // 模拟用户点击取消
  await user.click(cancelBtn);

  // userEvent的交互方法会自动等待状态更新完成，无需额外包裹waitFor
  expect(firstNameInput.value).toBe("");
});