Menu
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)
486
Simulate a Click Event The onClick should pass through to the component's underlying <button /> element because we're spreading ( {... props} ) that props through to it. In the test, we create a ref so that we can pass it to the rendered Button and later to the Simulate. click call.
Test With Shallow, Mount, or Render There are three ways to load a React component with Enzyme: shallow(<Component />) : It tests components in isolation from the child components they render. mount(<Component />) : It tests components as well as their children. It enables testing the full lifecycle of components.
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.
67
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
