Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove @vue/cli-service from Cypress 14 docs #5989

Merged
merged 1 commit into from
Nov 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion docs/app/component-testing/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ following development servers and frameworks:
| [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 |
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 17-18 | Webpack 5 |
Expand Down
39 changes: 0 additions & 39 deletions docs/app/component-testing/vue/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,13 @@ sidebar_label: Overview

- How to set up component tests in Vue
- How to configure Cypress for Vue projects
- How to use Cypress with Vue CLI, Vite, and custom Webpack config

:::

## Framework Support

Cypress Component Testing supports Vue 3+ with the following frameworks:

- [Vue CLI](#Vue-CLI)
- [Vue with Vite](#Vue-with-Vite)
- [Vue with Webpack](#Vue-with-Webpack)

Expand Down Expand Up @@ -59,47 +57,10 @@ For usage and examples, visit the
## Framework Configuration

Cypress Component Testing works out of the box with
[Vue CLI](https://cli.vuejs.org/),
[Vite](https://vitejs.dev/), 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.

### Vue CLI

Cypress Component Testing works with Vue CLI.

#### Vue CLI Configuration

:::cypress-config-example

```ts
{
component: {
devServer: {
framework: 'vue-cli',
bundler: 'webpack',
},
},
}
```

:::

:::caution

<strong>PWA Caveat</strong>

If you use the Vue CLI's PWA feature, there is a known caveat regarding
configuration. See
[here](https://github.com/cypress-io/cypress/issues/15968#issuecomment-819170918)
for more information.

:::

#### Sample Vue CLI Apps

- [Vue 3 CLI 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-cli5-ts)

### Vue with Vite

Cypress Component Testing works with Vue apps that use Vite 2+ as the bundler.
Expand Down
38 changes: 37 additions & 1 deletion docs/app/references/migration-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ import { mount } from `cypress/angular`

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:
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'
Expand All @@ -172,6 +172,42 @@ module.exports = defineConfig({
})
```

### `@vue/cli-service` for Component Testing is no longer supported

`@vue/cli-service` is in [maintanence mode](https://cli.vuejs.org/guide/cli-service.html) and is no longer maintained by the Vue core team.

Your component tests will now need a bundler to run. If still using [Vue CLI](https://cli.vuejs.org/), you will either need to migrate to webpack ([see example](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-webpack-ts)) or leverage [vite](https://vite.dev/guide/). The Vue team recommends migrating to using `create-vue` to scaffold a [Vite](https://vite.dev/)-based project.

After selecting a bundler, you will need to change the `framework` option in your Cypress config from `"vue-cli"` to `"vue"`. Your Cypress configuration should go from looking like:

```ts
const { defineConfig } = require('cypress')

module.exports = defineConfig({
component: {
devServer: {
framework: 'vue-cli',
bundler: 'webpack',
},
},
})
```

to looking something like this:

```ts
const { defineConfig } = require('cypress')

module.exports = defineConfig({
component: {
devServer: {
framework: 'vue',
bundler: 'vite', // or 'webpack'
},
},
})
```

### Svelte 3 for Component Testing is no longer supported

With Cypress 14, Cypress no longer ships the Svelte 3 component testing harness with the Cypress binary.
Expand Down