Scribd
Upload
31 views2 pages

Cypress Component Testing Overview

Cypress Component Testing provides a component workbench for quickly building and testing UI components from various front-end libraries. It allows testing components visually and interacting with them in the browser-based test runner. Cypress Component Testing uses the same test runner, commands, and APIs as end-to-end testing but builds components using a development server, making tests faster and less dependent on infrastructure than end-to-end tests covering the same code. It supports testing components from frameworks like React, Angular, Vue, and Svelte.

Uploaded by

கார்த்திக் பெரியசாமி
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views2 pages

Cypress Component Testing Overview

Cypress Component Testing provides a component workbench for quickly building and testing UI components from various front-end libraries. It allows testing components visually and interacting with them in the browser-based test runner. Cypress Component Testing uses the same test runner, commands, and APIs as end-to-end testing but builds components using a development server, making tests faster and less dependent on infrastructure than end-to-end tests covering the same code. It supports testing components from frameworks like React, Angular, Vue, and Svelte.

Uploaded by

கார்த்திக் பெரியசாமி
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

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:

React
Angular
Vue
Svelte
import Button from './Button'

it('uses custom text for the button label', () => {


[Link](<Button>Click me!</Button>)
[Link]('button').should('[Link]', '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:

Framework UI Library Bundler


Create React App 4+ React 16+ Webpack 4+
[Link] 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.

You might also like