使用 Jest 和酶react输入 onchange 模拟不更新值

IT技术 javascript reactjs jestjs single-page-application enzyme
2021-05-14 18:49:19

我有一个功能组件如下

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() 但它不起作用。

你可以在这里运行测试

2个回答

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

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

所以如果你 

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

你会通过的。

PS可能更安全的是，在使用酶进行测试时始终避免使用中间变量。

对于那些像@NishamMahsin 一样有多个输入的人。我遇到了同样的问题，并发现在模拟（'更改'）之后没有更新包装器的工作解决方案。#1999

简而言之：

.simulate('change', {target: {name: 'inputFirstName', value: 'value'}})

我花了很长时间来解决这个问题，所以希望它可以帮助这里的人......

其它你可能感兴趣的问题
上一篇在带有typescript的材料 ui 中使用 makeStyles 下一篇Azure 无法访问 React Web 应用程序中的环境变量