Now, there's no way I can be the only one having trouble with this. I have a simple page built with React. In it, I have a simple component which renders a select
and - on change of the value - fires a callback. The shell of this component looks like so:
const Selector = React.createClass({
render: function() {
return (
<select id="selector" onChange={this.props.onChange}>
<option value="1">1</option>
<option value="2">2</option>
</select>
);
}
})
I want to programmatically trigger a change event on the select from within my CasperJS test script to test the subsequent page changing effect, however while I'm able to select alternate options in JS the change event never fires. Additional color on the problem and things I've already tried below:
Things I've Tried
$('#selector').val('2').change()
$('#selector').val('2').trigger('change')
var el = $('#selector').get(0);
var event = new Event('input', {bubbles: true});
el.dispatchEvent(event);
var el = $('#selector').get(0);
var event = new Event('onSelect', {bubbles: true});
el.dispatchEvent(event);
var el = $('#selector').get(0);
var event = new Event('onChange', {bubbles: true});
el.dispatchEvent(event);
var el = $('#selector').get(0);
var event = new Event('change', {bubbles: true});
el.dispatchEvent(event);
Additional Color
I recognize the suggested way to trigger DOM events on components is by using the Simulate object in the React Test Utilities module. However, due to the fact that PhantomJS and SlimerJS are not node modules I can't simply require the module in my Casper test script.
Options
Right now, I feel like I have two options:
1) Use SpookyJS to drive my script through Node and require the react test utilities module inside the spooky script. I really don't want to do this, though.
2) Give up all hope of a headless browser testing framework and opt for a lower level approach using either Jest or Enzyme instead. I also don't want to do this, though.
Please
tell me theres a better way
Aucun commentaire:
Enregistrer un commentaire