我有一个功能组件如下
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
最佳答案
组件更新后,您的input
变量仍然指向旧包装器。
包装器(根包装器除外)是不可变的,因此您需要再次 .find()
元素。
所以如果你
const event = { target: { value: "Q" } };
input.simulate("change", event);
expect(wrapper.find("input").prop("value")).toBe("Q");
你会通过的。
PS 也许在使用 Enzyme 进行测试时避免使用中间变量会更安全。
关于javascript - 使用 Jest 和 enzyme react 输入 onchange 模拟不更新值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58129563/