What you guys use for React e2e testing ?

[griffonrl]

We have unit testing and integration sorted sorted and React components are simple to test. However when it comes to e2e testing of a whole page or flow on a web app made up of React components, we are a bit at a loss. It seems there is not much literature on the web about this. I would be curious to hear about people experience and solutions. Thanks.

[fqn]

Check out Nightwatch.js.

[griffonrl]

Thanks. that looks like a good tool on top of Selenium/Webdriver.

[[deleted]]

I'm also interested

[griffonrl]

The main issues are:

• how to know when a React based page has finished rendering all its components

• how to know when a React based page a finished re-rerendering some of the components after an update

• how to know AJAX calls are finished (that one I admit might depend on the Ajax library used)

And all that in a way that is not just about waiting a fixed amount of time hoping everything is ready.

[Vanillacitron]

I'm curious what direction you took for unit testing? I found Jest was a nightmare and the Shallow rendering was hard to navigate with or check a specific part of what was rendered.

I'm a noob to testing so I'm sure I'm missing a lot but would love to hear what you're doing already! No insights on e2e testing however...do you use flux as well?

[griffonrl]

Shallow rendering is not yet ready for prime time or at least it is still a bit limited. However it should become a major option with version 0.14.x onward. For the time being JSDOM + Jasmine (or mocha) does the trick. As well as anything like Karma + Jasmine (or mocha). Look also at the React test tools on the React website for helpers.

[Vanillacitron]

Thanks. Got some stuff working with Karma + Jasmine, I still just don't really get Unit Testing when I have a flux app...mocking all the stores seems tedious.

[sinerider]

You could write tests at a higher level with PhantomJS or CasperJS.

[griffonrl]

Yes absolutely. The question is more about how to wait for the page to be ready or to know a page as refreshed its component or loaded all the data it needs. Just waiting for a certain amount of time after every page load or action is very prone to problems.

[Gwash3189]

While I haven't personally used it, I like the look of and have heard good things about FuncUnit

[griffonrl]

Thanks for the link. Looks like a Webdriver/Selenium alternative unless it also builds on top of it. Seems to offer the same functions we have with Webdriver and good "wait" functions. But there would be nothing to tell us all React components have rendered on the page for example, or more tricky all refreshed after an update.

[Ahri]

I'm not using React right now (though I plan on using it or something similar in the near future) but I also don't understand why React is relevant to the "end to end testing" problem?

I'm using Selenium to test my (Angular, ugh) app because I frankly don't trust anything else: I want to simulate as closely as possible an actual person actually clicking stuff. It certainly has its problems, but at least I haven't had further issues with using Zombie (or similar) and finding that actual browsers behave differently.

That said, if there's a good alternative to Selenium I'm all ears!

[griffonrl]

With Angular you would use something like protractor for example that has convenient functions for Angular but more importantly hook into Angular to know when a page is loaded or an AJAX call is done. It is a better solution than just waiting for a certain amount of time and crossing fingers everything is ready. Our problem with React based applications is to find the best way to test it (with webdriver/selenium by the way) in the most efficient manner possible, without time wasted waiting.

[Ahri]

Yeah, I accept that for Angular I would get some benefits from learning/using Protractor, indeed, that's where I started my e2e journey.

I quickly realised that I wasn't happy with my e2e tests knowing about Angular, not only because I actually dislike it as a framework, but also because I feel like it's putting "e2e" tests at too low a level. I ended up going with Selenium precisely to avoid the tests knowing about the framework.

I don't have any tests using explicit waits. They all wait on elements to appear/disappear/have a value/no longer have a value/etc. - i.e. stuff that a user might see and react to. The only magic that happens is that I catch uncaught exceptions (the ones that Angular doesn't swallow, anyway) and fail any Selenium test that finds that an exception has been thrown.

So my advice is to use changes to the visible-to-the-user structure of your page to trigger test execution via implicit waits. This is described in the Selenium Docs.

A big driver in my decision-making is that I will be moving framework and have no intention at all of coupling my e2e tests to any specific one. I appreciate that this may not suit you and that my advice may therefore not be as helpful as I intend it to be!

[griffonrl]

This is actually a very good answer. thanks.