End to End (e2e) is a huge task in terms of development effort and time in running the test. It is a huge investment from a CI / CD approach of being nimble and quick. Of course, we can use bigger and better resources but then that becomes a huge money investment. So how did e2e become our primary way of unit test?
First, we had to define unit testing, and the value it would bring to our company.
We came to the understanding unit testing was more visual regression and logical for us. For example, if we had a button component in our React library. On its own, a button should take action and look a certain way. So our unit test did that just that, mount the button and test on a click it would trigger the function is needed to trigger. As well as the button styles were applying correct and that it was following best practices for a11y.
For that, we were using shallow mounts, but they lacked some features. Since a shallow mount was not a full browser, this caused some issues. Some issues we faced were resizing and on complex components issues with running tests. A lot of people would tell us this is a failure of our testing design. This can also be true but having developers work on unit tests was also something we were looking to cut down on.
Now we have defined what a unit test value meant for us as a company, as well as some issues we faced. We were able to take steps to move in a direction that was more fitting. That is why we turned to Cypress.
What is cypress and how we used it to replace our unit test?
Cypress is browser automation on steroids, that is the easiest way to describe it. As developers that have fought selenium grid and java, Cypress cuts that out. It is typescript friendly and gives this great UI for our clients. As well as great CLI experiences for our developers. CI / CD is not an afterthought it is a first-class citizen.
Reasons why cypress makes a great unit tester and some cons. It is a real full browser, we usually set up both chrome and firefox depending on our clients. That is also the con, it is very resource heavy and takes a bit longer to run our unit testing suite. Cypress allows you to mock request data which is a huge requirement for unit testing. Code coverage with a plugin here.