diff --git a/docs/api/commands/mount.mdx b/docs/api/commands/mount.mdx index 3b480835df..4218b237e4 100644 --- a/docs/api/commands/mount.mdx +++ b/docs/api/commands/mount.mdx @@ -49,33 +49,7 @@ Cypress.Commands.add('mount', (component, options) => { ``` - - -```js -import { mount } from 'cypress/vue2' - -Cypress.Commands.add('mount', (component, options = {}) => { - // Setup options object - options.extensions = options.extensions || {} - options.extensions.plugins = options.extensions.plugins || [] - options.extensions.components = options.extensions.components || {} - - /* Add any global plugins */ - // options.extensions.plugins.push({ - // install(app) { - // app.use(MyPlugin); - // }, - // }); - - /* Add any global components */ - // options.extensions.components['Button'] = Button; - - return mount(component, options) -}) -``` - - - + ```js import { mount } from 'cypress/vue' diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx index 8d11ec62bc..98b17033d0 100644 --- a/docs/app/component-testing/get-started.mdx +++ b/docs/app/component-testing/get-started.mdx @@ -44,9 +44,9 @@ following development servers and frameworks: | [Next.js 10-14](/app/component-testing/react/overview#Nextjs) | React 16-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 | -| [Vue CLI 4-5](/app/component-testing/vue/overview#Vue-CLI) | Vue 2-3 | Webpack 4-5 | -| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 2-3 | Vite 4-5 | -| [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 2-3 | Webpack 4-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 13-18 | Webpack 5 | | [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) Alpha | Svelte 3-4 | Vite 4-5 | | [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 3-4 | Webpack 4-5 | diff --git a/docs/app/component-testing/vue/api.mdx b/docs/app/component-testing/vue/api.mdx index 1feab2ab06..4e55d941b6 100644 --- a/docs/app/component-testing/vue/api.mdx +++ b/docs/app/component-testing/vue/api.mdx @@ -9,11 +9,7 @@ sidebar_label: API ### mount ```js -// Vue 3 import { mount } from 'cypress/vue' - -// Vue 2 -import { mount } from 'cypress/vue2' ``` @@ -59,8 +55,7 @@ import { mount } from 'cypress/vue2' ### MountOptions ([Vue 3 MountingOptions](https://test-utils.vuejs.org/api/#mount) or -[Vue 2 MountingOptions](https://v1.test-utils.vuejs.org/api/options.html)) from -[Vue Test Utils](https://test-utils.vuejs.org/) +[Vue Test Utils](https://test-utils.vuejs.org/)) ### MountReturn diff --git a/docs/app/component-testing/vue/examples.mdx b/docs/app/component-testing/vue/examples.mdx index d55f28e9a7..cd07926d68 100644 --- a/docs/app/component-testing/vue/examples.mdx +++ b/docs/app/component-testing/vue/examples.mdx @@ -35,9 +35,6 @@ it('mounts', () => { You can pass props and events to a component by setting `props` in the options: - - - ```js cy.mount(Stepper, { props: { @@ -46,20 +43,6 @@ cy.mount(Stepper, { }) ``` - - - -```js -cy.mount(Stepper, { - propsData: { - initial: 100, - }, -}) -``` - - - - ### Testing Event Handlers Pass a Cypress [spy](/app/guides/stubs-spies-and-clocks#Spies) to an event @@ -496,8 +479,6 @@ Cypress.Commands.add('mount', (component, ...args) => { To use Vue Router, create a command to register the plugin and pass in a custom implementation of the router via the options param. -#### Vue 3 - @@ -598,95 +579,11 @@ promise's resolve before it continues with other commands: -#### Vue 2 - - - - -```js -import { mount } from 'cypress/vue' -import Vue from 'vue' -import VueRouter from 'vue-router' -import { router } from '../../src/router' - -Cypress.Commands.add('mount', (component, options = {}) => { - // Add the VueRouter plugin - Vue.use(VueRouter) - - // Use the router passed in via options, - // or the default one if not provided - options.router = options.router || router - - return mount(component, options) -}) -``` - - - - -```ts -import { mount } from 'cypress/vue' -import VueRouter from 'vue-router' - -type MountParams = Parameters -type OptionsParam = MountParams[1] & { router?: VueRouter } - -declare global { - namespace Cypress { - interface Chainable { - /** - * Helper mount function for Vue Components - * @param component Vue Component or JSX Element to mount - * @param options Options passed to Vue Test Utils - */ - mount(component: any, options?: OptionsParam): Chainable - } - } -} -``` - - - - -```js -import VueRouter from 'vue-router' -import Navigation from './Navigation.vue' -import { routes } from '../router' - -it('home link should be active when url is "/"', () => { - // No need to pass in custom router as default url is '/' - cy.mount(Navigation) - - cy.get('a').contains('Home').should('have.class', 'router-link-active') -}) - -it('login link should be active when url is "/login"', () => { - // Create a new router instance for each test - const router = new VueRouter({ - mode: 'history', - routes, - }) - - // Change location to `/login` - router.push('/login') - - // Pass the already initialized router for use - cy.mount(Navigation, { router }) - - cy.get('a').contains('Login').should('have.class', 'router-link-active') -}) -``` - - - - ### Vuex To use a component that uses [Vuex](https://vuex.vuejs.org/), create a `mount` command that configures a Vuex store for your component. -#### Vue 3 - @@ -778,102 +675,12 @@ it.only('User profile should display user name', () => { -#### Vue 2 - - - - -```js -import { mount } from 'cypress/vue' -import Vuex from 'vuex' -import { getStore } from '../../src/plugins/store' - -Cypress.Commands.add('mount', (component, options = {}) => { - // Setup options object - options.extensions = options.extensions || {} - options.extensions.plugins = options.extensions.plugins || [] - - // Use store passed in from options, or initialize a new one - options.store = options.store || getStore() - - // Add Vuex plugin - options.extensions.plugins.push(Vuex) - - return mount(component, options) -}) -``` - -:::info - -The `getStore` method is a factory method that initializes Vuex and creates a -new store. It is important that the store be initialized with each new test to -ensure changes to the store don't affect other tests. - -::: - - - - -```ts -import { mount } from 'cypress/vue' -import { Store } from 'vuex' - -type MountParams = Parameters -type OptionsParam = MountParams[1] - -declare global { - namespace Cypress { - interface Chainable { - /** - * Helper mount function for Vue Components - * @param component Vue Component or JSX Element to mount - * @param options Options passed to Vue Test Utils - */ - mount( - component: any, - options?: OptionsParam & { store?: Store } - ): Chainable - } - } -} -``` - - - - -```js -import { getStore } from '@/plugins/store' -import UserProfile from './UserProfile.vue' - -it.only('User profile should display user name', () => { - const user = { name: 'test person' } - - // getStore is a factory method that creates a new store - const store = getStore() - - // mutate the store with user - store.commit('setUser', user) - - cy.mount(UserProfile, { - store, - }) - - cy.get('div.name').should('have.text', user.name) -}) -``` - - - - ### Global Components If you have components that are registered globally in the main application file, set them up in your mount command so your component will render them properly: - - - ```js import { mount } from 'cypress/vue' import Button from '../../src/components/Button.vue' @@ -889,25 +696,3 @@ Cypress.Commands.add('mount', (component, options = {}) => { return mount(component, options) }) ``` - - - - -```js -import { mount } from 'cypress/vue2' -import Button from '../../src/components/Button.vue' - -Cypress.Commands.add('mount', (component, options = {}) => { - // Setup options object - options.extensions = options.extensions || {} - options.extensions.components = options.extensions.components || {} - - // Register global components - options.extensions.components['Button'] = Button - - return mount(component, options) -}) -``` - - - diff --git a/docs/app/component-testing/vue/overview.mdx b/docs/app/component-testing/vue/overview.mdx index 5d5cf56453..6336703ec4 100644 --- a/docs/app/component-testing/vue/overview.mdx +++ b/docs/app/component-testing/vue/overview.mdx @@ -16,7 +16,7 @@ sidebar_label: Overview ## Framework Support -Cypress Component Testing supports Vue 2+ with the following frameworks: +Cypress Component Testing supports Vue 3+ with the following frameworks: - [Vue CLI](#Vue-CLI) - [Vue with Vite](#Vue-with-Vite) @@ -99,7 +99,6 @@ 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 2 CLI 4 with JavaScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue2-cli4-js) ### Vue with Vite diff --git a/docs/app/references/migration-guide.mdx b/docs/app/references/migration-guide.mdx index 04cec846ea..bf56030ca4 100644 --- a/docs/app/references/migration-guide.mdx +++ b/docs/app/references/migration-guide.mdx @@ -73,6 +73,41 @@ For users with the existing `experimentalJustInTimeCompile` flag set, you can re ::: +### Vue 2 / Nuxt 2 Component Testing is no longer supported + +[Vue 2 reached end-of-life on December 31st, 2023](https://v2.vuejs.org/eol/). With Cypress 14, Cypress no longer ships the Vue 2 component testing harness with the Cypress binary. + +However, if you have not been able to migrate away from Vue 2 and still need the Cypress Vue 2 test harness, it can be installed independently via the [@cypress/vue2](https://www.npmjs.com/package/@cypress/vue2) package. + +```sh +npm install --save-dev @cypress/vue2 +``` + +Note that this test harness is deprecated and no longer actively supported by Cypress and is intended to serve as a temporary work around until you are able to migrate your project to Vue 3. The Cypress launchpad will also warn against Component testing mismatched dependencies, but this will not stop you from running your component tests. + +To update, inside your support file (ex: `./cypress/support/component.(js|ts)`) or wherever your mount function is imported, change + +```ts +import { mount } from `cypress/vue2` +``` + +to + +```ts +import { mount } from `@cypress/vue2` +``` + +Your code should now look like this: + +```ts +import MyVue2Component from './MyVue2Component' +import { mount } from `@cypress/vue2` + +it('renders', () => { + cy.mount(MyVue2Component) +}) +``` + ## Migrating to Cypress 13.0 This guide details the changes and how to change your code to migrate to Cypress diff --git a/docs/partials/_import-mount-functions.mdx b/docs/partials/_import-mount-functions.mdx index bbed6eddc4..bf52715144 100644 --- a/docs/partials/_import-mount-functions.mdx +++ b/docs/partials/_import-mount-functions.mdx @@ -39,11 +39,7 @@ in your actual browser. ::: ```js -// For Vue 3 import { mount } from 'cypress/vue' - -// For Vue 2 -import { mount } from 'cypress/vue2' ``` diff --git a/src/data/plugins.json b/src/data/plugins.json index 331529dcee..fa1827b960 100644 --- a/src/data/plugins.json +++ b/src/data/plugins.json @@ -780,13 +780,6 @@ "keywords": ["component", "vue", "vue.js"], "badge": "official" }, - { - "name": "Cypress Vue2", - "description": "Test Vue 2 components using Cypress Test Runner. This package is bundled with the cypress package and should not need to be installed separately. See the Vue Component Testing Docs for mounting Vue components.", - "link": "https://github.com/cypress-io/cypress/tree/develop/npm/vue2", - "keywords": ["component", "vue", "vue.js"], - "badge": "official" - }, { "name": "cypress-angular-unit-test", "description": "Test Angular component using Cypress Test Runner.",