Testing input change in React

Today I was adding tests to Farely. I wanted to test that when you input a new value, it updates the state.

According to React’s testing documentation, I should be able to trigger a change with:

var newValue = '27';
React.addons.TestUtils.Simulate.change(input.getDOMNode(), {target : {value : newValue}});

(Note: there’s really no documentation on the second argument {target: ...}. Grumble.)

Then I could assert:

expect(component.state.inputValue).toEqual(newValue);

But, as my tone might have implied, it’s not that straightforward. I finally landed on a relevant Github issue. What you have to do is change the input’s value manually, then call change:

var newValue = '27';
input.getDOMNode().value = newValue;
React.addons.TestUtils.Simulate.change(input.getDOMNode());

Then you can assert to your heart’s content, because the change will take place.

Update: it’s been fixed. No more manually setting the value!

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.