Component Tests

Cypress Component Testing provides a component workbench for you to quickly build and test components from multiple front-end UI libraries — no matter how simple or complex.

This is the first time I've heard about this type of test. What is it?

Cypress Component Testing uses the same test runner, commands, and API to test components instead of pages. Component tests differ from end-to-end tests in that instead of visiting a URL to pull up an entire app, a component can be "mounted" and tested on its own. This allows you to focus on testing only the component's functionality and not worrying about other nuances with testing a component as part of the larger application.

Benefits of component tests:

• Easier to test components in isolation

• Fast and reliable

• Easy to set up specific scenarios in tests

• Don't rely on any external system to run

Run tests

Component tests live in test.spec.cy.tsx files right next to the components being tested and are run with npm run test or you can run npm run cypress:open for open cypress panel where you can see your component in action and interact with it in the test runner.