Блог

Главная - Вопросы по программированию - Как протестировать событие щелчка на электронных диаграммах с использованием Jest / Enzyme?

Как протестировать событие щелчка на электронных диаграммах с использованием Jest / Enzyme?

#reactjs #jestjs #enzyme #echarts

#reactjs #jestjs #enzyme #электронные диаграммы

Вопрос:

У меня есть гистограмма echarts-for-react. При barClick страница перенаправляется на другой URL. Как мне протестировать это событие щелчка с помощью Enzyme / Jest?

 const handleClick = (params) => {
  if(params.data){
    let url = get_route(params.value[2])
    window.open(url, "_self")
  }
  return null
};
  
 let onEvents = {'click': handleClick};

<ReactEcharts
            option={this.getOption()}
            onEvents={onEvents}
            style={{width: '100%', height: `${height}px`}}
            className='react_for_echarts' 
            />

Ответ №1:

Я не знаю об этом echarts компоненте, но обычно для тестирования его с помощью enzyme вам следует:

  1. Следите за своей функцией, чтобы отслеживать ее вызовы (вы должны изменить ее с функции со стрелкой на соответствующую функцию js) const spy = jest.spyOn(MyComponent.prototype, 'handleClick');
  2. Смонтируйте свой компонент const component = mount(<MyComponent/>);
  3. Имитировать нажатие на нужную кнопку (?) component.find(ReactEcharts).simulate('click');
  4. Обновите свой компонент component.update();
  5. Проверьте, была ли вызвана функция expect(spy).toHaveBeenCalled();