5 awesome tricks to turbocharge your React automated tests
using cypress.io
Here at Craft Academy Labs, we (Greg Kallai and I) love developing ReactJS based applications (with a rails back end!), and we do it TDD + pair programming style.
We found that in our development journey, cypress is a must-have tool to write fully automated E2E tests. It is easy to setup, easy to write tests and also integrates with our CI pipeline.
We are still learning the nitty-gritties of the test framework, but we found a few gems to simplify and speed up your test suit:
1. Using LocalStorage to bypass traditional log in -
Just have a look at this article which details the whole process. To summarize the need for this optimization -
One prime candidate to optimize at the onset is the login flow. Most functionalities we will test will involve user logging in at the start, and opening page every time, loading the login form/dialogue and filling in user credentials every time becomes highly time consuming.
To bypass this manual logging in route, we can leverage tokens stored in LocalStorage with some inbuilt Redux-token-auth magic and save those precious seconds during test runs!
2. Array Loop-through
It’s just easier to show you the code for this one
You can see the benefits of this method immediately. It reduces the clutter and is especially helpful when filling up a form or checking for multiple elements on a page.
3. Use .within()
This one is good if you are dynamically rendering child elements on a page, and somehow are missing unique identifiers.
Take a look at example below -
We are rendering Sessions, with information on how many spots are already booked and also a book button. Now,instead of adding unique identifier in Spots Booked , we can find a unique session and then explore inside it.
4. Stubbing network responses
This one is kind of a double edged sword.
Whenever our App is making a network request, we can ‘hijack’ in the middle and respond as we want to. This means that the response payload is completely in our control and helps setting up the tests to find specific sessions for eg.
It is extremely easy to set up. Just write cy.server() in your test, and you own the network communication! We can also set up beforeEach() in our cypress/support/index.js and make it available for each test.
Just be careful to update mock fixures every time you change something in API, else your tests will pass and app will fail in production.
5. Using element picker
This one is so obvious that we missed it for a long time! If you have written any kind of tests, you will agree that finding an element in the DOM can be a big PITA sometimes. I mean, we can see that element on the screen, but the test framework just plain refuses to acknowledge that fact!
cypress provides us with a nifty tool to solve that problem. Bang next to the URL in the middle pane, is a target icon. Once you activate it, and use it to visually select any DOM element, it gives you a pre-written cy.get command.
If you have read till here, you deserve a small ‘Thank you!’ gift!
Bonus tip : Git Co-authors
As we pair program, we have to make sure both of us are credited for the work we have delivered. Fortunately, git has a very simple solution for this as mentioned here
Just write Co-authored-by: name <name@example.com> after your commit message and you are set!
Hope you find some use for the ideas suggested above. Please share your thoughts and let’s all learn together!
