javascript - 使用 Jest 和 enzyme react 输入 onchange 模拟不更新值

Question

我有一个功能组件如下

const Input = () => {
  const [value, updateValue] = useState("");
  return (
    <input
      type="text"
      id="input"
      value={value}
      onChange={(e) => {
        updateValue(e.target.value);
      }}
    />
  );
};

export default Input;

并进行如下测试

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(input.prop("value")).toBe("Q");

问题是事件的模拟没有更新状态。我也尝试过wrapper.update()，但它不起作用。

您可以运行测试here

Answer 1

组件更新后，您的input变量仍然指向旧包装器。

包装器(根包装器除外)是不可变的，因此您需要再次 .find() 元素。

所以如果你

const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(wrapper.find("input").prop("value")).toBe("Q");

你会通过的。

PS 也许在使用 Enzyme 进行测试时避免使用中间变量会更安全。