---
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: docs/app/component-testing/react/examples.mdx
version: ce02913654e2655ee63448bdc92bb92c7b46a619
updated_at: '2026-04-22T19:37:51.587Z'
---
# React Examples

#####  What you'll learn

- How to mount a React component
- How to pass data to a React component
- How to test event handlers
- How to customize `cy.mount()` for React Router and Redux

## Mounting Components

### Mounting a Component

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.

To mount a React component, import the component into your spec and pass the
component to the `cy.mount` command:

```js
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')
})
```

### Passing Data to a Component

You can pass props to a component by setting them on the JSX passed into
`cy.mount()`:

```ts
it('mounts', () => {
  cy.mount(<Stepper initial={100} />)
  //Stepper should have initial count of 100
  cy.get('[data-cy=counter]').should('have.text', '100')
})
```

### Testing Event Handlers

Pass a Cypress [spy](/llm/markdown/app/guides/stubs-spies-and-clocks.md#Spies) to an event
prop and validate it was called:

```ts
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)
})
```

## Custom Mount Commands

### Customizing cy.mount()

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.

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.

### React Router

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

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:

```jsx
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')
})
```

### Redux

To 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:

The options param can have a store that is already initialized with data:

```jsx
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)
})
```

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.