Skip to main content

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!')
})

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:

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:

FrameworkUI LibraryBundler
Create React App 4+React 16+Webpack 4+
Next.js 11+React 16+Webpack 5
React with ViteReact 16+Vite 2+
React with WebpackReact 16+Webpack 4+
Vue CLIVue 2+Webpack 4+
Nuxt 2 AlphaVue 2+Webpack 4+
Vue with ViteVue 2+Vite 2+
Vue with WebpackVue 2+Webpack 4+
AngularAngular 13+Webpack 5
Svelte with Vite AlphaSvelte 3+Vite 2+
Svelte with Webpack AlphaSvelte 3+Webpack 4+

Community Supported Frameworks​

The following integrations are built and maintained by Cypress community members.

FrameworkUI LibraryBundler
Qwik CommunityQwikVite
Lit CommunityLitVite

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.