Why doesn't the 'change' event in jQuery fire onChange in ReactJS?
<p>I am writing tests for ReactJS components in karma + PhatomJS. I am rendering the component and <strong>using jQuery</strong> as a shortcut to target dom elements and simulate user actions. Clicking, text input, etc works fine. However, the selection in a select doesn't seem to execute the component's onChange event. Here's the code:</p>

<pre><code>import React from 'react'
import ReactDOM from 'react-dom'
import $ from 'jquery'

class SelectComponent extends React.Component {
    handleChange (event) {
        // This is NEVER fired
        doSomething()
    }
    render () {
        return (
            &lt;select id='Fruits' onChange={this.handleChange.bind(this)}&gt;
                &lt;option value='A'&gt;Apple&lt;/option&gt;
                &lt;option value='B'&gt;Banana&lt;/option&gt;
                &lt;option value='C'&gt;Cranberry&lt;/option&gt;
            &lt;/select&gt;
        )
    }
}

ReactDOM.render(&lt;SelectComponent /&gt;, document.createElement('div'))

// Pragmatically change the selection
$('#Fruits').val('B').change()
</code></pre>

<p>However, without jQuery, it seems to work just fine. When I change the last line to:</p>

<pre><code>const element = document.getElementById('Fruits')
element.value = value
element.dispatchEvent(new Event('change', { bubbles: true }))
</code></pre>

<p><strong>the callback in ReactJS gets fired</strong>! </p>

<p>I cannot spot any difference. I thought that the code above is practically the same what jQuery does with .val('B').change(). Perhaps a jQuery ninja can give me a hint on this one?</p>