Событие Click внутри Modal: невозможно прочитать свойство «щелчок» null

Пытаюсь понять, почему мое тестовое событие клика не работает. Я применил ту же настройку для другого события щелчка в том же файле, и это сработало. Использование Jest и Enzyme для реагирования js Цель: событие щелчка, способное захватить узел и пройти тест

Это то, что у меня есть для моего тестового примера:

Test.js

 describe("Test Modal Components and Events ", () => {
let mountingDiv;
let wrapper;

beforeEach(() => {
wrapper = mount(<MemoryRouter keyLength={0}  initialEntries={["/add"]} ><Policies {...baseProps} /></MemoryRouter>);
mountingDiv = document.createElement('div');
document.body.appendChild(mountingDiv);
})

прецедент

it('Test click event on Close - Modal', () => {
 ReactModal.setAppElement('body');
 wrapper = mount( <ReactModal isOpen></ReactModal>,
  {attachTo: mountingDiv}
 );
 wrapper.setState({
    quickFilterModalOpen: false,
 })
 wrapper.update()
 expect(!!document.body.querySelector('.fullmodal')).toEqual(true);
 expect(!!document.body.querySelector('.sidemodal_addnew_x')).toEqual(true)
 document.querySelector("#closemodal-id").click();
});

Вот файл.js

<Modal isOpen={this.state.quickFilterModalOpen} style={descriptionModalStyle}>
  <div>
    <div className='fullmodal'>
    <div className='sidemodal_addnew_x' id="closemodal-id" onClick={this.closeModal}>

попробуйте выполнить console.log для document.querySelector("#closemodal-id") в своем тестовом примере и посмотрите, вернет ли он вам что-нибудь.

Rikin 22.05.2019 17:12

возвращает null, когда я делаю console.log(document.querySelector("#closemodal-id"))

user 9191 22.05.2019 17:28

тогда это ваша проблема, потому что вы не можете вызвать .click на нулевое значение

Rikin 22.05.2019 17:29

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

user 9191 22.05.2019 17:31

Я бы сказал, попробуйте отобразить его в браузере, а затем посмотрите, работает ли тот же код для вас, т.е. querySelector возвращает ваш узел или нет.

Rikin 22.05.2019 17:32
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
5
445
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, что это проблема привязки, я выберу прослушиватель событий или иным образом выберу такой подход, как onClick = {this.closeModal.bind(this)} или аналогичный, это зависит от вашего кода Надеюсь, поможет

проблема не в привязке, а в компоненте рендеринга

Rikin 22.05.2019 17:30
Ответ принят как подходящий

modal должен быть виден для нажатия кнопки закрытия. Установите для quickFilterModalOpen значение true и используйте .find(selector), чтобы найти элемент, по которому нужно щелкнуть. (https://airbnb.io/enzyme/docs/api/ReactWrapper/find.html)

    wrapper.setState({
        quickFilterModalOpen: true,
    })
    wrapper.update()
    wrapper.find("#closemodal-id").simulate("click");

я всегда использую wrapper.find. Невозможно использовать, когда дело доходит до модала. Так что мне потребовалось некоторое время, чтобы понять код выше

user 9191 22.05.2019 17:46

Попробуйте использовать shallow и установите для quickFilterModalOpen значение true, и, возможно, вы сможете найти элемент внутри оболочки.

sachin kalekar 22.05.2019 17:48

Можно ли использовать мелкий при экспорте по умолчанию с маршрутизатором (файл). ?

user 9191 22.05.2019 17:55

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