---
id: app/component-testing/react/overview
title: React Component Testing
description: >-
  Learn how to set up component tests in React and use Cypress with different
  React frameworks and bundlers.
section: app
source_path: docs/app/component-testing/react/overview.mdx
version: ce02913654e2655ee63448bdc92bb92c7b46a619
updated_at: '2026-04-22T19:37:51.587Z'
---
# React Component Testing

#####  What you'll learn

- How to set up component tests in React
- How to use Cypress with different React frameworks and bundlers

## Framework Support

Cypress Component Testing currently supports React 18 and 19 with the following
frameworks:

- [React with Vite](#React-with-Vite)
- [React with Webpack](#React-with-Webpack)
- [Next.js](#Nextjs)

## Tutorial

Visit the
[Getting Started Guide](/llm/markdown/app/component-testing/get-started.md) for a
step-by-step tutorial on adding component testing to any project and how to write your first tests.

## Installation

To get up and running with Cypress Component Testing in React, install Cypress
into your project:

Open Cypress:

The Cypress Launchpad will guide you through configuring your project.

For a step-by-step guide on how to create a component test, refer to the
[Getting Started](/llm/markdown/app/component-testing/get-started.md) guide.

For usage and examples, visit the
[React Examples](/llm/markdown/app/component-testing/react/examples.md) guide.

## Framework Configuration

Cypress Component Testing works out of the box with [Vite](https://vitejs.dev/), [Next.js](https://nextjs.org/), and a custom
[Webpack](https://webpack.js.org/) config. Cypress will automatically detect one
of these frameworks during setup and configure them properly. The examples below
are for reference purposes.

### React with Vite

Cypress Component Testing works with React apps that use Vite 5+ as the bundler.

#### Vite Configuration

```ts
import customViteConfig from './customConfig'
```

```ts
{
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
      // optionally pass in vite config
      viteConfig: customViteConfig,
      // or a function - the result is merged with
      // any `vite.config` file that is detected
      viteConfig: async () => {
        // ... do things ...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
}
```

#### Sample React Vite Apps

- [React Vite with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-vite-ts)

### React with Webpack

Cypress Component Testing works with React apps that use Webpack 4+ as the
bundler.

#### Webpack Configuration

```ts
import webpackConfig from './webpack.config'
```

```ts
{
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
      // or a function - the result is merged with any
      // webpack.config that is found
      webpackConfig: async () => {
        // ... do things ...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
}
```

If you don't provide a webpack config, Cypress will try to infer it. If Cypress
cannot do so, or you want to make modifications to your config, you can specify
it via the `webpackConfig` option.

#### Sample React Webpack Apps

- [React Webpack 5 with JavaScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-webpack5-js)

### Next.js

Cypress Component Testing works with Next.js 14, 15 and 16.

#### Next.js Configuration

```ts
{
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
  },
}
```

#### Next.js Caveats

There are some specific caveats to consider when testing Next.js
[Pages](https://nextjs.org/docs/basic-features/pages) in component testing.

A page component could have additional logic in its `getServerSideProps` or
`getStaticProps` methods. These methods only run on the server, so they are not
available to run inside a component test. Trying to test a page in a component
test would result in the props being passed into the page to be undefined.

While you could pass in props directly to the page component in a component
test, that would leave these server-side methods untested. However, an
end-to-end test would execute and test a page entirely.

Because of this, we recommend using E2E Testing over Component Testing for
Next.js pages and Component Testing for individual components in a Next.js app.

#### Sample Next.js Apps

- [Next.js 15 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next15-ts)
- [Next.js 16 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next16-ts)

## Community Resources

- [Cypress Component Test Driven Design](https://muratkerem.gitbook.io/cctdd/)
- [Cypress React Component Test Examples](https://github.com/muratkeremozcan/cypress-react-component-test-examples)