I'm having issues firing onChange
in Jasmine tests (and using Phantom) with React. The particular issue I am seeing is with a range input. Supposing that a className
changes in a React ponent after the onChange
event. In Jasmine I am unable to manually fire that onChange
in my tests so that I can then assert the DOM changes.
Everything I have tried so far doesn't work - both using React.addons.TestUtils
or just doing a simple $(node).trigger('change')
on the node in question. I cannot get the onChange
to fire on the React node. Does anyone see anything awry with this sample code, or am I missing something?
For example here would be the sample Jasmine code:
// assuming I already have full access to node and its in the DOM
var node = React.findDOMNode(this.refs.input);
// updating input `value` manually
node.value = 10;
// simulate change to `input` so that `onChange` will fire
React.addons.TestUtils.Simulate.change(node);
// or React.addons.TestUtils.Simulate.change(node, { target: { value: 10 } });
// assert that sample `className` is changed for example, this could be anything - just a simple assertion that something in the DOM changed as expected
expect(node.className).not.toBe('hidden');
I can never get the above expect
to pass - nothing in the DOM is picking up the value
change on the node in question.
Here's also a codepen illustrating the issue:
Thanks for your help everyone!
I'm having issues firing onChange
in Jasmine tests (and using Phantom) with React. The particular issue I am seeing is with a range input. Supposing that a className
changes in a React ponent after the onChange
event. In Jasmine I am unable to manually fire that onChange
in my tests so that I can then assert the DOM changes.
Everything I have tried so far doesn't work - both using React.addons.TestUtils
or just doing a simple $(node).trigger('change')
on the node in question. I cannot get the onChange
to fire on the React node. Does anyone see anything awry with this sample code, or am I missing something?
For example here would be the sample Jasmine code:
// assuming I already have full access to node and its in the DOM
var node = React.findDOMNode(this.refs.input);
// updating input `value` manually
node.value = 10;
// simulate change to `input` so that `onChange` will fire
React.addons.TestUtils.Simulate.change(node);
// or React.addons.TestUtils.Simulate.change(node, { target: { value: 10 } });
// assert that sample `className` is changed for example, this could be anything - just a simple assertion that something in the DOM changed as expected
expect(node.className).not.toBe('hidden');
I can never get the above expect
to pass - nothing in the DOM is picking up the value
change on the node in question.
Here's also a codepen illustrating the issue: http://codepen.io/bessington/pen/azXwVy
Thanks for your help everyone!
Share Improve this question edited Mar 25, 2015 at 18:31 Bess asked Mar 24, 2015 at 19:41 BessBess 4761 gold badge6 silver badges18 bronze badges 02 Answers
Reset to default 3Well looks like it works properly when I use TestUtils. For the life of me not sure why I couldn't get this fully working before. But here is the solution in case anyone else needs it:
<!DOCTYPE html>
<html>
<head>
<title>React test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare./ajax/libs/jasmine/2.0.0/jasmine.css"/>
<script defer src="http://cdnjs.cloudflare./ajax/libs/jasmine/2.0.0/jasmine.js"></script>
<script defer src="http://cdnjs.cloudflare./ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
<script defer src="http://cdnjs.cloudflare./ajax/libs/jasmine/2.0.0/boot.js"></script>
<script defer src="https://cdnjs.cloudflare./ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script defer src="http://fb.me/JSXTransformer-0.10.0.js"></script>
</head>
<body>
<script type="text/jsx">
/**@jsx React.DOM*/
var sampleInput = React.createClass({
getInitialState: function() {
return {
inputVal: 2
}
},
updateValue: function(e) {
// update textual value
this.setState({ inputVal: e.currentTarget.valueAsNumber });
},
render: function() {
return (
<div>
<input type="range" min="0" max="10"
onChange={this.updateValue}
value={this.state.inputVal} />
</div>
)
}
});
// Jasmine
describe('A ponent', function() {
var TestUtils = React.addons.TestUtils;
var inputInstance;
describe('with input range', function() {
it('updates its value `onChange`', function() {
inputInstance = TestUtils.renderIntoDocument(
React.createElement(sampleInput, { sample: true })
);
// sanity check
expect(inputInstance.props.sample).toBe(true);
var input = React.findDOMNode(inputInstance).querySelector('input');
input.value = 10;
TestUtils.Simulate.change(input);
expect(input.valueAsNumber).toBe(10);
expect(inputInstance.state.inputVal).toBe(10);
});
});
});
</script>
</body>
</html>
Adding my 2 cents on your own answer...
A better option would be to set a spy function on jasmine and check whether it has been called:
describe('A ponent', () => {
describe('when it renders', () => {
it('should trigger the onChange function', () => {
const callback = jasmine.createSpy('changed');
const sut = TestUtils.renderIntoDocument(
<MyReactComponent onChange={callback}>BlaBlaBla</MyReactComponent>
);
const domNode = ReactDOM.findDOMNode(sut);
const input = domNode.querySelector('input');
TestUtils.Simulate.change(input);
expect(callback).toHaveBeenCalled();
});
});
});