How do you test reactjs web application with selenium?

Question

I have a web application using React, and I'm trying to create some tests using Selenium RC. I find that when Selenium changes field values, events do not fire properly. I know this is a typical problem, as evidenced by WebDriver FAQs , and I tried a bunch of different things like using onFocus instead of onChange and make sure the focus was changed using sendKeys () vs type (), programmatically calling the event and any other suggestions that I could find on the Internet, but I could not get it to work.

As a simple example of what I'm trying to do, I deleted the sample response in the comment field. I have an input field textarea and div that should be updated with the value of the text field. Selenium can update the text box, but when it makes a div, it does not change.

Here is my reaction 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 is my current Selenium test:

 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 simulating in the React TestUtils application:

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

See http://facebook.imtqy.com/react/docs/test-utils.html#simulate

It also requires you to switch to a React file containing addons:

"To get add-ons, use response-with-addons.js (and its miniature equivalent) rather than general reactions. - http://facebook.imtqy.com/react/docs/addons.html

Answer 2

 import ReactTestUtils from 'react-addons-test-utils' // ES6 var ReactTestUtils = require('react-addons-test-utils') // ES5 with npm var ReactTestUtils = React.addons.TestUtils; // ES5 with react-with-addons.js 

wrap this in a python library and load it into RF ...
Hope this works.