How do you test a reactjs web app with selenium?

Question

I have a web app using React and I'm trying to create some tests using Selenium RC. I'm finding though that when Selenium changes the values of fields, events are not properly fired. I know this is a somewhat typical problem as evidenced by the WebDriver FAQ and I've tried a bunch of different things like using onFocus instead of onChange and making sure the focus was changed in and out, using sendKeys() vs type(), programatically calling the event, and any other suggestions I could find online, but I have not been able to get it working.

As a simple example of what I'm trying to do, I stripped down the comment box react example. What I have is a textarea input box and a div that should be updated with the value of the textarea. Selenium can update the textarea, but when it does the div doesn't change.

Here's my reactjs code:

/** @jsx React.DOM */

var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Original Text'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.getDOMNode().value});
  },
  render: function() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          id="content2",
          dangerouslySetInnerHTML={{
            __html: this.state.value
          }}
        />
      </div>
    );
  }
});

React.renderComponent(<MarkdownEditor />, document.getElementById('content'));

And here's my current Selenium test case:

import com.thoughtworks.selenium.*;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import static org.junit.Assert.*;
import java.util.regex.Pattern;
import java.util.Properties;
import junit.framework.TestCase;

public class textTest extends TestCase {

    protected Selenium selenium;

    @Before
    public void setUp() throws Exception {
        Properties sysProps = System.getProperties();
        String browser = sysProps.getProperty("browser.property");
        selenium = new DefaultSelenium("localhost", 4444, "*chrome", "http://localhost/");
        selenium.start();
    }

    @After
    public void tearDown() throws Exception {
        selenium.stop();
    }

    @Test
    public void testText() throws Exception {
        selenium.open("/reactTest/index.html");
        assertEquals("Original Text", selenium.getText("id=content2"));
        selenium.focus("id=content2");
        selenium.type("css=textarea[value=\"Original Text\"]", "xxxxx");
        selenium.focus("id=content");
        selenium.runScript("$('#tatest').trigger('change')");
        assertEquals("xxxxxOriginal Text", selenium.getText("id=content2"));
        Thread.sleep(80000);
    }

}

Edit: Code is now available at https://github.com/ilionblaze/reactTest

There must be some way to make this work!

Answer 1

Try Simulate in the React TestUtils addon:

React.addons.TestUtils.Simulate.change(document.getElementById('your-id-here'))

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

It also requires that you switch to the React file containing the addons:

"To get the add-ons, use react-with-addons.js (and its minified counterpart) rather than the common react.js." — http://facebook.github.io/react/docs/addons.html