Cypress Component Testing

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.

Quick Example

Below is a minimal test to assert that a button component has the correct text:

import Button from './Button'

it('uses custom text for the button label', () => {
  cy.mount(<Button>Click me!</Button>)
  cy.get('button').should('contains.text', 'Click me!')
})

import ButtonComponent from './button.component'

it('uses custom text for the button label', () => {
  cy.mount('<app-button>Click me!</app-button>', {
    declarations: [ButtonComponent],
  })
  cy.get('button').should('contains.text', 'Click me!')
})

import Button from './Button.vue'

it('uses custom text for the button label', () => {
  cy.mount(Button, {
    slots: {
      default: 'Click me!',
    },
  })
  cy.get('button').should('contains.text', 'Click me!')
})

import Button from './Button.svelte'

it('uses custom text for the button label', () => {
  cy.mount(Button, { props: { msg: 'Click me!' } })
  cy.get('button').should('contains.text', 'Click me!')
})

Learn more about how to test components for React, Angular, Vue, and Svelte.

Why Cypress Component Testing?

Our Test Runner is browser-based, allowing you to test not only your component's functionality but also styles and appearance. You can visually see your component in action and interact with it in the test runner:

Vuetify's VColorPicker tests, after being moved to Cypress from Jest.

You can use the browser developer tools to inspect the DOM, play around with styles, and use the debugger to step through your code.

And since this is Cypress, you get the same APIs, plugins, and ecosystem you are used to with end-to-end testing to create component tests.

Supported Frameworks

Cypress currently has official mounting libraries for React, Angular, Vue, and Svelte and support for the following development servers and frameworks:

Framework	UI Library	Bundler
Create React App 4+	React 16+	Webpack 4+
Next.js 11+	React 16+	Webpack 5
React with Vite	React 16+	Vite 2+
React with Webpack	React 16+	Webpack 4+
Vue CLI	Vue 2+	Webpack 4+
Nuxt 2 Alpha	Vue 2+	Webpack 4+
Vue with Vite	Vue 2+	Vite 2+
Vue with Webpack	Vue 2+	Webpack 4+
Angular	Angular 13+	Webpack 5
Svelte with Vite Alpha	Svelte 3+	Vite 2+
Svelte with Webpack Alpha	Svelte 3+	Webpack 4+

Component Testing vs. End-to-End Testing

We cover the differences between component and end-to-end testing in-depth in the Choosing a Testing Type guide.

But in short, Cypress Component Testing uses the same test runner, commands, and API to test components instead of pages.

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.

Cypress's API is user-centric and built for testing anything that renders on the web. Therefore, many of your tests will appear framework-agnostic and approachable for developers coming from any background.

For additional reading, we encourage folks to check out the Component Driven organization, which talks about the pros of component-driven development and may aid you when trying to figure out if you should be taking a page-based or component-based approach to building and testing a given feature.