Implementation:Cypress io Cypress React Mount
| Knowledge Sources | |
|---|---|
| Domains | Component_Testing, React |
| Last Updated | 2026-02-12 00:00 GMT |
Overview
Concrete tool for mounting React components in Cypress component tests provided by the cypress/react package.
Description
The mount function from cypress/react renders a React component into the Cypress DOM container using ReactDOM.createRoot. It cleans up any previously mounted component, creates a root if needed, renders the JSX, and returns a Cypress.Chainable<MountReturn> for chaining assertions. It delegates to makeMountFn which handles logging, container element management, and the Cypress command integration.
Usage
Import this function in component test files or in cypress/support/component.ts to register it as a custom cy.mount command.
Code Reference
Source Location
- Repository: cypress-io/cypress
- File: npm/react/src/mount.ts
- Lines: L47-66
Signature
export function mount(
jsx: React.ReactNode,
options: MountOptions = {},
rerenderKey?: string
): Cypress.Chainable<MountReturn>
Import
import { mount } from 'cypress/react'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| jsx | React.ReactNode | Yes | React JSX element to mount |
| options | MountOptions | No | Mount options (strict mode, ReactDom override, etc.) |
| rerenderKey | string | No | Key to force re-render of the same component |
Outputs
| Name | Type | Description |
|---|---|---|
| Chainable<MountReturn> | Cypress.Chainable | Chainable wrapping the mounted component for assertions |
Usage Examples
Basic React Component Test
import { mount } from 'cypress/react'
import { Button } from './Button'
describe('Button', () => {
it('renders with label', () => {
mount(<Button label="Click me" />)
cy.get('button').should('have.text', 'Click me')
})
it('handles click', () => {
const onClick = cy.stub()
mount(<Button label="Click" onClick={onClick} />)
cy.get('button').click()
cy.wrap(onClick).should('have.been.calledOnce')
})
})