как проверить метод компонента в ферменте, это вызывает метод, который передается как проп - PullRequest
Новая
       8

как проверить метод компонента в ферменте, это вызывает метод, который передается как проп

0 голосов
/ 14 января 2020 
handleConfirm = () => {
    this.props.handleCompletionDateChange();
    this.setState({ showInformation: false });
  };

У меня есть выше метод handleConfirm в нашем компоненте класса DateSection, если я тестирую метод handleConfirm, используя приведенный ниже код, я получаю ошибку как 

 TypeError: _this.props.handleCompletionDateChange is not a function

const wrapper1 = shallow(<DateSection {...props} />);

    const instance = wrapper1.instance() as any;

    spyOn(instance, 'handleConfirm').and.callThrough();

    expect(instance.handleConfirm()).toBe(true);
    expect(instance.handleConfirm).toHaveBeenCalled();

Как передать вышеупомянутую функцию в качестве реквизита во время тестирования

1 Ответ

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

Вам лучше не получать доступ к instance() в тестах. Тесты становятся fr agile (скажем, преобразование компонента в функционал сломает все, в то время как сам компонент может быть в порядке) и менее надежным (если вы вызываете методы, которые никогда не будут вызываться в реальной жизни - например, если этот метод не вызывается другими и не связан как обработчик событий). \

Вместо этого вам нужно найти способ вызвать его с помощью .simulate() или .props().someCabllackProp(...).

Предполагая, что handleConfirm равно onClick обрабатывается для некоторых <button name="confirm">: 

it('calls handleCompletionDateChange', () => {
  const handleCompletionDateChange = jest.fn();
  const wrapper1 = shallow(<DateSection 
    {...props} 
    handleCompletionDateChange={handleCompletionDateChange} \
  />);
  wrapper1.find("button[name='confirm']").simulate('click');
  expect(handleCompletionDateChange).toHaveBeenCalled();
})

То же самое для проверки this.setState({ showInformation: false }); части. Нам нужно выяснить, как проверить это на основе render результатов. Что-то вроде 

expect(wrapper1.find("[data-id='information-block']")).toHaveLength(0);
...