Как проверить реквизиты, которые обновляются обработчиком onChange в библиотеке реагирующего тестирования?

Question

У меня есть обработчик onChange для ввода, который я пытаюсь протестировать на основе того, что я прочитал в документации по Dom Testing Library здесь и здесь.

Одно из различий в моем коде заключается в том, что вместо использования локального состояния для управления входным значением я использую реквизиты. Таким образом, функция onChange фактически вызывает другую функцию (также полученную через реквизиты), которая обновляет состояние, которое было "поднято", для другого компонента. В конечном счете, значение для ввода принимается компонентом, а входное значение обновляется.

Я издеваюсь над реквизитом и пытаюсь сделать несколько простых тестов, чтобы доказать, что обработчик onChange работает как положено.

Я ожидаю, что функция, вызываемая в обработчике изменений, будет вызываться столько же раз, сколько fireEvent.change используется в тесте, и это работает с:

const { input } = setup();
fireEvent.change(input, { target: { value: "" } });
expect(handleInstantSearchInputChange).toHaveBeenCalledTimes(1);

Я ожидаю, что input.value читается из исходной установки mock prop, и это работает с:

  const { input } = setup();
  expect(input.value).toBe("bacon");

Однако я делаю что-то глупое (казалось бы, совсем не разбираясь в фиктивных функциях), и не могу понять, почему следующий блок не обновляет input.value и продолжает читать настройку input.value из оригинальная макетная подставка.

Это терпит неудачу с ожиданием "" / полученный "бекон" <= установленный в оригинальной пропе

fireEvent.change(input, { target: { value: "" } });
expect(input.value).toBe("");

ВОПРОС: Как я могу написать тест, чтобы доказать, что input.value был изменен, учитывая код ниже? Я предполагаю, что мне нужна функция mock handleInstantSearchInputChange, чтобы что-то сделать, но я пока не знаю, что я здесь делаю.

Спасибо за любой совет о том, как это сделать и / или лучше понять это.

Тестовый файл

import React from "react";
import InstantSearchForm from "../../components/InstantSearchForm";
import { render, cleanup, fireEvent } from "react-testing-library";

afterEach(cleanup);

let handleInstantSearchInputChange, props;
  handleInstantSearchInputChange = jest.fn();
  props = {
    foodSearch: "bacon",
    handleInstantSearchInputChange: handleInstantSearchInputChange
  };

const setup = () => {
  const utils = render(<InstantSearchForm {...props} />);
  const input = utils.getByLabelText("food-search-input");
  return {
    input,
    ...utils
  };
};

it("should render InstantSearchForm correctly with provided foodSearch prop", () => {
  const { input } = setup();
  expect(input.value).toBe("bacon");
});

it("should handle change", () => {
  const { input } = setup();
  fireEvent.change(input, { target: { value: "" } });
  expect(input.value).toBe("");
  fireEvent.change(input, { target: { value: "snickerdoodle" } });
  expect(input.value).toBe("snickerdoodle");
});

Составная часть

import React from "react";
import PropTypes from "prop-types";

const InstantSearchForm = props => {
  const handleChange = e => {
    props.handleInstantSearchInputChange(e.target.value);
  };
  return (
    <div className="form-group">
      <label className="col-form-label col-form-label-lg" htmlFor="food-search">
        What did you eat, fatty?
      </label>
      <input
        aria-label="food-search-input"
        className="form-control form-control-lg"
        onChange={handleChange}
        placeholder="e.g. i ate bacon and eggs for breakfast with a glass of whole milk."
        type="text"
        value={props.foodSearch}
      />
    </div>
  );
};

InstantSearchForm.propTypes = {
  foodSearch: PropTypes.string.isRequired,
  handleInstantSearchInputChange: PropTypes.func.isRequired
};

export default InstantSearchForm;

Answer 1

То, как вы думаете о своих тестах, немного неверно. Поведение этого компонента чисто следующее:

1. Когда передал текст в качестве опоры foodSearch оказывает это правильно.
2. Компонент вызывает соответствующий обработчик при изменении.

Так что проверяйте только вышеперечисленное.

Что происходит с foodSearch Подпор после запуска события изменения не входит в обязанности этого компонента (InstantSearchForm). Эта ответственность лежит на методе, который обрабатывает это состояние. Итак, вы бы хотели протестировать этот метод-обработчик как отдельный тест.