Principle:Cypress io Cypress Component Test Authoring
| Knowledge Sources | |
|---|---|
| Domains | Component_Testing, Testing |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
A pattern for writing isolated component tests that combine framework-specific mount functions with the Cypress command API for rendering, interacting with, and asserting on individual UI components.
Description
Component test authoring extends the standard Cypress test authoring pattern with a mount() function specific to the UI framework in use (React, Vue, Angular, Svelte). The mount function renders a component in isolation within a controlled DOM environment, enabling tests to verify component behavior without a running application server.
This approach bridges the gap between unit tests (fast but limited DOM interaction) and E2E tests (full DOM but slow and flaky). Component tests execute in a real browser with full DOM support but only render the component under test.
Usage
Use this principle when testing individual UI components in isolation. Each component test file imports the framework-specific mount function and the component to test, then uses cy.* commands for interaction and assertion.
Theoretical Basis
Component Test Structure:
1. Import mount from 'cypress/{framework}' (react, vue, angular, svelte)
2. Import the component under test
3. describe/it block using Mocha structure
4. mount(component, options) → renders into Cypress DOM container
5. cy.get/click/type/should → interact and assert via Cypress command API