{
  "doc": {
    "id": "app/write-tests/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/write-tests/component-testing/react/overview.md",
    "version": "e4f4d57da4cfedd520d3d465137d387fd54b532f",
    "updated_at": "2026-09-08T17:49:12.214Z",
    "headings": [
      {
        "id": "app/write-tests/component-testing/react/overview#react-component-testing",
        "text": "React Component Testing",
        "level": 1
      },
      {
        "id": "app/write-tests/component-testing/react/overview#tutorial",
        "text": "Tutorial",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/react/overview#installation",
        "text": "Installation",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/react/overview#framework-configuration",
        "text": "Framework Configuration",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/react/overview#react-with-vite",
        "text": "React with Vite",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/react/overview#vite-configuration",
        "text": "Vite Configuration",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#sample-react-vite-apps",
        "text": "Sample React Vite Apps",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#react-with-webpack",
        "text": "React with Webpack",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/react/overview#required-packages",
        "text": "Required Packages",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#webpack-configuration",
        "text": "Webpack Configuration",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#sample-react-webpack-apps",
        "text": "Sample React Webpack Apps",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#next-js",
        "text": "Next.js",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/react/overview#next-js-configuration",
        "text": "Next.js Configuration",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#next-js-caveats",
        "text": "Next.js Caveats",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#sample-next-js-apps",
        "text": "Sample Next.js Apps",
        "level": 4
      },
      {
        "id": "app/write-tests/component-testing/react/overview#community-resources",
        "text": "Community Resources",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/react/overview#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "app/write-tests/component-testing/react/overview#installation",
      "doc_id": "app/write-tests/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*   Bun\n\n```\nnpm install cypress --save-dev\n```\n\n```\nyarn add cypress --dev\n```\n\n```\npnpm add --save-dev cypress\n```\n\n```\nbun add --dev cypress\n```\n\nOpen Cypress:\n\n*   npm\n*   Yarn\n*   pnpm\n*   Bun\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\n```\nbunx 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/write-tests/component-testing/react/overview.json",
      "token_estimate": 159
    },
    {
      "id": "app/write-tests/component-testing/react/overview#framework-configuration",
      "doc_id": "app/write-tests/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.\n\nFor a full explanation of how the dev server and bundler work — including automatic config detection and override options — see [Component Testing Configuration — Dev Server and Bundler](/llm/markdown/app/component-testing/component-framework-configuration.md#Dev-Server-and-Bundler).\n\nThe examples below are for quick reference.\n\n### React with Vite\n\nCypress Component Testing works with React apps that use Vite `8.x` as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst customViteConfig = require('./customConfig')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'vite',\n      // optionally pass in vite config\n      viteConfig: customViteConfig,\n      // or a function - the result is merged with\n      // any `vite.config` file that is detected\n      viteConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport customViteConfig from './customConfig'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'vite',\n      // optionally pass in vite config\n      viteConfig: customViteConfig,\n      // or a function - the result is merged with\n      // any `vite.config` file that is detected\n      viteConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\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 5+ as the bundler.\n\n#### Required Packages\n\nInstall these packages in your project to run React component tests with Webpack:\n\n| Package | Version | Purpose |\n| --- | --- | --- |\n| `cypress` | Latest | The Cypress App. Ships with the React mount adapter and the Webpack dev server |\n| `react` | 18 or 19 | The React library your components are built with |\n| `react-dom` | 18 or 19 | Renders your components into the DOM during a test |\n| `webpack` | 5 | Your app's bundler. Cypress compiles your specs with the Webpack config it detects in the project |\n\nYou do not need to install `@cypress/react`, `@cypress/webpack-dev-server`, or `webpack-dev-server` separately. All three ship inside the `cypress` package, so `import { mount } from 'cypress/react'` and `bundler: 'webpack'` work as soon as Cypress is installed.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst webpackConfig = require('./webpack.config')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n      // or a function - the result is merged with any\n      // webpack.config that is found\n      webpackConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport webpackConfig from './webpack.config'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n      // or a function - the result is merged with any\n      // webpack.config that is found\n      webpackConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\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 15 and 16.\n\n#### Next.js Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n    },\n  },\n})\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/write-tests/component-testing/react/overview.json",
      "token_estimate": 1055
    },
    {
      "id": "app/write-tests/component-testing/react/overview#react-with-vite",
      "doc_id": "app/write-tests/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 `8.x` as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst customViteConfig = require('./customConfig')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'vite',\n      // optionally pass in vite config\n      viteConfig: customViteConfig,\n      // or a function - the result is merged with\n      // any `vite.config` file that is detected\n      viteConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport customViteConfig from './customConfig'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'vite',\n      // optionally pass in vite config\n      viteConfig: customViteConfig,\n      // or a function - the result is merged with\n      // any `vite.config` file that is detected\n      viteConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\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/write-tests/component-testing/react/overview.json",
      "token_estimate": 231
    },
    {
      "id": "app/write-tests/component-testing/react/overview#vite-configuration",
      "doc_id": "app/write-tests/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')\nconst customViteConfig = require('./customConfig')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'vite',\n      // optionally pass in vite config\n      viteConfig: customViteConfig,\n      // or a function - the result is merged with\n      // any `vite.config` file that is detected\n      viteConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport customViteConfig from './customConfig'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'vite',\n      // optionally pass in vite config\n      viteConfig: customViteConfig,\n      // or a function - the result is merged with\n      // any `vite.config` file that is detected\n      viteConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\n```\n",
      "section": "app",
      "anchors": [
        "vite-configuration"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/react/overview.json",
      "token_estimate": 193
    },
    {
      "id": "app/write-tests/component-testing/react/overview#react-with-webpack",
      "doc_id": "app/write-tests/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 5+ as the bundler.\n\n#### Required Packages\n\nInstall these packages in your project to run React component tests with Webpack:\n\n| Package | Version | Purpose |\n| --- | --- | --- |\n| `cypress` | Latest | The Cypress App. Ships with the React mount adapter and the Webpack dev server |\n| `react` | 18 or 19 | The React library your components are built with |\n| `react-dom` | 18 or 19 | Renders your components into the DOM during a test |\n| `webpack` | 5 | Your app's bundler. Cypress compiles your specs with the Webpack config it detects in the project |\n\nYou do not need to install `@cypress/react`, `@cypress/webpack-dev-server`, or `webpack-dev-server` separately. All three ship inside the `cypress` package, so `import { mount } from 'cypress/react'` and `bundler: 'webpack'` work as soon as Cypress is installed.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\nconst webpackConfig = require('./webpack.config')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n      // or a function - the result is merged with any\n      // webpack.config that is found\n      webpackConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport webpackConfig from './webpack.config'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n      // or a function - the result is merged with any\n      // webpack.config that is found\n      webpackConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\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/write-tests/component-testing/react/overview.json",
      "token_estimate": 460
    },
    {
      "id": "app/write-tests/component-testing/react/overview#required-packages",
      "doc_id": "app/write-tests/component-testing/react/overview",
      "heading": "Required Packages",
      "heading_level": 4,
      "content_markdown": "#### Required Packages\n\nInstall these packages in your project to run React component tests with Webpack:\n\n| Package | Version | Purpose |\n| --- | --- | --- |\n| `cypress` | Latest | The Cypress App. Ships with the React mount adapter and the Webpack dev server |\n| `react` | 18 or 19 | The React library your components are built with |\n| `react-dom` | 18 or 19 | Renders your components into the DOM during a test |\n| `webpack` | 5 | Your app's bundler. Cypress compiles your specs with the Webpack config it detects in the project |\n\nYou do not need to install `@cypress/react`, `@cypress/webpack-dev-server`, or `webpack-dev-server` separately. All three ship inside the `cypress` package, so `import { mount } from 'cypress/react'` and `bundler: 'webpack'` work as soon as Cypress is installed.\n",
      "section": "app",
      "anchors": [
        "required-packages"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/react/overview.json",
      "token_estimate": 187
    },
    {
      "id": "app/write-tests/component-testing/react/overview#webpack-configuration",
      "doc_id": "app/write-tests/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')\nconst webpackConfig = require('./webpack.config')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n      // or a function - the result is merged with any\n      // webpack.config that is found\n      webpackConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\nimport webpackConfig from './webpack.config'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n      // or a function - the result is merged with any\n      // webpack.config that is found\n      webpackConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n})\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/write-tests/component-testing/react/overview.json",
      "token_estimate": 235
    },
    {
      "id": "app/write-tests/component-testing/react/overview#next-js",
      "doc_id": "app/write-tests/component-testing/react/overview",
      "heading": "Next.js",
      "heading_level": 3,
      "content_markdown": "### Next.js\n\nCypress Component Testing works with Next.js 15 and 16.\n\n#### Next.js Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n    },\n  },\n})\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/write-tests/component-testing/react/overview.json",
      "token_estimate": 271
    },
    {
      "id": "app/write-tests/component-testing/react/overview#next-js-configuration",
      "doc_id": "app/write-tests/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')\n\nmodule.exports = defineConfig({\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n    },\n  },\n})\n```\n\n```\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n    },\n  },\n})\n```\n",
      "section": "app",
      "anchors": [
        "next-js-configuration"
      ],
      "path": "/llm/json/chunked/app/write-tests/component-testing/react/overview.json",
      "token_estimate": 68
    },
    {
      "id": "app/write-tests/component-testing/react/overview#next-js-caveats",
      "doc_id": "app/write-tests/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/write-tests/component-testing/react/overview.json",
      "token_estimate": 169
    }
  ]
}