Component testing for React Vite application using Cypress

If you’re working as an automation tester long enough, you would have experience the frustration when fixing an end-to-end tests with many steps involved, especially if the test failed at the very end. Well, the better approach when it comes to automation testing is isolating the tests. Component testing is created for just that.

Photo by Derick McKinney on Unsplash

There are a number of tools that offer component testing, the two most famous ones are Cypress and Playwright. When I’ve tried out with both these tools, Cypress is in a more mature state and supports a number of front-end frameworks like React, Angular, Svelt..With Playwright, component testing is still at experimental state.

The only downside about component testing with Cypress as I’ve noticed is that Cypress requires the application under test to use bundler tool like Vite or Webpack. If I’m using plain create-react-script to build the app, the component test will not be supported. With Playwright, you are not required to do so. In case you want to check out how to do component testing with Playwright, refer to the playwright-component-testing-react repo.