diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx index 364b3b5d68..6ec0e96f65 100644 --- a/docs/app/component-testing/get-started.mdx +++ b/docs/app/component-testing/get-started.mdx @@ -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 | diff --git a/docs/app/component-testing/vue/overview.mdx b/docs/app/component-testing/vue/overview.mdx index 6336703ec4..945b3074db 100644 --- a/docs/app/component-testing/vue/overview.mdx +++ b/docs/app/component-testing/vue/overview.mdx @@ -10,7 +10,6 @@ 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 ::: @@ -18,7 +17,6 @@ sidebar_label: Overview 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) @@ -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 - -PWA Caveat - -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. diff --git a/docs/app/references/migration-guide.mdx b/docs/app/references/migration-guide.mdx index 029c6ea6d1..794af2d846 100644 --- a/docs/app/references/migration-guide.mdx +++ b/docs/app/references/migration-guide.mdx @@ -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' @@ -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.