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.

Sign up for GitHub

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 2 documentation from Component Testing as it will no longer be supported in Cypress 14 #5977

Merged
merged 2 commits into from
Nov 5, 2024
Merged

chore: remove vue 2 documentation from Component Testing as it will no longer be supported in Cypress 14 #5977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
809e98d
chore: remove vue 2 docs from component testing as it is no longer su…
AtofStryker Oct 30, 2024
ae2e0cc
add vue2 migration guide for temporary support if needed
AtofStryker Nov 4, 2024
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
28 changes: 1 addition & 27 deletions docs/api/commands/mount.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,33 +49,7 @@ Cypress.Commands.add('mount', (component, options) => {
```

</TabItem>
<TabItem value='Vue 2'>

```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)
})
```

</TabItem>
<TabItem value='Vue 3'>
<TabItem value='Vue'>

```js
import { mount } from 'cypress/vue'
Expand Down
6 changes: 3 additions & 3 deletions docs/app/component-testing/get-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) <Badge type="info">Alpha</Badge> | Svelte 3-4 | Vite 4-5 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 3-4 | Webpack 4-5 |
Expand Down
7 changes: 1 addition & 6 deletions docs/app/component-testing/vue/api.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,7 @@ sidebar_label: API
### mount

```js
// Vue 3
import { mount } from 'cypress/vue'

// Vue 2
import { mount } from 'cypress/vue2'
```

<table class="api-table table-list">
Expand Down Expand Up @@ -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

Expand Down
215 changes: 0 additions & 215 deletions docs/app/component-testing/vue/examples.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,6 @@ it('mounts', () => {

You can pass props and events to a component by setting `props` in the options:

<Tabs>
<TabItem value="Vue 3">

```js
cy.mount(Stepper, {
props: {
Expand All @@ -46,20 +43,6 @@ cy.mount(Stepper, {
})
```

</TabItem>
<TabItem value="Vue 2">

```js
cy.mount(Stepper, {
propsData: {
initial: 100,
},
})
```

</TabItem>
</Tabs>

### Testing Event Handlers

Pass a Cypress [spy](/app/guides/stubs-spies-and-clocks#Spies) to an event
Expand Down Expand Up @@ -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

<Tabs>
<TabItem value="cypress/support/component.js">

Expand Down Expand Up @@ -598,95 +579,11 @@ promise's resolve before it continues with other commands:
</TabItem>
</Tabs>

#### Vue 2

<Tabs>
<TabItem value="cypress/support/component.js">

```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)
})
```

</TabItem>
<TabItem value="Typings">

```ts
import { mount } from 'cypress/vue'
import VueRouter from 'vue-router'

type MountParams = Parameters<typeof mount>
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<any>
}
}
}
```

</TabItem>
<TabItem value="Spec Usage">

```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')
})
```

</TabItem>
</Tabs>

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

<Tabs>
<TabItem value="cypress/support/component.js">

Expand Down Expand Up @@ -778,102 +675,12 @@ it.only('User profile should display user name', () => {
</TabItem>
</Tabs>

#### Vue 2

<Tabs>
<TabItem value="cypress/support/component.js">

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

:::

</TabItem>
<TabItem value="Typings">

```ts
import { mount } from 'cypress/vue'
import { Store } from 'vuex'

type MountParams = Parameters<typeof mount>
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<any>
}
}
}
```

</TabItem>
<TabItem value="Spec Usage">

```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)
})
```

</TabItem>
</Tabs>

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

<Tabs>
<TabItem value="Vue 3">

```js
import { mount } from 'cypress/vue'
import Button from '../../src/components/Button.vue'
Expand All @@ -889,25 +696,3 @@ Cypress.Commands.add('mount', (component, options = {}) => {
return mount(component, options)
})
```

</TabItem>
<TabItem value="Vue 2">

```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)
})
```

</TabItem>
</Tabs>
3 changes: 1 addition & 2 deletions docs/app/component-testing/vue/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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

Expand Down
35 changes: 35 additions & 0 deletions docs/app/references/migration-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading