{
  "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": "ce02913654e2655ee63448bdc92bb92c7b46a619",
    "updated_at": "2026-04-22T19:37:51.587Z",
    "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
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "React Component Testing"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 5,
        "children": [
          {
            "type": "text",
            "value": " What you'll learn"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to set up component tests in React"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to use Cypress with different React frameworks and bundlers"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Framework Support"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing currently supports React 18 and 19 with the following\nframeworks:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "#React-with-Vite",
                    "children": [
                      {
                        "type": "text",
                        "value": "React with Vite"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "#React-with-Webpack",
                    "children": [
                      {
                        "type": "text",
                        "value": "React with Webpack"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "#Nextjs",
                    "children": [
                      {
                        "type": "text",
                        "value": "Next.js"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Tutorial"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Visit the\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/get-started.md",
            "children": [
              {
                "type": "text",
                "value": "Getting Started Guide"
              }
            ]
          },
          {
            "type": "text",
            "value": " for a\nstep-by-step tutorial on adding component testing to any project and how to write your first tests."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Installation"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To get up and running with Cypress Component Testing in React, install Cypress\ninto your project:"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Open Cypress:"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The Cypress Launchpad will guide you through configuring your project."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "For a step-by-step guide on how to create a component test, refer to the\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/get-started.md",
            "children": [
              {
                "type": "text",
                "value": "Getting Started"
              }
            ]
          },
          {
            "type": "text",
            "value": " guide."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "For usage and examples, visit the\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/react/examples.md",
            "children": [
              {
                "type": "text",
                "value": "React Examples"
              }
            ]
          },
          {
            "type": "text",
            "value": " guide."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Framework Configuration"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works out of the box with "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://vitejs.dev/",
            "children": [
              {
                "type": "text",
                "value": "Vite"
              }
            ]
          },
          {
            "type": "text",
            "value": ", "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://nextjs.org/",
            "children": [
              {
                "type": "text",
                "value": "Next.js"
              }
            ]
          },
          {
            "type": "text",
            "value": ", and a custom\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "https://webpack.js.org/",
            "children": [
              {
                "type": "text",
                "value": "Webpack"
              }
            ]
          },
          {
            "type": "text",
            "value": " config. Cypress will automatically detect one\nof these frameworks during setup and configure them properly. The examples below\nare for reference purposes."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "React with Vite"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works with React apps that use Vite 5+ as the bundler."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Vite Configuration"
          }
        ]
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "import customViteConfig from './customConfig'"
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "{\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}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Sample React Vite Apps"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-vite-ts",
                    "children": [
                      {
                        "type": "text",
                        "value": "React Vite with TypeScript"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "React with Webpack"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works with React apps that use Webpack 4+ as the\nbundler."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Webpack Configuration"
          }
        ]
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "import webpackConfig from './webpack.config'"
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "{\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}"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "If you don't provide a webpack config, Cypress will try to infer it. If Cypress\ncannot do so, or you want to make modifications to your config, you can specify\nit via the `webpackConfig` option."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Sample React Webpack Apps"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-webpack5-js",
                    "children": [
                      {
                        "type": "text",
                        "value": "React Webpack 5 with JavaScript"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Next.js"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works with Next.js 14, 15 and 16."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Next.js Configuration"
          }
        ]
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "{\n  component: {\n    devServer: {\n      framework: 'next',\n      bundler: 'webpack',\n    },\n  },\n}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Next.js Caveats"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "There are some specific caveats to consider when testing Next.js\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "https://nextjs.org/docs/basic-features/pages",
            "children": [
              {
                "type": "text",
                "value": "Pages"
              }
            ]
          },
          {
            "type": "text",
            "value": " in component testing."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "A page component could have additional logic in its `getServerSideProps` or\n`getStaticProps` methods. These methods only run on the server, so they are not\navailable to run inside a component test. Trying to test a page in a component\ntest would result in the props being passed into the page to be undefined."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "While you could pass in props directly to the page component in a component\ntest, that would leave these server-side methods untested. However, an\nend-to-end test would execute and test a page entirely."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Because of this, we recommend using E2E Testing over Component Testing for\nNext.js pages and Component Testing for individual components in a Next.js app."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Sample Next.js Apps"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next15-ts",
                    "children": [
                      {
                        "type": "text",
                        "value": "Next.js 15 with TypeScript"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next16-ts",
                    "children": [
                      {
                        "type": "text",
                        "value": "Next.js 16 with TypeScript"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Community Resources"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://muratkerem.gitbook.io/cctdd/",
                    "children": [
                      {
                        "type": "text",
                        "value": "Cypress Component Test Driven Design"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/muratkeremozcan/cypress-react-component-test-examples",
                    "children": [
                      {
                        "type": "text",
                        "value": "Cypress React Component Test Examples"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "token_estimate": 776
}