Simulating text entry with reactJs TestUtils

javascript unit-testing reactjs reactjs-testutils
Not loved picture Not loved · Jul 14, 2014 · Viewed 8.6k times · Source

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)

Answer

jonowzz picture jonowzz · Jul 15, 2014

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.

Related questions

How to mock an exported const in jest

I have a file that relies on an exported const variable. This variable is set to true but if ever needed can be set to false manually to prevent some behavior if downstream services request it. I am not sure …

Read More
Figuring out how to mock the window size changing for a react component test

So basically when the component mounts, I have an event listener listen for resize events. It toggles the isMobileView state and then passes it into the children as a prop. So it's imperative that this works and is tested. I'm …

Read More
Check if child component rendered - Jest, Enzyme

In my unit test, I want to test whether the parent component is successfully rendering its child component. Here is the code: describe('Parent Component', () => { it('renders Child component', () => { const wrapper = shallow(<Parent store={store} />); expect(…

Read More