1

I'm trying to automate a page generated by React: record the user interaction in the page and then play it back for testing purposes.
In the simplest case, the playback sets the values of various inputs and triggers change events.
Unfortunately, after my code sets the values and simulates the click on the form submit button, React steps in and resets the values to those from its internal model.

Is there a way to force React to update from the values in the DOM?

If not, is there a way for me to hook into React and change the values, given the DOM node?
Something like (totally bogus pseudocode): require("react").findComponentForDomNode('xxx').setValue('yyy') ?

Dharmesh Porwal
  • 1,406
  • 2
  • 12
  • 21
imdfl
  • 21
  • 4
  • I was having a similar problem with React updating the `input` after I set its value through code. This answer worked for me https://stackoverflow.com/a/48890844/740639 – Walter Stabosz May 15 '18 at 14:30

1 Answers1

0

Make sure that your form is using "uncontrolled" components, or at the very least that you're allowing user input in your controlled components.

http://facebook.github.io/react/docs/forms.html

Alternatively, you should be able to accomplish this with React's testing utilities:

http://facebook.github.io/react/docs/test-utils.html

This lets you perform actions such as:

React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});

Bonnie
  • 185
  • 9
  • Thanks. The page code is not under my control. My code runs on it after it is loaded. Something like a bookmarklet or greasemonkey script, tho in a different context - record/playback. For the particular implementation against which I was working, it turned out that dispatching the Input event from the input dom element did the trick. – imdfl Jan 27 '15 at 11:37