diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx index 9d64a86ab8..c16e3d0c0b 100644 --- a/docs/app/component-testing/get-started.mdx +++ b/docs/app/component-testing/get-started.mdx @@ -40,10 +40,9 @@ following development servers and frameworks: | Framework | UI Library | Bundler | | ------------------------------------------------------------------------------------------------------------------ | ------------- | ----------- | -| [Create React App 4-5](/app/component-testing/react/overview#Create-React-App-CRA) | React 16-18 | Webpack 4-5 | -| [Next.js 14](/app/component-testing/react/overview#Nextjs) | React 18 | Webpack 5 | | [React with Vite](/app/component-testing/react/overview#React-with-Vite) | React 16-18 | Vite 4-5 | | [React with Webpack](/app/component-testing/react/overview#React-with-Webpack) | React 16-18 | Webpack 4-5 | +| [Next.js 14](/app/component-testing/react/overview#Nextjs) | React 18 | Webpack 5 | | [Vue CLI 4-5](/app/component-testing/vue/overview#Vue-CLI) | Vue 3 | Webpack 4-5 | | [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 4-5 | | [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 3 | Webpack 4-5 | diff --git a/docs/app/component-testing/react/overview.mdx b/docs/app/component-testing/react/overview.mdx index 6a8fa88760..0b34db0f67 100644 --- a/docs/app/component-testing/react/overview.mdx +++ b/docs/app/component-testing/react/overview.mdx @@ -18,10 +18,9 @@ sidebar_label: Overview Cypress Component Testing currently supports React 16+ with the following frameworks: -- [Create React App](#Create-React-App-CRA) -- [Next.js](#Nextjs) - [React with Vite](#React-with-Vite) - [React with Webpack](#React-with-Webpack) +- [Next.js](#Nextjs) ## Tutorial @@ -59,81 +58,11 @@ For usage and examples, visit the ## Framework Configuration -Cypress Component Testing works out of the box with -[Create React App](https://create-react-app.dev/), -[Next.js](https://nextjs.org/), [Vite](https://vitejs.dev/), and a custom +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. -### Create React App (CRA) - -Cypress Component Testing works with CRA 4+. - -#### CRA Configuration - -:::cypress-config-example - -```ts -{ - component: { - devServer: { - framework: 'create-react-app', - bundler: 'webpack', - }, - }, -} -``` - -::: - -#### Sample Create React Apps - -- [CRA 4 with JavaScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-cra4-js) -- [CRA 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-cra5-ts) - -### Next.js - -Cypress Component Testing works with Next.js 14+. - -#### Next.js Configuration - -:::cypress-config-example - -```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 14 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next14-ts) - ### React with Vite Cypress Component Testing works with React apps that use Vite 2+ as the bundler. @@ -215,6 +144,48 @@ it via the `webpackConfig` option. - [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+. + +#### Next.js Configuration + +:::cypress-config-example + +```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 14 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next14-ts) + ## Community Resources - [Cypress Component Test Driven Design](https://muratkerem.gitbook.io/cctdd/) diff --git a/docs/app/faq.mdx b/docs/app/faq.mdx index 8a21effffd..ad0567fe30 100644 --- a/docs/app/faq.mdx +++ b/docs/app/faq.mdx @@ -1282,8 +1282,7 @@ If you really need to select React components by their name, props, or state, check out [cypress-react-selector](https://github.com/abhinaba-ghosh/cypress-react-selector). -For component testing, we support various different frameworks like Create React -App, Vite, and Next.js for React applications. See the +For component testing, we support various different frameworks like Vite, Webpack, and Next.js for React applications. See the [Framework Configuration Guide](/app/component-testing/component-framework-configuration) for more info. diff --git a/docs/app/references/migration-guide.mdx b/docs/app/references/migration-guide.mdx index 89d870b7a7..66c3d1e6a9 100644 --- a/docs/app/references/migration-guide.mdx +++ b/docs/app/references/migration-guide.mdx @@ -148,6 +148,30 @@ to import { mount } from `cypress/angular` ``` +### Create React App for Component Testing is no longer supported + +[create-react-app](https://create-react-app.dev/) is no longer actively maintained or supported (see [CRA issue #13393](https://github.com/facebook/create-react-app/issues/13393)). + +Your component tests will now need a bundler to run. If still using [create-react-app](https://create-react-app.dev/), you will either need to [eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) the configuration to bundle with webpack or leverage [vite](https://vite.dev/guide/) (quick setup with [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite)) to bundle your component tests. + +After selecting a bundler, you will need to change the `framework` option in your cypress config from `"create-react-app"` to `"react"`. If ejecting the `create-react-app` , you will need to change your cypress config to look something like this: + +```js +process.env.NODE_ENV = 'development' +const { defineConfig } = require('cypress') +const webpackConfig = require('./config/webpack.config.js') + +module.exports = defineConfig({ + component: { + devServer: { + framework: 'react', + bundler: 'webpack', + webpackConfig: webpackConfig('development'), + }, + }, +}) +``` + ## Migrating to Cypress 13.0 This guide details the changes and how to change your code to migrate to Cypress