Principle:Cypress io Cypress Component Mounting
| Knowledge Sources | |
|---|---|
| Domains | Component_Testing, UI_Rendering |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
A framework-adapter pattern that renders individual UI components into a controlled browser DOM container for isolated testing.
Description
Component mounting bridges the gap between framework-specific rendering APIs (ReactDOM.createRoot, Vue's createApp, Angular's TestBed) and the Cypress command chain. Each framework adapter wraps its native rendering API to mount a component into a Cypress-managed container element, clean up previous mounts, and return a Cypress.Chainable for further interaction.
This adapter pattern ensures that components render with the same transformations and context they would have in a real application, while providing the isolation needed for deterministic testing.
Usage
Use this principle when understanding how Cypress renders components in isolation across different frameworks. It applies when writing component tests and when building custom mount utilities for unsupported frameworks.
Theoretical Basis
Mount Lifecycle:
1. cleanup() - Remove any previously mounted component
2. getContainerEl() - Get/create the DOM container element
3. Framework-specific render (ReactDOM.createRoot, createApp, etc.)
4. Return Cypress.Chainable wrapping the mounted component
5. On test end: unmount and cleanup
Framework Adapters:
React: ReactDOM.createRoot(el).render(jsx)
Vue: VueTestUtils.mount(component, options)
Angular: TestBed.configureTestingModule(config)
Svelte: new Component({ target: el })