Merge branch 'feat/swap-cy-root-id-for-data-attribute' of github.com:cypress-io/cypress into feat/swap-cy-root-id-for-data-attribute

* 'feat/swap-cy-root-id-for-data-attribute' of github.com:cypress-io/cypress:
  fixing nuxt issue w sys tests
  fix: Doc changes around vue2 (#21066)

Author: tgriesser

npm/vue/README.md

@@ -11,7 +11,7 @@
 **Jump to:** [Comparison](#comparison), [Blog posts](#blog-posts), Examples: [basic](#basic-examples), [advanced](#advanced-examples), [full](#full-examples), [external](#external-examples), [Code coverage](#code-coverage), [Development](#development)
 
 ### What is @cypress/vue?
-This package allows you to use the [Cypress](https://www.cypress.io/) test runner to mount and test your components within Cypress. It is built on top of the [Vue Test Utils](https://github.com/vuejs/vue-test-utils) package.
+This package allows you to use the [Cypress](https://www.cypress.io/) test runner to mount and test your Vue 3.x components within Cypress. It is built on top of the [Vue Test Utils](https://github.com/vuejs/vue-test-utils) package.
 
 ![Example component test](images/dynamic.gif)
 
@@ -20,10 +20,14 @@ It uses [Vue Test Utils](https://github.com/vuejs/vue-test-utils) under the hood
 
 - If you like using `@testing-library/vue`, you can use `@testing-library/cypress` for the same `findBy`, `queryBy` commands, see one of the examples in the list below
 
+### How is this different from @cypress/vue2?
+Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue2](cypress-vue2-npm-url) if you're still using vue@2, and this package if you're on vue@3.
+
 ## Installation
 
 - Requires Cypress v7.0.0 or later
 - Requires [Node](https://nodejs.org/en/) version 12 or above
+- Requires Vue 3.x. If you are using Vue 2.x, you want [@cypress/vue2](cypress-vue2-npm-url) instead.
 - Supports projects built with Vue CLI, Vite, and Webpack. If you would like us to support another build configuration, please [create an issue](https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm:%20@cypress/vue&template=3-feature.md).
 
 Now you are ready to install.
@@ -666,6 +670,7 @@ Let the world know your project is using Cypress.io to test with this cool badge
 
 [npm-icon]: https://nodei.co/npm/@cypress/vue.svg?downloads=true
 [npm-url]: https://npmjs.org/package/@cypress/vue
+[cypress-vue2-npm-url]: https://www.npmjs.com/package/@cypress/vue2
 [semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
 [semantic-url]: https://github.com/semantic-release/semantic-release
 [cypress-badge]: https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square

npm/vue2/README.md

@@ -1,17 +1,17 @@
-# @cypress/vue
+# @cypress/vue2
 
 [![NPM][npm-icon] ][npm-url]
 
 [![semantic-release][semantic-image] ][semantic-url]
 
-> Browser-based Component Testing for Vue.js with the Open-Source [Cypress.io](https://www.cypress.io/) Test Runner ✌️🌲
+> Browser-based Component Testing for Vue.js 2.x with the Open-Source [Cypress.io](https://www.cypress.io/) Test Runner ✌️🌲
 >
 **✨ New** We're growing the Cypress Community Discord. We have dedicated sections on Component Testing. 👉 [Join now](https://discord.com/invite/TmzTGUW) and let's chat!
 
 **Jump to:** [Comparison](#comparison), [Blog posts](#blog-posts), Examples: [basic](#basic-examples), [advanced](#advanced-examples), [full](#full-examples), [external](#external-examples), [Code coverage](#code-coverage), [Development](#development)
 
-### What is @cypress/vue?
-This package allows you to use the [Cypress](https://www.cypress.io/) test runner to mount and test your components within Cypress. It is built on top of the [Vue Test Utils](https://github.com/vuejs/vue-test-utils) package.
+### What is @cypress/vue2?
+This package allows you to use the [Cypress](https://www.cypress.io/) test runner to mount and test your Vue 2 components within Cypress. It is built on top of the [Vue Test Utils](https://github.com/vuejs/vue-test-utils) package.
 
 ![Example component test](images/dynamic.gif)
 
@@ -20,11 +20,15 @@ It uses [Vue Test Utils](https://github.com/vuejs/vue-test-utils) under the hood
 
 - If you like using `@testing-library/vue`, you can use `@testing-library/cypress` for the same `findBy`, `queryBy` commands, see one of the examples in the list below
 
+### How is this different from @cypress/vue?
+Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue](cypress-vue-npm-url) if you're up to date, and this package if you're still using vue@2.
+
 ## Installation
 
 - Requires Cypress v7.0.0 or later
 - Requires [Node](https://nodejs.org/en/) version 12 or above
-- Supports webpack-based projects, vite in alpha, if you would like us to support another, please [create an issue](https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm:%20@cypress/vue&template=3-feature.md) or, if an issue already exists subscribe to it.
+- Requires Vue 2.x. If you are using Vue 3.0.0 or later, you want [@cypress/vue](cypress-vue-npm-url) instead.
+- Supports webpack-based projects, vite in alpha, if you would like us to support another, please [create an issue](https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm:%20@cypress/vue2&template=3-feature.md) or, if an issue already exists subscribe to it.
 
 Now you are ready to install.
 
@@ -497,7 +501,7 @@ Calls to `window.alert` are automatically recorded, but do not show up. Instead
 ## Comparison
 
 <!-- prettier-ignore-start -->
-Feature | Vue Test Utils or @testing-library/vue | Cypress + `@cypress/vue`
+Feature | Vue Test Utils or @testing-library/vue | Cypress + `@cypress/vue2`
 --- | --- | ---
 Test runs in real browser | ❌ | ✅
 Uses full mount | ❌ | ✅
@@ -622,13 +626,13 @@ Larger tests that use full application and run on CI (see [circle.yml](circle.ym
 Run Cypress with environment variable
 
 ```
-DEBUG=@cypress/vue
+DEBUG=@cypress/vue2
 ``` 
 
 If some deeply nested objects are abbreviated and do not print fully, set the maximum logging depth
 
 ```
-DEBUG=@cypress/vue DEBUG_DEPTH=10
+DEBUG=@cypress/vue2 DEBUG_DEPTH=10
 ```
 
 ## Related info
@@ -680,7 +684,8 @@ Let the world know your project is using Cypress.io to test with this cool badge
 [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
 
 [npm-icon]: https://nodei.co/npm/@cypress/vue.svg?downloads=true
-[npm-url]: https://npmjs.org/package/@cypress/vue
+[npm-url]: https://npmjs.org/package/@cypress/vue2
+[cypress-vue-npm-url]: https://www.npmjs.com/package/@cypress/vue
 [semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
 [semantic-url]: https://github.com/semantic-release/semantic-release
 [cypress-badge]: https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square

npm/vue2/docs/manual-install.md

@@ -2,10 +2,10 @@
 
 > _Not Recommended_: All of this is done automatically with Vue CLI
 
-1. Install `cypress` and `@cypress/vue`
+1. Install `cypress` and `@cypress/vue2`
 
 ```sh
-npm install -D cypress @cypress/vue
+npm install -D cypress @cypress/vue2
 ```
 
 2. Include this plugin from your project's `cypress/plugin/index.js` file
@@ -22,7 +22,7 @@ module.exports = (on, config) => {
 3. Include the support file from your project's `cypress/support/index.js` file
 
 ```js
-import '@cypress/vue/dist/support'
+import '@cypress/vue2/dist/support'
 ```
 
 4. ⚠️ Turn the experimental component support on in your `cypress.json`. You can also specify where component spec files are located. For exampled to have them located in `src` folder use:

system-tests/projects/nuxtjs-vue2-configured/components/Tutorial.cy.js

@@ -1,4 +1,4 @@
-import { mount } from 'cypress/vue'
+import { mount } from 'cypress/vue2'
 import Tutorial from './Tutorial.vue'
 
 it('works', () => {

system-tests/projects/nuxtjs-vue2-configured/cypress.config.js

@@ -7,7 +7,19 @@ module.exports = defineConfig({
     async devServer(cypressDevServerConfig, devServerConfig) {
       const webpackConfig = await getWebpackConfig()
 
+      // Whenever we need to test Vue 2, make sure to add this to the
+      // Webpack configuration options
+      // Because of #UNIFY-1565 we clash with Cypress's own
+      // Vue 3 installation.
+      webpackConfig.resolve = {
+        ...webpackConfig.resolve,
+        alias: {
+          ...(webpackConfig.resolve?.alias ?? {}),
+          'vue': require.resolve('vue')
+        }
+      }
+
       return devServer(cypressDevServerConfig, { webpackConfig, ...devServerConfig })
     },
   },
-})
+})

system-tests/projects/nuxtjs-vue2-configured/nuxt.config.js

@@ -37,5 +37,5 @@ export default {
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
-  }
+  },
 }

system-tests/projects/nuxtjs-vue2-configured/package.json

@@ -9,17 +9,16 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "core-js": "^3.19.3",
-    "nuxt": "^2.15.8",
-    "vue": "^2.6.14",
+    "vue": "^2.6.14"
+  },
+  "devDependencies": {
+    "@cypress/webpack-dev-server": "file:../../../npm/webpack-dev-server",
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^4.46.0",
-    "webpack-dev-server": "4.7.4"
-  },
-  "devDependencies": {
-    "@cypress/vue2": "file:../../../npm/vue2",
-    "@cypress/mount-utils": "file:../../../npm/mount-utils",
-    "@cypress/webpack-dev-server": "file:../../../npm/webpack-dev-server"
+    "webpack-dev-server": "4.7.4",
+    "core-js": "^3.19.3",
+    "nuxt": "^2.15.8",
+    "cypress": "file:../../../cli"
   }
 }