CODEWITHSUNDEEP
javascriptunit-testingreactjsreactjs-testutils
undefined
undefined

Reputation: 34269

Simulating text entry with reactJs TestUtils

I want to be able to simulate a user typing into a text box using reactjs so that I can test my validation status messages.

I have a react component which validates on keyUp

Below is a simple example of what I've tried.

nameInput.props.value = 'a';
React.addons.TestUtils.Simulate.keyUp(nameInput);
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');

This doesn't seem to change the value of the bound textbox when I debug in the validator

React.addons.TestUtils.Simulate.keyUp(nameInput, {key: 'a'});
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');

This doesn't either.

Could someone point me on the right track, the second is inline with the documentation I could find around simulate (http://facebook.github.io/react/docs/test-utils.html), the first makes sense to me (set the actual textbox value then fake an event)

Upvotes: 14

Views: 8998

Answers (2)

Matt Goo
Matt Goo

Reputation: 1136

I found that this syntax works better for me:

  const emailInput = component.refs.userEmailInput;
  emailInput.value = '[email protected]';
  Simulate.change(component.refs.userEmailInput);

The second line updates the input with the text, '[email protected]'. The last line triggers the change.

Upvotes: 1

jonowzz
jonowzz

Reputation: 425

By setting nameInput.props.value = 'a'; you are not actually updating the value in your component.

You should use React.addons.TestUtils.Simulate.change(nameInput, { target: { value: 'a' } }); or something similar to simulate modifying the actual value.

Upvotes: 26

Related Questions