title: React - selenium tests
body: <p><strong>Solved, see answer below</strong></p>
  
  <p>I test a React app with selenium. </p>
  
  <p>I need to change the value of an input field, which is linked to the state of the object. In short (relevant parts of the code), a change in this input allows it's value to be submited only if it is not empty:</p>
  
  <pre><code># react object
  
  render: function(){
  
      &lt;input ... onChange={this.handleTextChange} className="myInput" /&gt;
  
      &lt;button onClick={this.handleSubmit}&gt;Submit&lt;/button&gt; 
  },
  
  handleTextChange: function(e) {
      this.setState({text: e.target.value});
  },
  
  handleSubmit: function() {
      if(this.state.text.length &gt; 0) {
      // relevant code that is never executed
      // because although we change the value of the input, the state does not update 
      }
  },
  </code></pre>
  
  <p>The code works but I cannot find a way to test it because I cannot find any js manipulation which would update the input AND reflect in the state of the object.
  I tried the following solutions</p>
  
  <pre><code># value update
  self.selenium.execute_script("var input = document.querySelectorAll('input.myInput')[0]; form.value = 'New message!'");
  </code></pre>
  
  <p>The word 'New message!' actually appears in the input but does not update the state of the object.
  I then tried focusing on the input and triggering a keyup event, without success</p>
  
  <pre><code># try focus and keyUp
  # source https://stackoverflow.com/questions/596481/simulate-javascript-key-events
  self.selenium.execute_script("""
  var form = document.querySelectorAll("input.messageFormInput")[0]; 
  form.focus();
  var keyboardEvent = document.createEvent("KeyboardEvent");
  var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
  keyboardEvent[initMethod](
                 "keydown", // event type : keydown, keyup, keypress
                  true, // bubbles
                  true, // cancelable
                  window, // viewArg: should be window
                  false, // ctrlKeyArg
                  false, // altKeyArg
                  false, // shiftKeyArg
                  false, // metaKeyArg
                  40, // keyCodeArg : unsigned long the virtual key code, else 0
                  0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
  );
  document.dispatchEvent(keyboardEvent);
  """)
  </code></pre>
  
  <p>I tried the same solution with jQuery as explained here (<a href="https://stackoverflow.com/questions/596481/simulate-javascript-key-events">Is it possible to simulate key press events programmatically?</a>), but it does not work either.</p>
  
  <p>Any idea is very welcome. Thanks!</p>