{
  "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": "3cf5b86b3403f604bdf7f3e35025c3bc3865e02c",
    "updated_at": "2026-05-07T17:44:31.931Z",
    "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
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "React Examples"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 5,
        "children": [
          {
            "type": "text",
            "value": "What you'll learn"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to mount a React component"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to pass data to a React component"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to test event handlers"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to customize `cy.mount()` for React Router and Redux"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Mounting Components"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Mounting a Component"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The 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."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To mount a React component, import the component into your spec and pass the component to the `cy.mount` command:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { Stepper } from './stepper'it('mounts', () => {  cy.mount(<Stepper />)  //Stepper should have initial count of 0 (default)  cy.get('[data-cy=counter]').should('have.text', '0')})"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Passing Data to a Component"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "You can pass props to a component by setting them on the JSX passed into `cy.mount()`:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "it('mounts', () => {  cy.mount(<Stepper initial={100} />)  //Stepper should have initial count of 100  cy.get('[data-cy=counter]').should('have.text', '100')})"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Testing Event Handlers"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Pass a Cypress "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/guides/stubs-spies-and-clocks.md#Spies",
            "children": [
              {
                "type": "text",
                "value": "spy"
              }
            ]
          },
          {
            "type": "text",
            "value": " to an event prop and validate it was called:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "it('clicking + fires a change event with the incremented value', () => {  const onChangeSpy = cy.spy().as('onChangeSpy')  cy.mount(<Stepper onChange={onChangeSpy} />)  cy.get('[data-cy=increment]').click()  cy.get('@onChangeSpy').should('have.been.calledWith', 1)})"
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Custom Mount Commands"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Customizing `cy.mount()`"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "By 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."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Below 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."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "React Router"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "If you have a component that consumes a hook or component from "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://reactrouter.com/",
            "children": [
              {
                "type": "text",
                "value": "React Router"
              }
            ]
          },
          {
            "type": "text",
            "value": ", make sure the component has access to a React Router provider. Below is a sample mount command that uses `MemoryRouter` to wrap the component."
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress/support/component.jsx"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Typings"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { mount } from 'cypress/react'import { MemoryRouter } from 'react-router-dom'Cypress.Commands.add('mount', (component, options = {}) => {  const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options  const wrapped = <MemoryRouter {...routerProps}>{component}</MemoryRouter>  return mount(wrapped, mountOptions)})"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { 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<MountReturn>    }  }}"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To 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:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { 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(<Navigation />)  cy.get('a').contains('Home').should('have.class', 'active')})it('login link should be active when url is \"/login\"', () => {  cy.mount(<Navigation />, {    routerProps: {      initialEntries: ['/login'],    },  })  cy.get('a').contains('Login').should('have.class', 'active')})"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Redux"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To use a component that consumes state or actions from a "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://react-redux.js.org/",
            "children": [
              {
                "type": "text",
                "value": "Redux"
              }
            ]
          },
          {
            "type": "text",
            "value": " store, create a `mount` command that will wrap your component in a Redux Provider:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress/support/component.jsx"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Typings"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { 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 = <Provider store={reduxStore}>{component}</Provider>  return mount(wrapped, mountOptions)})"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { 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<RootState> }      ): Cypress.Chainable<MountReturn>    }  }}"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The options param can have a store that is already initialized with data:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { 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(<UserProfile />, { reduxStore: store })  cy.get('div.name').should('have.text', user.name)})"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The `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."
          }
        ]
      }
    ]
  },
  "token_estimate": 1049
}