Battle around right mix of GUI tests are hot topic anyday. I’ve been thru this flaky end-end tests in the past and recently started tacking them with some rationale based on the usecase/ test case intentions.
1# If your intention is to simulate something within one view - prefer view testing. React TestUtils + Mocha + JsDOM works well for most cases. React TestUtils, browser event simulation is a great plus compared to other SPA frameworks out there. ie. Angular doesn’t have something like this… or atleast not as easy as React.
I’m using wiremock to virtualize the services so that even if my back-end is unavailable, my view tests will continue to work as long as the contract wasn’t changed.
2# If your intention goes across several views - webdriver is the better choice. However, since we have enough coverage from view tests, webdriver tests can focus on the user journey rather than focusing on little items like “user name should be auto focused when user navigates customer edit”.
3# If your intention is to verify some data - UI has little to do with it and hence why not directly hit the APIs and test. Use API testing tools. This is mostly related to back-end development.
So, IMO, as far as testing react components, more and more #1 compared to #2 should help us to keep them green for long run.
Just my 2 cents, happy to learn what others have experienced here…