TestUtils.Simulate.change doesn't update value of input

Question

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

Richard Rutsche · Accepted Answer · 2016-05-17 14:25:56Z

1

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

answered May 17, 2016 at 14:25

Richard Rutsche

1,20610 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Federica Tomola Over a year ago

This is the opposite of my experience. I had input.value, but the value wasn't updating. I changed it to input.getAttribute('value'), and it's updating.

Collectives™ on Stack Overflow

TestUtils.Simulate.change doesn't update value of input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related