{
  "doc": {
    "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": "/llm/markdown/app/component-testing/react/overview.md",
    "version": "e6988a974973e9090ce70406c38cb2b9e0eac9fa",
    "updated_at": "2026-05-15T15:50:22.536Z",
    "headings": [
      {
        "id": "app/component-testing/react/overview#react-component-testing",
        "text": "React Component Testing",
        "level": 1
      },
      {
        "id": "app/component-testing/react/overview#what-youll-learn",
        "text": "What you'll learn",
        "level": 5
      },
      {
        "id": "app/component-testing/react/overview#framework-support",
        "text": "Framework Support",
        "level": 2
      },
      {
        "id": "app/component-testing/react/overview#tutorial",
        "text": "Tutorial",
        "level": 2
      },
      {
        "id": "app/component-testing/react/overview#installation",
        "text": "Installation",
        "level": 2
      },
      {
        "id": "app/component-testing/react/overview#framework-configuration",
        "text": "Framework Configuration",
        "level": 2
      },
      {
        "id": "app/component-testing/react/overview#react-with-vite",
        "text": "React with Vite",
        "level": 3
      },
      {
        "id": "app/component-testing/react/overview#vite-configuration",
        "text": "Vite Configuration",
        "level": 4
      },
      {
        "id": "app/component-testing/react/overview#sample-react-vite-apps",
        "text": "Sample React Vite Apps",
        "level": 4
      },
      {
        "id": "app/component-testing/react/overview#react-with-webpack",
        "text": "React with Webpack",
        "level": 3
      },
      {
        "id": "app/component-testing/react/overview#webpack-configuration",
        "text": "Webpack Configuration",
        "level": 4
      },
      {
        "id": "app/component-testing/react/overview#sample-react-webpack-apps",
        "text": "Sample React Webpack Apps",
        "level": 4
      },
      {
        "id": "app/component-testing/react/overview#next-js",
        "text": "Next.js",
        "level": 3
      },
      {
        "id": "app/component-testing/react/overview#next-js-configuration",
        "text": "Next.js Configuration",
        "level": 4
      },
      {
        "id": "app/component-testing/react/overview#next-js-caveats",
        "text": "Next.js Caveats",
        "level": 4
      },
      {
        "id": "app/component-testing/react/overview#sample-next-js-apps",
        "text": "Sample Next.js Apps",
        "level": 4
      },
      {
        "id": "app/component-testing/react/overview#community-resources",
        "text": "Community Resources",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "app/component-testing/react/overview#installation",
      "doc_id": "app/component-testing/react/overview",
      "heading": "Installation",
      "heading_level": 2,
      "content_markdown": "## Installation\n\nTo get up and running with Cypress Component Testing in React, install Cypress into your project:\n\n*   npm\n*   yarn\n*   pnpm\n\n```\nnpm install cypress --save-dev\n```\n\n```\nyarn add cypress --dev\n```\n\n```\npnpm add --save-dev cypress\n```\n\nOpen Cypress:\n\n*   npm\n*   yarn\n*   pnpm\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\nChoose Component Testing\n\nThe Cypress Launchpad will guide you through configuring your project.\n\nFor 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.\n\nFor usage and examples, visit the [React Examples](/llm/markdown/app/component-testing/react/examples.md) guide.\n",
      "section": "app",
      "anchors": [
        "installation"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 139
    },
    {
      "id": "app/component-testing/react/overview#framework-configuration",
      "doc_id": "app/component-testing/react/overview",
      "heading": "Framework Configuration",
      "heading_level": 2,
      "content_markdown": "## Framework Configuration\n\nCypress 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.\n\n### React with Vite\n\nCypress Component Testing works with React apps that use Vite 5+ as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\n#### Sample React Vite Apps\n\n*   [React Vite with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-vite-ts)\n\n### React with Webpack\n\nCypress Component Testing works with React apps that use Webpack 4+ as the bundler.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\nIf 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.\n\n#### Sample React Webpack Apps\n\n*   [React Webpack 5 with JavaScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-webpack5-js)\n\n### Next.js\n\nCypress Component Testing works with Next.js 14, 15 and 16.\n\n#### Next.js Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'next',      bundler: 'webpack',    },  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'next',      bundler: 'webpack',    },  },})\n```\n\n#### Next.js Caveats\n\nThere are some specific caveats to consider when testing Next.js [Pages](https://nextjs.org/docs/basic-features/pages) in component testing.\n\nA 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.\n\nWhile 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.\n\nBecause 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.\n\n#### Sample Next.js Apps\n\n*   [Next.js 15 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next15-ts)\n*   [Next.js 16 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next16-ts)\n",
      "section": "app",
      "anchors": [
        "framework-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 808
    },
    {
      "id": "app/component-testing/react/overview#react-with-vite",
      "doc_id": "app/component-testing/react/overview",
      "heading": "React with Vite",
      "heading_level": 3,
      "content_markdown": "### React with Vite\n\nCypress Component Testing works with React apps that use Vite 5+ as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\n#### Sample React Vite Apps\n\n*   [React Vite with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-vite-ts)\n",
      "section": "app",
      "anchors": [
        "react-with-vite"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 223
    },
    {
      "id": "app/component-testing/react/overview#vite-configuration",
      "doc_id": "app/component-testing/react/overview",
      "heading": "Vite Configuration",
      "heading_level": 4,
      "content_markdown": "#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n",
      "section": "app",
      "anchors": [
        "vite-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 185
    },
    {
      "id": "app/component-testing/react/overview#react-with-webpack",
      "doc_id": "app/component-testing/react/overview",
      "heading": "React with Webpack",
      "heading_level": 3,
      "content_markdown": "### React with Webpack\n\nCypress Component Testing works with React apps that use Webpack 4+ as the bundler.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\nIf 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.\n\n#### Sample React Webpack Apps\n\n*   [React Webpack 5 with JavaScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-webpack5-js)\n",
      "section": "app",
      "anchors": [
        "react-with-webpack"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 265
    },
    {
      "id": "app/component-testing/react/overview#webpack-configuration",
      "doc_id": "app/component-testing/react/overview",
      "heading": "Webpack Configuration",
      "heading_level": 4,
      "content_markdown": "#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\nIf 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.\n",
      "section": "app",
      "anchors": [
        "webpack-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 227
    },
    {
      "id": "app/component-testing/react/overview#next-js",
      "doc_id": "app/component-testing/react/overview",
      "heading": "Next.js",
      "heading_level": 3,
      "content_markdown": "### Next.js\n\nCypress Component Testing works with Next.js 14, 15 and 16.\n\n#### Next.js Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'next',      bundler: 'webpack',    },  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'next',      bundler: 'webpack',    },  },})\n```\n\n#### Next.js Caveats\n\nThere are some specific caveats to consider when testing Next.js [Pages](https://nextjs.org/docs/basic-features/pages) in component testing.\n\nA 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.\n\nWhile 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.\n\nBecause 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.\n\n#### Sample Next.js Apps\n\n*   [Next.js 15 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next15-ts)\n*   [Next.js 16 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next16-ts)\n",
      "section": "app",
      "anchors": [
        "next-js"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 267
    },
    {
      "id": "app/component-testing/react/overview#next-js-configuration",
      "doc_id": "app/component-testing/react/overview",
      "heading": "Next.js Configuration",
      "heading_level": 4,
      "content_markdown": "#### Next.js Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'next',      bundler: 'webpack',    },  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'next',      bundler: 'webpack',    },  },})\n```\n",
      "section": "app",
      "anchors": [
        "next-js-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 63
    },
    {
      "id": "app/component-testing/react/overview#next-js-caveats",
      "doc_id": "app/component-testing/react/overview",
      "heading": "Next.js Caveats",
      "heading_level": 4,
      "content_markdown": "#### Next.js Caveats\n\nThere are some specific caveats to consider when testing Next.js [Pages](https://nextjs.org/docs/basic-features/pages) in component testing.\n\nA 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.\n\nWhile 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.\n\nBecause 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.\n",
      "section": "app",
      "anchors": [
        "next-js-caveats"
      ],
      "path": "/llm/json/chunked/app/component-testing/react/overview.json",
      "token_estimate": 169
    }
  ]
}