fix: vue 3 types, beta suffix & component name (#17508)

* fix: update test-utils dependency & remove beta suffix

* test: add typescript in the tests

* chore: add setup example to cypress vue

* build: remove noEmit from tsconfig.json

* fix: make bigger types

* test: make functinoal and definecompoennt tested

* ci: make circle run typechek on vue

* test: typescript files

* test: remove usage of regenerator-runtime

* style: avoid using internal types of vtu + comment

circle.yml

@@ -1338,6 +1338,10 @@ jobs:
       - run:
           name: Build
           command: yarn workspace @cypress/vue build
+      - run:
+          name: Type Check
+          command: yarn typecheck
+          working_directory: npm/vue
       - run:
           name: Run component tests
           command: yarn test:ci:ct

npm/vue/.releaserc.js

@@ -7,6 +7,6 @@ module.exports = {
     // this line forces releasing 2.X releases on the latest channel
     { name: 'npm/vue/v2', range: '2.X.X' },
     // this one releases v3 on master as beta on the next channel
-    { name: 'master', channel: 'next', prerelease: 'beta' },
+    { name: 'master', channel: 'next' },
   ],
 }

npm/vue/babel.config.json

@@ -1,12 +1,32 @@
 {
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [
+            "last 1 Chrome version",
+            "last 1 Electron version",
+            "last 1 Firefox version"
+          ]
+        },
+        "modules": "cjs"
+      }
+    ],
+    "babel-preset-typescript-vue3",
+    "@babel/preset-typescript"
+  ],
   "plugins": [
-    "@babel/plugin-transform-modules-commonjs",
     [
       "babel-plugin-istanbul",
       {
         "extension": [
           ".js",
           ".vue"
+        ],
+        "exclude": [
+          "**/*.spec.{js,ts}",
+          "**/setup/*.vue"
         ]
       }
     ]

npm/vue/cypress.json

@@ -4,6 +4,6 @@
   "video": false,
   "responseTimeout": 2500,
   "projectId": "134ej7",
-  "testFiles": "**/*spec.js",
+  "testFiles": "**/*spec.{js,ts,tsx}",
   "experimentalFetchPolyfill": true
 }

npm/vue/cypress/component/basic/hello/Hello-spec.js → npm/vue/cypress/component/basic/hello/Hello-spec.ts

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 import Hello from './Hello.vue'
 import { mount } from '@cypress/vue'
 

npm/vue/cypress/component/basic/props/message-list-spec.js → npm/vue/cypress/component/basic/props/message-list-spec.ts

@@ -10,12 +10,12 @@ describe('Props', () => {
     it('has props', () => {
       const messages = ['one 🍎', 'two 🍌']
 
-      mount(MessageList, { propsData: { messages } })
+      mount(MessageList, { props: { messages } })
       getItems()
       .should('have.length', 2)
       .then((list) => {
-        expect(list[0].textContent.trim()).to.equal(messages[0])
-        expect(list[1].textContent.trim()).to.equal(messages[1])
+        expect(list[0].textContent).to.contain(messages[0])
+        expect(list[1].textContent).to.contain(messages[1])
       })
     })
   })

npm/vue/cypress/component/setup/HelloWorld-spec.ts

@@ -0,0 +1,27 @@
+import { h } from 'vue'
+import { mount } from '@cypress/vue'
+import HelloWorld from './HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('normal mount', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+  })
+
+  it('functional mount', () => {
+    mount(() => h(HelloWorld, { msg: 'Hello Cypress' }))
+  })
+
+  it('renders properly', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+    cy.get('h1').should('contain', 'Hello Cypress')
+  })
+
+  it('adds 1 when clicking the plus button', () => {
+    mount(HelloWorld, { props: { msg: 'Hello Cypress' } })
+
+    cy.get('button')
+    .should('contain', '0')
+    .click()
+    .should('contain', '1')
+  })
+})

npm/vue/cypress/component/setup/HelloWorld.vue

@@ -0,0 +1,12 @@
+<template>
+	<h1>{{ msg }}</h1>
+	<button type="button" @click="count++">count is: {{ count }}</button>
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref } from 'vue'
+defineProps<{
+	msg: String,
+}>()
+const count = ref(0)
+</script>

npm/vue/package.json

@@ -8,30 +8,33 @@
     "build-prod": "yarn build",
     "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
-    "test:ci:e2e": "node ../../scripts/cypress.js run --project ${PWD}",
+    "typecheck": "vue-tsc --noEmit",
     "test": "yarn cy:run",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*",
+    "test:ci:e2e": "node ../../scripts/cypress.js run --project ${PWD}",
     "test:ci:ct": "node ../../scripts/run-ct-examples.js --examplesList=./examples.env"
   },
   "dependencies": {
     "@cypress/mount-utils": "0.0.0-development",
-    "@vue/test-utils": "^2.0.0-rc.9"
+    "@vue/test-utils": "^2.0.0-rc.10"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
-    "@babel/plugin-transform-modules-commonjs": "7.10.4",
+    "@babel/plugin-transform-modules-commonjs": "7.9.6",
     "@babel/preset-env": "7.9.5",
+    "@babel/preset-typescript": "7.10.1",
     "@cypress/code-coverage": "3.8.1",
     "@cypress/webpack-dev-server": "0.0.0-development",
     "@intlify/vue-i18n-loader": "2.0.0-rc.1",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-service": "~4.4.0",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/compiler-sfc": "3.1.5",
     "axios": "0.19.2",
     "babel-loader": "8.1.0",
-    "babel-plugin-istanbul": "6.0.0",
+    "babel-plugin-istanbul": "^6.0.0",
+    "babel-preset-typescript-vue3": "^2.0.14",
     "css-loader": "3.4.2",
     "cypress": "0.0.0-development",
     "debug": "4.3.2",
@@ -44,12 +47,13 @@
     "rollup-plugin-istanbul": "2.0.1",
     "rollup-plugin-typescript2": "^0.29.0",
     "tailwindcss": "1.1.4",
-    "typescript": "3.9.6",
-    "vue": "3.0.11",
+    "typescript": "^4.2.3",
+    "vue": "3.1.5",
     "vue-i18n": "9.0.0-rc.6",
     "vue-loader": "16.1.2",
     "vue-router": "^4.0.0",
     "vue-style-loader": "4.1.2",
+    "vue-tsc": "0.2.2",
     "vuex": "^4.0.0",
     "webpack": "4.42.0"
   },
@@ -77,7 +81,6 @@
     "cypress",
     "vue"
   ],
-  "unpkg": "dist/cypress-vue.browser.js",
   "module": "dist/cypress-vue.esm-bundler.js",
   "peerDependenciesMeta": {
     "@cypress/webpack-dev-server": {

npm/vue/rollup.config.js

@@ -16,7 +16,6 @@ function createEntry (options) {
   const {
     format,
     input,
-    isBrowser,
   } = options
 
   const config = {
@@ -46,9 +45,6 @@ function createEntry (options) {
   if (input === 'src/index.ts') {
     if (format === 'es') {
       config.output.file = pkg.module
-      if (isBrowser) {
-        config.output.file = pkg.unpkg
-      }
     }
 
     if (format === 'cjs') {
@@ -62,14 +58,14 @@ function createEntry (options) {
 
   config.plugins.push(
     ts({
-      check: format === 'es' && isBrowser,
+      check: false,
       tsconfigOverride: {
         compilerOptions: {
           declaration: format === 'es',
-          target: 'es5', // not sure what this should be?
+          noEmit: false,
           module: format === 'cjs' ? 'es2015' : 'esnext',
         },
-        exclude: ['tests'],
+        exclude: ['cypress/component'],
       },
     }),
   )
@@ -78,8 +74,6 @@ function createEntry (options) {
 }
 
 export default [
-  createEntry({ format: 'es', input: 'src/index.ts', isBrowser: false }),
-  createEntry({ format: 'es', input: 'src/index.ts', isBrowser: true }),
-  createEntry({ format: 'iife', input: 'src/index.ts', isBrowser: true }),
-  createEntry({ format: 'cjs', input: 'src/index.ts', isBrowser: false }),
+  createEntry({ format: 'es', input: 'src/index.ts' }),
+  createEntry({ format: 'cjs', input: 'src/index.ts' }),
 ]