Входное значение обновляется при запуске события `blur` в модульном тесте, даже если оно не установлено явно в компоненте - PullRequest
Новая
       25

Входное значение обновляется при запуске события `blur` в модульном тесте, даже если оно не установлено явно в компоненте

0 голосов
/ 28 января 2020

Я создал компонент Input, который принимает value prop и инициализирует его внутреннее состояние displayValue, используя его (форматирует value перед отправкой displayValue). Пожалуйста, смотрите код ниже: 

const formatValue = value => `value: ${value}`;

export default function Input({ value }) {
  const [displayValue, setDisplayValue] = useState(formatValue(value));

  const handleBlur = () => {
    setDisplayValue(formatValue(value));
  };

  return <input data-testid="input" value={displayValue} onBlur={handleBlur} />;
}

Я пропустил onChange, чтобы проверить onBlur в изоляции. Я пытаюсь протестировать поведение onBlur, вызвав событие размытия через React Testing Library: 

test("onBlur", () => {
  const { getByTestId } = render(<Input value="1000" />);
  const inputField = getByTestId("input");

  fireEvent.blur(inputField, {
    target: { value: "500" }
  });

  expect(inputField.value).toEqual("value: 1000");
});

Я специально отправляю объект event во время стрельбы со значением 500, чтобы продемонстрировать проблему. После запуска размытия событие inputField.value не должно измениться, потому что я не установил входное значение из event в своем коде. Таким образом, отображаемое значение должно быть value: 1000. Но как ни странно, фактический полученный результат составляет 500 (даже не value: 500). Можете ли вы помочь мне отладить проблему? Вот codesandbox , где я повторил проблему.

ПРИМЕЧАНИЕ. Если я useState(value) instead of используюState (formatValue (value)) ``, тест пройден!

...