I make a very easy component to test the TestUtils.Simulate reactJS method. But I don't know why this method doesn't update the value of my component. I guess I wrote my code on the wrong way.
This is my little component :
'use strict';
var React = require('react');
var MyComponent = React.createClass({
getInitialState: function () {
return {value: 'a'};
},
handleChange: function (event) {
this.setState({value: event.target.value});
},
render: function () {
return (
<div>
<input
ref="inp"
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</div>
);
}
});
module.exports = MyComponent;
And this is the test page :
jest.disableAutomock();
jest.unmock('../resources/assets/js/testcomponents/testvalue');
var React = require('react'),
MyComponent = require('../resources/assets/js/testcomponents/testvalue.js'),
TestUtils = require('react-addons-test-utils'),
ReactDOM = require('react-dom');
describe('MyComponent', function () {
var AppElement = TestUtils.renderIntoDocument(<MyComponent/>);
var DomElement = ReactDOM.findDOMNode(AppElement);
var input = DomElement.getElementsByTagName('input')[0];
console.log('INPUT 1 as string: ' + input.outerHTML);
it('type', function () {
console.log('type=' + input.getAttribute('type'));
expect(input.getAttribute('type')).toEqual('text');
});
it('value', function () {
console.log('value=' + input.getAttribute('value'));
expect(input.getAttribute('value')).toEqual('a');
});
it('change', function (){
TestUtils.Simulate.change(input, {target: {value: 'giraffe'}});
expect(input.getAttribute('value')).toEqual('giraffe');
});
});
The line TestUtils.Simulate.change(input, {target: {value: 'giraffe'}}); doesn't make anything
I think the main issue is that you compare against
input.getAttribute('value')
which only contains the original value. You have to check the updated value like:
expect(input.value).toEqual('giraffe');
I set up a working jasmine test on jsfiddle Click