React API

Methods

mount

// React 18
import { mount } from 'cypress/react18'

// React 16, 17
import { mount } from 'cypress/react'

Description	Mounts a React component into the DOM.
Signature	mount(jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<MountReturn>
Returns	Cypress.Chainable<MountReturn>

mount Parameters

Name	Type	Description
jsx	React.JSX.Element	The React component to mount.
options	MountOptions (optional)	The options for mounting the component
rerenderKey	string (optional)	A key to use to force a rerender.

Example

import { mount } from '@cypress/react'
import { Stepper } from './Stepper'

it('mounts', () => {
  mount(<StepperComponent />)
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
}

getContainerEl

Description	Gets the root element used to mount the component.
Signature	() => HTMLElement
Returns	HTMLElement

Interfaces

MountOptions

members

Name	Type	Description
alias	string (optional)
ReactDom	MountReactComponentOptions.ReactDom (optional)
log	boolean (optional)	Log the mounting command into Cypress Command Log, true by default
strict	boolean (optional)	Render component in React strict mode It activates additional checks and warnings for child components.

MountReturn

Type that the mount function yields

members

Name	Type	Description
component	React.ReactNode	Render component in React strict mode It activates additional checks and warnings for child components.
rerender	(component: React.ReactNode) => globalThis.Cypress.Chainable<MountReturn>	The component that was rendered.