Тестирование функции в React JS Jest Testing

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

это мой тест

it('Expect HandleFilterChange', () => {
    const handleFilterChange = jest.fn();
    handleFilterChange();
    const handleChangeEvent = wrapper.find("noJava8")
    console.info("this is what Handle Change Equals ",handleChangeEvent)
    expect(handleChangeEvent).toEqual("")
    handleChangeEvent.simulate('lowCodeCoverage', { handleFilterChange: 27 });
    expect(store.getActions()[0]).to.deep.equal(noJava8);
    expect(handleFilterChange).toHaveBeenCalled()
 })

и это мой код

handleChangeEvent = name => event => { console.info(name)
var options = {lowCodeCoverage: this.props.lowCodeCoverage, noBasePOM: this.props.noBasePOM, noJava8: this.props.noJava8};
options[name] = event.target.checked;
this.props.handleFilterChange(options);
console.info(this.handleChangeEvent)

};

<FormControlLabel
                  control = {<Checkbox checked = {this.props.lowCodeCoverage} 
onChange = {this.handleChangeEvent('lowCodeCoverage')} 
value = "lowCodeCoverage" color = "primary" />}
                  label = {I18n.t('filters.low-code-coverage')}
                />
                <FormControlLabel




 <WithStyles(FormControl) component = "filter-options">
        <WithStyles(FormGroup)>
          <WithStyles(FormControlLabel) id = "lowCodeCoverage" control = {{...}} label = "low-code-coverage" />
          <WithStyles(FormControlLabel) id = "noBasePom" control = {{...}} label = "no-base-pom" />
          <WithStyles(FormControlLabel) id = "noJava8" control = {{...}} label = "no-java-8" />
        </WithStyles(FormGroup)>

Как вы здесь делаете мелкий рендеринг?

Sakhi Mansoor 31.08.2018 19:45

wrapper = shallow (<FilterOptions />) Он определен выше в файле

Jakob Long 31.08.2018 19:49

также добавьте код вашего метода рендеринга

Sakhi Mansoor 31.08.2018 19:51

добавил это к исходному вопросу

Jakob Long 31.08.2018 19:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
181
1

Ответы 1

Вы можете смоделировать событие change следующим образом:

Если noJava8 - это идентификатор FormControlLabel, это мое предположение.

const handleChangeEvent = jest.fn();
wrapper = shallow(<FilterOptions.WrappedComponent handleChangeEvent= {handleChangeEvent}  />).dive();
wrapper.find('#noJava8').simulate('change');
expect(handleChangeEvent).toHaveBeenCalled();

Этот тест будет пройден.

Я получил эту ошибку. Метод «моделирования» предназначен для запуска только на одном узле. 0 нашел взамен.

Jakob Long 31.08.2018 20:03

вы добавили id в formLabel?

Sakhi Mansoor 31.08.2018 20:03

добавил это, и теперь я получаю эту «Ожидаемую фиктивную функцию, которая была вызвана, но она не была вызвана».

Jakob Long 31.08.2018 20:11

Отредактировал свой ответ. Был change вместо click

Sakhi Mansoor 31.08.2018 20:12

по-прежнему возникает та же проблема.

Jakob Long 31.08.2018 20:15

Пожалуйста, сделайте это: console.info (wrapper.debug ())

Sakhi Mansoor 31.08.2018 20:17

добавил это к моему исходному вопросу

Jakob Long 31.08.2018 20:21

@JakobLong Я отредактировал свой ответ, пожалуйста, используйте WrappedComponent и ныряйте для HOC

Sakhi Mansoor 02.09.2018 12:19

Другие вопросы по теме