Component Testing

Cypress also allows you to test individual components of your app via component tests

Cypress Component Testing uses the same test runner, commands, and API to test components instead of pages. However, the main 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

You may need to add additional configuration to your project to support component tests. For example, In Next JS you'll need to add something like: const { defineConfig } = require('cypress') module.exports = defineConfig({ component: { devServer: { framework: 'next', bundler: 'webpack', }, }, })

You can mount a component using cy.mount(). Then, you can interact and make assertions just as you would in an E2E test. Let's go test our Accordion