ReactJS Selenium Testing

Question

So I am looking to write integration level tests (where you are talking to a real database and really nothing is mocked) for a ReactJS application and figured Selenium is the default choice for this type of testing. With Angular 1.x, you can tell if angular's digest cycle is still process the DOM which removes the need to add in sleeps which are inefficient and flakey.

Is there something similar in ReactJS that I can use instead of a bunch of flakey sleep commands?

Answer 1

Always rendering from a root component

There's a callback that you can pass to the render function:

ReactComponent render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

You can also listen to the componentDidUpdate method of that top component.

Unfortunately this will only work if you always render from the top component, which somehow means you manage all the state outside of React, without using any local state, and use it in a purely functional way as an efficient templating engine. Some frameworks help you do so.

Even Flux does not really enforce this (at least the original implementation) because Flux stores are not necessarily injected as props from the very top. (They are in atom-react)

Not always rendering from a root component

I don't know there is any elegant solution to this problem but here's what I would do:

• Implement all lifecycle methods on all your components, for example with a Mixin, and call a global function notifyReactIsWorking from these callbacks
• Debounce the notifyReactIsWorking with _.debounce(changeMeter, 1000, false)

This way, when notifyReactIsWorking gets called, this somehow means that React has stabilized because not a single lifecycle method has been called for more than 1 second.

This is a hack but probably should work in most cases.

Also interested in more efficient solutions :)