Introduction
I worked on a multitude of web React projects and most of the time the testing and visual development setup is composed of:
- Storybook: for developing components in isolation and having some sort of documentation.
- Jest: for unit and snapshot testing.
- Cypress: for end-to-end testing.
The problem
Most UI projects nowadays have some tool for unit testing, usually Jest. Another tool to develop components in isolation and have some sort of documentation is usually Storybook. And then another tool for e2e testing, usually Cypress.
The problem is these are completely independent of one another, so you need to learn 3 different tools with 3 completely different methodologies and quirks.
You can imagine how confusing and hard it would be for someone who is just joining your team and not super familiar with them, especially juniors.
Add to that that most courses skip for the most part anything that has to do with testing. So not only are juniors not familiar with testing at all, but they need to learn new tools where each one does something a little different.
I always aim for simplicity and to keep the tooling and workflow as lean as it can be. Hence why I’m excited about Cypress component testing. You can read more about it here: https://docs.cypress.io/guides/component-testing/writing-your-first-component-test
The solution
Cypress component testing to the rescue!
From the Cypress docs, they define it as follows:
Cypress Component Testing provides a testable component workbench for you to quickly build and test any component — no matter how simple or complex.
In simpler terms, it's a unit-testing solution. That means we can eliminate Jest from our setup and have one extra tool and dependency.
You can read more here https://docs.cypress.io/guides/component-testing/writing-your-first-component-test
In addition, the Cypress Test runner is browser-based. So now not only can you unit test your components using Cypress, but those units are available to view on a browser. So again for a wide range of developers, this eliminates the need for Storybook.
What’s the difference between Cypress E2E Testing and Cypress Component Testing?
From the Cypress docs:
The primary difference is that Cypress Component Testing builds your components using a development server instead of rendering within a complete website, which results in faster tests and fewer dependencies on infrastructure than end-to-end tests covering the same code paths.
Conclusion
This is a great addition to the already great Cypress tooling we are used to and will make in my opinion development and testing much easier since we have to use only one tool and not have to worry about jogging multiple ones.
Thanks for reading! If you like short and simple articles filled with great tips and new tools subscribe to my newsletter:
.jpeg)
