--- 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: a8fd16711bdda4c7b5645b9717e588ae99ec2470 updated_at: '2026-05-18T17:21:32.047Z' --- # 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: * npm * yarn * pnpm ``` npm install cypress --save-dev ``` ``` yarn add cypress --dev ``` ``` pnpm add --save-dev cypress ``` Open Cypress: * npm * yarn * pnpm ``` npx cypress open ``` ``` yarn cypress open ``` ``` pnpm cypress open ``` Choose Component Testing 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 * cypress.config.js * cypress.config.ts ``` const { defineConfig } = require('cypress')const customViteConfig = require('./customConfig')module.exports = defineConfig({ 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 }, }, },}) ``` ``` import { defineConfig } from 'cypress'import customViteConfig from './customConfig'export default defineConfig({ 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 * cypress.config.js * cypress.config.ts ``` const { defineConfig } = require('cypress')const webpackConfig = require('./webpack.config')module.exports = defineConfig({ 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 }, }, },}) ``` ``` import { defineConfig } from 'cypress'import webpackConfig from './webpack.config'export default defineConfig({ 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 * cypress.config.js * cypress.config.ts ``` const { defineConfig } = require('cypress')module.exports = defineConfig({ component: { devServer: { framework: 'next', bundler: 'webpack', }, },}) ``` ``` import { defineConfig } from 'cypress'export default defineConfig({ 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)