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

组件更新后，您的doReturn(createCustomerInteractionResponse).when(createCustomerInteraction).yourMethod(yourArguments);变量仍指向旧包装。

包装器（根目录除外）是不可变的，因此您需要再次input个元素。

所以，如果您

.find()

您会通过它。

使用酶测试时，始终避免使用中间变量可能更安全。

Answer 2

对于那些像@NishamMahsin 一样有多个输入的人。我遇到了同样的问题，并从 wrapper not updated after simulate('change'). #1999

找到了有效的解决方案

简而言之：

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

我花了很长时间做这件事，所以希望它可以帮助这里的人......

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

2 个答案: