为何调用screen.debug()时React组件输入框值未更新？

问题重现 #

测试React受控输入组件时遇到异常现象：输入数字6后，screen.debug(input)显示输入框的value属性为0，但expect(input).toHaveValue(6)断言成功通过，同时页面上展示数字的div已更新为6。

组件代码：

import * as React from "react";

function FavoriteNumber({ min = 1, max = 9 }) {
  const [number, setNumber] = React.useState(0);
  const [numberEntered, setNumberEntered] = React.useState(false);

  function handleChange(event) {
    setNumber(Number(event.target.value));
    setNumberEntered(true);
  }

  const isValid = !numberEntered || (number >= min && number <= max);
  return (
    <div>
      <label htmlFor="favorite-number">Favorite Number</label>
      <input
        id="favorite-number"
        type="number"
        value={number}
        onChange={handleChange}
      />
      <div role="not">{number}</div>

      {isValid ? null : <div role="alert">The number is invalid</div>}
    </div>
  );
}

export { FavoriteNumber };

测试代码：

test("Renders an error message when has a number outside of range", async () => {
  const user = userEvent.setup();
  render(<FavoriteNumber></FavoriteNumber>);

  const input = screen.getByLabelText(/favorite number/i);
  await user.type(input, "6");

  const theNumber = screen.getByRole(/not/i);
  screen.debug(theNumber);
  screen.debug(input);
});

测试输出：

console.log
    <div
      role="not"
    >
      6
    </div>

      at logDOM (node_modules/@testing-library/dom/dist/pretty-dom.js:108:13)

  console.log
    <input
      id="favorite-number"
      type="number"
      value="0"
    />

      at logDOM (node_modules/@testing-library/dom/dist/pretty-dom.js:108:13)

原因分析 #

核心差异在于DOM元素的attribute（属性）和property（特性）的区别：

• React受控组件通过更新DOM元素的value property同步state值，这是输入框的实际显示值。
• screen.debug()打印的是HTML元素的value attribute，即初始渲染时设置的静态属性，React不会主动更新该attribute同步state变化。
• expect(input).toHaveValue(6)断言成功，是因为toHaveValue方法检查的是DOM元素的value property，而非HTML的attribute。

解决方案 #

如果想在调试时看到输入框的当前实际值，可直接打印DOM元素的value property：

// 替换screen.debug(input)为以下代码
console.log("当前输入框实际值:", input.value);

也可理解screen.debug()的输出逻辑：它展示的是初始HTML属性，不影响测试结果的有效性——只要断言通过，就说明组件状态和DOM实际值已正确更新。

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