Testing ReactJS Applications

ReactJS

In order for BDDStack to work properly with ReactJS based applications, you need to add a feature to your test scripts. More specifically, you need to add an extension, which helps BDDStack determine if React has finished rendering the page so that the regular test activities can take place.

Install/change the following:

• Copy the /groovy/extensions in your BDDStack/src/test/groovy directory (from the examples)
• For each (ReactJS generated) page definition add use the following template:

package pages.app
import geb.Page
import extensions.ReactJSAware

class <your page name>Page extends Page implements ReactJSAware {
	static at = { reactReady && title == "<your title>" }
	static url = "<url of page>"
	static content = {}
}

Now every time this page is used, it will wait until ReactJS has completely finished rendering the page.

Details of this extension

In the extensions directory we have one file:

ReactJSAware.groovy

package extensions

trait ReactJSAware {
 
    boolean isReactReady() {
        waitFor {
            js.exec('return document.readyState;') == "complete"
        }

    }
}

This file creates a trait that can be connected to the page (see page template above). With this set up, we are able to inspect reactReady as a signal that we are now able to commence with our tests.

ReactJS Testing Quirks

BDDSTack and React play together very well.

• It is advantageous to put unique IDs in every element as this is the most stable way of addressing elements in your pages. Be careful to keep the IDs unique in the page though as HTML5 does not allow duplicate IDs.

Conclusion

We are able to effectively test ReactJS based applications, but there are a few things that you need to do in order to make this work well.

References

ReactJS Web site