Почему обработчик события React не вызван в dispatchEvent?

Question

Рассмотрим следующий входной элемент в React компонента:

<input onChange={() => console.log('onChange')} ... /> 

Во время тестирования Реагировать компонент, я эмулировать пользователя, изменив значение входного:

input.value = newValue; 
TestUtils.Simulate.change(input); 

Это вызывает 'onChange' быть зарегистрированным как ожидается.

Однако, когда 'change' событие отправляется непосредственно (я использую jsdom):

input.value = newValue; 
input.dispatchEvent(new Event('change')); 

onChange обработчик не вызывается.

Почему?

Мотивация использования dispatchEvent, а не TestUtils.Simulate, заключается в том, что TestUtils.Simulate не поддерживает событие пузыря, и поведение моего компонента зависит от этого. Интересно, есть ли способ проверить события без TestUtils.Simulate?

Answer 1

React использует свою собственную систему событий с SyntheticEvents (предотвращает несовместимость с браузером и дает больше контроля над событиями).

Использование TestUtils правильно создает такое событие, которое запустит ваш слушатель onChange.

С другой стороны, функция dispatchEvent создаст «родное» событие браузера. Но обработчик событий, который у вас есть, управляется реакцией и поэтому реагирует только (badumts) на реакцию SyntheticEvents.

Вы можете прочитать на реагирующих событий здесь: https://facebook.github.io/react/docs/events.html

Answer 2

Один из способов сделать это без ReactTestUtils.Simulate:

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'https://unpkg.com/react-trigger-change/dist/react-trigger-change.js'; 
document.head.appendChild(script); 
input.value = value; 
reactTriggerChange(input); 

• https://github.com/vitalyq/react-trigger-change
• https://github.com/facebook/react/issues/3249#issuecomment-292919084