Skip to content

Commit

Permalink
chore: remove CRA docs from cypress 14 and add migration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
AtofStryker committed Nov 6, 2024
1 parent 3a4fa3b commit 4f85d48
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 77 deletions.
3 changes: 1 addition & 2 deletions docs/app/component-testing/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
117 changes: 44 additions & 73 deletions docs/app/component-testing/react/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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/)
Expand Down
3 changes: 1 addition & 2 deletions docs/app/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
6 changes: 6 additions & 0 deletions docs/app/references/migration-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,12 @@ it('renders', () => {
})
```

### 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.

## Migrating to Cypress 13.0

This guide details the changes and how to change your code to migrate to Cypress
Expand Down

0 comments on commit 4f85d48

Please sign in to comment.