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.