Реакция входа на симуляцию обмена без обновления значения с использованием Jest и энзима

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 (), но он не работает.

вы можете запустить тест здесь

Answer 1

После обновления компонента ваша переменная input по-прежнему указывает на старую оболочку.

Обертки (кроме корневого) являются неизменяемыми, поэтому вам нужно снова .find() элемент.

Так что если вы

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

Вы получите его.

PS Возможно, безопаснее всегда избегать использования промежуточных переменных при тестировании с помощью Enzyme.