Блог

Главная - Вопросы по программированию - Не имитировать «изменение» с помощью фермента

Не имитировать «изменение» с помощью фермента

#reactjs #jestjs #enzyme

Вопрос:

У меня есть компонент Reactjs, и в нем есть одна кнопка и средство выбора диапазона дат. Я хочу смоделировать события onclick и onchange для кнопки и средства выбора соответственно. Я могу имитировать нажатие кнопки. но при смене датапикера не работает

Я уже пробовал это

 headerComponent.find(`#prev_button`).at(1).simulate("click");
headerComponent.find(`#dropdown`).at(1).simulate("change", { value: "t" });

пожалуйста, посмотрите эту песочницу, нажмите здесь, чтобы получить полный код и тестовый файл

Ответ №1:

Основываясь на документации по ферменту, вы допускаете ошибку во втором аргументе simulate функции.

Чтобы смоделировать изменения на входе, вы должны изменить его следующим образом :

 headerComponent.find(`#dropdown`).at(1).simulate("change", { target: { value: "t" } });

Комментарии:

1. все равно это не работает. можете ли вы попробовать в песочнице ? @marzzy

Ответ №2:

Тестирование с помощью фермента-сложная задача. Вы должны стараться не тестировать зависимости, потому что вы уверены, что они уже протестированы. Сказав это, вы могли бы выполнить неглубокую визуализацию вместо монтирования и поиска RangePicker компонента в неглубоком дереве, получить обработчик, который вы передаете в onChange опоре, и вызвать его вручную, затем проверьте, что опора обратного вызова, которую вы передаете своему компоненту, вызывается с ожидаемым значением.

 describe.only("test", () => {
  it("should render", () => {
    const callBackToSetDates = jest.fn();
    const callBackToSetFilter = jest.fn();
    const wrapper = shallow(
      <Header
        {...headerProps1}
        callBackToSetDates={callBackToSetDates}
        callBackToSetFilter={callBackToSetFilter}
      />
    );
    const rangePickerOnChange = wrapper.find("RangePicker").prop("onChange");
    rangePickerOnChange("someValue");
    expect(callBackToSetDates).toHaveBeenCalledWith("someValue");
  });
});

цель состоит в том, чтобы протестировать только логику, которую вы добавляете в свой компонент, т. Е. Вы преобразуете значение, полученное из RangePicker, во что-то другое

 
        <RangePicker
          ...
          onChange={(value) => {
             callBackToSetDates(`I'm transforming ${value}`);
          }}
        />

и в вашем тесте

     rangePickerOnChange("someValue");
    expect(callBackToSetDates).toHaveBeenCalledWith("I'm transforming someValue");

вы можете увидеть, как это работает здесь https://codesandbox.io/s/cool-rosalind-uec6t?file=/src/tests/index.test.js

Если вы действительно хотите продолжать проверять, что видит фактический пользователь, вам нужно будет запускать события, которые пользователь выполняет при использовании компонента. В этом случае: вам нужно щелкнуть ввод, найти дату, щелкнуть ее, затем щелкнуть другую дату, чтобы полностью запустить onChange событие RangePicker компонента. Вы можете посмотреть, как antd тестирует его и копирует необходимую конфигурацию jest, которую они должны использовать для создания некоторых API DOM

Метки: