How to hack log-in in React Automated testing
With a sample Cypress.io test. Co-authored by: Aditya Naik
Cypress is a great end to end testing framework for browser based applications. It allows you to monitor your test specs in real time, and offer great variety of tools for debugging.
As the application matures, the test suit gets bigger and bigger. To keep the test run time under control, we need to sanitize and DRY the tests.
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.
We are going to take a look how to simplify that in a React app using Rails as back-end API.
In this example we are using devise-token-auth in the Rails API, and redux-token-auth in the React app. We are going to stub out our response, but as a rule of thumb this should be avoided:
When requests are not stubbed, this guarantees that the contract between your client and server is working correctly. — Cypress official documentation
Redux-token-auth is a token based authentication token which simply means that our API will identify us via a token. It will always look for your credentials in your LocalStorage (via the inbuilt verifyCredentials() function). The first time you log in, a unique token is created and stored.
Once it has this stored token available, it sends it across to the API to confirm. API responds with a successful authentication response and redux-token-auth logs you in without you filling in the login form again.
We can mimic this in our tests to improve our testing performance!
To start with, we need all the authentication related information stored in our LocalStorage. We can inspect this in our chrome browser using the chrome developer tools:
Now that we have the information we can add them into our LocalStorage in our test environment:
Now when we run the test redux-token-auth will try to authenticate your user, but it will fail, because the token expired. To prevent this we can stub out the response and make our user authenticated all the time. You should be aware of your payload when being authenticated but if you are unsure you can use the network tab in the chrome developer tools to check it.
Cypress ships with a couple of support files, one of them is cypress/support/commands.js. Here we can add custom functions with the Cypress.Commands.add function. We will leverage this to keep our integration files DRY. In our example the uid is the email address of the user. We can use that to make this method dynamic:
Also by adding the cy.visit at the end of this custom function we trigger the automatic log in function of redux-token-auth. Now we can use this method in our test files to authenticate the users quickly without needing to use the user interface.
Here is an example how this method looks in action:
As you can see, we log in user using our custom defined method, before accessing user specific information.
