{
"doc": {
"id": "app/component-testing/react/examples",
"title": "React Examples",
"description": "Learn how to mount a React component, pass data to a React component, test event handlers, and customize `cy.mount()` for React Router and Redux.",
"section": "app",
"source_path": "/llm/markdown/app/component-testing/react/examples.md",
"version": "48b03b5502f7aea1d0454750cce208f775403542",
"updated_at": "2026-05-20T19:00:20.270Z",
"headings": [
{
"id": "app/component-testing/react/examples#react-examples",
"text": "React Examples",
"level": 1
},
{
"id": "app/component-testing/react/examples#what-youll-learn",
"text": "What you'll learn",
"level": 5
},
{
"id": "app/component-testing/react/examples#mounting-components",
"text": "Mounting Components",
"level": 2
},
{
"id": "app/component-testing/react/examples#mounting-a-component",
"text": "Mounting a Component",
"level": 3
},
{
"id": "app/component-testing/react/examples#passing-data-to-a-component",
"text": "Passing Data to a Component",
"level": 3
},
{
"id": "app/component-testing/react/examples#testing-event-handlers",
"text": "Testing Event Handlers",
"level": 3
},
{
"id": "app/component-testing/react/examples#custom-mount-commands",
"text": "Custom Mount Commands",
"level": 2
},
{
"id": "app/component-testing/react/examples#customizing-cy-mount",
"text": "Customizing cy.mount()",
"level": 3
},
{
"id": "app/component-testing/react/examples#react-router",
"text": "React Router",
"level": 3
},
{
"id": "app/component-testing/react/examples#redux",
"text": "Redux",
"level": 3
}
]
},
"chunks": [
{
"id": "app/component-testing/react/examples#what-youll-learn",
"doc_id": "app/component-testing/react/examples",
"heading": "What you'll learn",
"heading_level": 5,
"content_markdown": "##### What you'll learn\n\n* How to mount a React component\n* How to pass data to a React component\n* How to test event handlers\n* How to customize `cy.mount()` for React Router and Redux\n",
"section": "app",
"anchors": [
"what-youll-learn"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 48
},
{
"id": "app/component-testing/react/examples#mounting-components",
"doc_id": "app/component-testing/react/examples",
"heading": "Mounting Components",
"heading_level": 2,
"content_markdown": "## Mounting Components\n\n### Mounting a Component\n\nThe first step in testing a component is to mount it. This renders the component into a testbed and enable's the use of the Cypress API to select elements, interact with them, and run assertions.\n\nTo mount a React component, import the component into your spec and pass the component to the `cy.mount` command:\n\n```\nimport { Stepper } from './stepper'it('mounts', () => { cy.mount() //Stepper should have initial count of 0 (default) cy.get('[data-cy=counter]').should('have.text', '0')})\n```\n\n### Passing Data to a Component\n\nYou can pass props to a component by setting them on the JSX passed into `cy.mount()`:\n\n```\nit('mounts', () => { cy.mount() //Stepper should have initial count of 100 cy.get('[data-cy=counter]').should('have.text', '100')})\n```\n\n### Testing Event Handlers\n\nPass a Cypress [spy](/llm/markdown/app/guides/stubs-spies-and-clocks.md#Spies) to an event prop and validate it was called:\n\n```\nit('clicking + fires a change event with the incremented value', () => { const onChangeSpy = cy.spy().as('onChangeSpy') cy.mount() cy.get('[data-cy=increment]').click() cy.get('@onChangeSpy').should('have.been.calledWith', 1)})\n```\n",
"section": "app",
"anchors": [
"mounting-components"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 221
},
{
"id": "app/component-testing/react/examples#mounting-a-component",
"doc_id": "app/component-testing/react/examples",
"heading": "Mounting a Component",
"heading_level": 3,
"content_markdown": "### Mounting a Component\n\nThe first step in testing a component is to mount it. This renders the component into a testbed and enable's the use of the Cypress API to select elements, interact with them, and run assertions.\n\nTo mount a React component, import the component into your spec and pass the component to the `cy.mount` command:\n\n```\nimport { Stepper } from './stepper'it('mounts', () => { cy.mount() //Stepper should have initial count of 0 (default) cy.get('[data-cy=counter]').should('have.text', '0')})\n```\n",
"section": "app",
"anchors": [
"mounting-a-component"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 108
},
{
"id": "app/component-testing/react/examples#passing-data-to-a-component",
"doc_id": "app/component-testing/react/examples",
"heading": "Passing Data to a Component",
"heading_level": 3,
"content_markdown": "### Passing Data to a Component\n\nYou can pass props to a component by setting them on the JSX passed into `cy.mount()`:\n\n```\nit('mounts', () => { cy.mount() //Stepper should have initial count of 100 cy.get('[data-cy=counter]').should('have.text', '100')})\n```\n",
"section": "app",
"anchors": [
"passing-data-to-a-component"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 53
},
{
"id": "app/component-testing/react/examples#testing-event-handlers",
"doc_id": "app/component-testing/react/examples",
"heading": "Testing Event Handlers",
"heading_level": 3,
"content_markdown": "### Testing Event Handlers\n\nPass a Cypress [spy](/llm/markdown/app/guides/stubs-spies-and-clocks.md#Spies) to an event prop and validate it was called:\n\n```\nit('clicking + fires a change event with the incremented value', () => { const onChangeSpy = cy.spy().as('onChangeSpy') cy.mount() cy.get('[data-cy=increment]').click() cy.get('@onChangeSpy').should('have.been.calledWith', 1)})\n```\n",
"section": "app",
"anchors": [
"testing-event-handlers"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 56
},
{
"id": "app/component-testing/react/examples#custom-mount-commands",
"doc_id": "app/component-testing/react/examples",
"heading": "Custom Mount Commands",
"heading_level": 2,
"content_markdown": "## Custom Mount Commands\n\n### Customizing `cy.mount()`\n\nBy default, `cy.mount()` is a simple passthrough to `mount()`, however, you can customize `cy.mount()` to fit your needs. For instance, if you are using providers or other global app-level setups in your React app, you can configure them here.\n\nBelow are a few examples that demonstrate using a custom mount command. These examples can be adjusted for most other providers that you will need to support.\n\n### React Router\n\nIf you have a component that consumes a hook or component from [React Router](https://reactrouter.com/), make sure the component has access to a React Router provider. Below is a sample mount command that uses `MemoryRouter` to wrap the component.\n\n* cypress/support/component.jsx\n* Typings\n\n```\nimport { mount } from 'cypress/react'import { MemoryRouter } from 'react-router-dom'Cypress.Commands.add('mount', (component, options = {}) => { const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options const wrapped = {component} return mount(wrapped, mountOptions)})\n```\n\n```\nimport { MountOptions, MountReturn } from 'cypress/react'import { MemoryRouterProps } from 'react-router-dom'declare global { namespace Cypress { interface Chainable { /** * Mounts a React node * @param component React Node to mount * @param options Additional options to pass into mount */ mount( component: React.ReactNode, options?: MountOptions & { routerProps?: MemoryRouterProps } ): Cypress.Chainable } }}\n```\n\nTo set up certain scenarios, pass in props that will get passed to `MemoryRouter` in the options. Below is an example test that ensures an active link has the correct class applied to it by initializing the router with `initialEntries` pointed to a particular route:\n\n```\nimport { Navigation } from './Navigation'it('home link should be active when url is \"/\"', () => { // No need to pass in custom initialEntries as default url is '/' cy.mount() cy.get('a').contains('Home').should('have.class', 'active')})it('login link should be active when url is \"/login\"', () => { cy.mount(, { routerProps: { initialEntries: ['/login'], }, }) cy.get('a').contains('Login').should('have.class', 'active')})\n```\n\n### Redux\n\nTo use a component that consumes state or actions from a [Redux](https://react-redux.js.org/) store, create a `mount` command that will wrap your component in a Redux Provider:\n\n* cypress/support/component.jsx\n* Typings\n\n```\nimport { mount } from 'cypress/react'import { Provider } from 'react-redux'import { getStore } from '../../src/store'Cypress.Commands.add('mount', (component, options = {}) => { // Use the default store if one is not provided const { reduxStore = getStore(), ...mountOptions } = options const wrapped = {component} return mount(wrapped, mountOptions)})\n```\n\n```\nimport { MountOptions, MountReturn } from 'cypress/react'import { EnhancedStore } from '@reduxjs/toolkit'import { RootState } from './src/StoreState'declare global { namespace Cypress { interface Chainable { /** * Mounts a React node * @param component React Node to mount * @param options Additional options to pass into mount */ mount( component: React.ReactNode, options?: MountOptions & { reduxStore?: EnhancedStore } ): Cypress.Chainable } }}\n```\n\nThe options param can have a store that is already initialized with data:\n\n```\nimport { getStore } from '../redux/store'import { setUser } from '../redux/userSlice'import { UserProfile } from './UserProfile'it('User profile should display user name', () => { const user = { name: 'test person' } // getStore is a factory method that creates a new store const store = getStore() // setUser is an action exported from the user slice store.dispatch(setUser(user)) cy.mount(, { reduxStore: store }) cy.get('div.name').should('have.text', user.name)})\n```\n\nThe `getStore` method is a factory method that initializes a new Redux store. It is important that the store be initialized with each new test to ensure changes to the store don't affect other tests.\n",
"section": "app",
"anchors": [
"custom-mount-commands"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 776
},
{
"id": "app/component-testing/react/examples#customizing-cy-mount",
"doc_id": "app/component-testing/react/examples",
"heading": "Customizing cy.mount()",
"heading_level": 3,
"content_markdown": "### Customizing `cy.mount()`\n\nBy default, `cy.mount()` is a simple passthrough to `mount()`, however, you can customize `cy.mount()` to fit your needs. For instance, if you are using providers or other global app-level setups in your React app, you can configure them here.\n\nBelow are a few examples that demonstrate using a custom mount command. These examples can be adjusted for most other providers that you will need to support.\n",
"section": "app",
"anchors": [
"customizing-cy-mount"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 92
},
{
"id": "app/component-testing/react/examples#react-router",
"doc_id": "app/component-testing/react/examples",
"heading": "React Router",
"heading_level": 3,
"content_markdown": "### React Router\n\nIf you have a component that consumes a hook or component from [React Router](https://reactrouter.com/), make sure the component has access to a React Router provider. Below is a sample mount command that uses `MemoryRouter` to wrap the component.\n\n* cypress/support/component.jsx\n* Typings\n\n```\nimport { mount } from 'cypress/react'import { MemoryRouter } from 'react-router-dom'Cypress.Commands.add('mount', (component, options = {}) => { const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options const wrapped = {component} return mount(wrapped, mountOptions)})\n```\n\n```\nimport { MountOptions, MountReturn } from 'cypress/react'import { MemoryRouterProps } from 'react-router-dom'declare global { namespace Cypress { interface Chainable { /** * Mounts a React node * @param component React Node to mount * @param options Additional options to pass into mount */ mount( component: React.ReactNode, options?: MountOptions & { routerProps?: MemoryRouterProps } ): Cypress.Chainable } }}\n```\n\nTo set up certain scenarios, pass in props that will get passed to `MemoryRouter` in the options. Below is an example test that ensures an active link has the correct class applied to it by initializing the router with `initialEntries` pointed to a particular route:\n\n```\nimport { Navigation } from './Navigation'it('home link should be active when url is \"/\"', () => { // No need to pass in custom initialEntries as default url is '/' cy.mount() cy.get('a').contains('Home').should('have.class', 'active')})it('login link should be active when url is \"/login\"', () => { cy.mount(, { routerProps: { initialEntries: ['/login'], }, }) cy.get('a').contains('Login').should('have.class', 'active')})\n```\n",
"section": "app",
"anchors": [
"react-router"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 328
},
{
"id": "app/component-testing/react/examples#redux",
"doc_id": "app/component-testing/react/examples",
"heading": "Redux",
"heading_level": 3,
"content_markdown": "### Redux\n\nTo use a component that consumes state or actions from a [Redux](https://react-redux.js.org/) store, create a `mount` command that will wrap your component in a Redux Provider:\n\n* cypress/support/component.jsx\n* Typings\n\n```\nimport { mount } from 'cypress/react'import { Provider } from 'react-redux'import { getStore } from '../../src/store'Cypress.Commands.add('mount', (component, options = {}) => { // Use the default store if one is not provided const { reduxStore = getStore(), ...mountOptions } = options const wrapped = {component} return mount(wrapped, mountOptions)})\n```\n\n```\nimport { MountOptions, MountReturn } from 'cypress/react'import { EnhancedStore } from '@reduxjs/toolkit'import { RootState } from './src/StoreState'declare global { namespace Cypress { interface Chainable { /** * Mounts a React node * @param component React Node to mount * @param options Additional options to pass into mount */ mount( component: React.ReactNode, options?: MountOptions & { reduxStore?: EnhancedStore } ): Cypress.Chainable } }}\n```\n\nThe options param can have a store that is already initialized with data:\n\n```\nimport { getStore } from '../redux/store'import { setUser } from '../redux/userSlice'import { UserProfile } from './UserProfile'it('User profile should display user name', () => { const user = { name: 'test person' } // getStore is a factory method that creates a new store const store = getStore() // setUser is an action exported from the user slice store.dispatch(setUser(user)) cy.mount(, { reduxStore: store }) cy.get('div.name').should('have.text', user.name)})\n```\n\nThe `getStore` method is a factory method that initializes a new Redux store. It is important that the store be initialized with each new test to ensure changes to the store don't affect other tests.\n",
"section": "app",
"anchors": [
"redux"
],
"path": "/llm/json/chunked/app/component-testing/react/examples.json",
"token_estimate": 351
}
]
}