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> |
| 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
| 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
| 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. |