-
Notifications
You must be signed in to change notification settings - Fork 11
Testing ReactJS Applications
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.
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.
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.
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.