From 951cba8142c0869c1e558241a72f07a5f047f55c Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Thu, 20 Oct 2022 22:33:25 +0200
Subject: [PATCH] chore(ct): type check (#18208)

---
 tests/components/ct-react-vite/package.json   |  3 ++-
 .../ct-react-vite/src/components/Button.tsx   |  2 +-
 tests/components/ct-react-vite/tsconfig.json  |  2 +-
 tests/components/ct-react/package.json        |  3 ++-
 .../ct-react/src/components/Button.tsx        |  2 +-
 tests/components/ct-react/src/tests.spec.tsx  |  8 +++----
 tests/components/ct-solid/package.json        |  3 ++-
 .../ct-solid/src/components/Button.tsx        |  2 +-
 tests/components/ct-solid/src/tests.spec.tsx  |  2 +-
 tests/components/ct-solid/tsconfig.json       |  3 ++-
 tests/components/ct-svelte-vite/package.json  |  2 +-
 .../src/components/Counter.svelte             |  2 +-
 tests/components/ct-svelte-vite/src/main.ts   |  2 +-
 .../components/ct-svelte-vite/src/svelte.d.ts |  4 ++++
 .../ct-svelte-vite/src/tests.spec.ts          |  6 ++---
 tests/components/ct-svelte-vite/tsconfig.json |  6 +++--
 tests/components/ct-svelte/package.json       |  7 +++---
 .../ct-svelte/src/components/Counter.svelte   |  2 +-
 tests/components/ct-svelte/src/tests.spec.ts  |  6 ++---
 tests/components/ct-svelte/tsconfig.json      | 11 +++++++++
 tests/components/ct-vue-cli/.gitignore        |  1 +
 tests/components/ct-vue-cli/jsconfig.json     | 20 ----------------
 tests/components/ct-vue-cli/package.json      |  4 +++-
 .../ct-vue-cli/src/components/Button.vue      |  2 +-
 .../ct-vue-cli/src/components/Counter.vue     |  4 ++--
 .../ct-vue-cli/src/notation-jsx.spec.tsx      | 13 +++++++----
 .../ct-vue-cli/src/notation-vue.spec.ts       |  7 +++---
 tests/components/ct-vue-cli/tsconfig.app.json | 12 ++++++++++
 .../ct-vue-cli/tsconfig.config.json           |  8 +++++++
 tests/components/ct-vue-cli/tsconfig.json     | 14 +++++++++++
 .../components/ct-vue-cli/tsconfig.test.json  | 11 +++++++++
 tests/components/ct-vue-cli/vue.d.ts          |  4 ++++
 tests/components/ct-vue-vite/.gitignore       |  1 +
 tests/components/ct-vue-vite/env.d.ts         |  1 +
 tests/components/ct-vue-vite/package.json     |  7 ++++--
 .../ct-vue-vite/src/components/Button.vue     |  9 ++------
 .../ct-vue-vite/src/components/Counter.vue    | 12 ++++------
 .../ct-vue-vite/src/components/NamedSlots.vue |  1 -
 .../ct-vue-vite/src/notation-jsx.spec.tsx     | 20 ++++++++--------
 .../ct-vue-vite/src/notation-vue.spec.js      |  4 ++--
 .../ct-vue-vite/src/notation-vue.spec.ts      | 10 ++++----
 .../components/ct-vue-vite/tsconfig.app.json  | 12 ++++++++++
 .../ct-vue-vite/tsconfig.config.json          |  8 +++++++
 tests/components/ct-vue-vite/tsconfig.json    | 14 +++++++++++
 .../components/ct-vue-vite/tsconfig.test.json | 10 ++++++++
 tests/components/ct-vue-vite/vue.d.ts         |  1 -
 tests/components/ct-vue2-cli/.gitignore       |  2 +-
 tests/components/ct-vue2-cli/package.json     |  4 +++-
 .../ct-vue2-cli/playwright/index.ts           |  1 -
 .../ct-vue2-cli/src/components/Button.vue     |  2 +-
 .../ct-vue2-cli/src/components/Counter.vue    |  2 +-
 .../ct-vue2-cli/src/components/HelloWorld.vue |  2 +-
 .../ct-vue2-cli/src/notation-jsx.spec.tsx     | 23 +++++++++++--------
 .../ct-vue2-cli/src/notation-vue.spec.ts      | 10 ++++----
 .../components/ct-vue2-cli/src/shims-vue.d.ts |  4 ++++
 tests/components/ct-vue2-cli/src/vue.d.ts     |  1 -
 .../components/ct-vue2-cli/tsconfig.app.json  | 12 ++++++++++
 .../ct-vue2-cli/tsconfig.config.json          |  8 +++++++
 tests/components/ct-vue2-cli/tsconfig.json    | 14 +++++++++++
 .../components/ct-vue2-cli/tsconfig.test.json | 10 ++++++++
 tests/components/test-all.spec.js             |  6 ++++-
 61 files changed, 270 insertions(+), 119 deletions(-)
 create mode 100644 tests/components/ct-svelte-vite/src/svelte.d.ts
 create mode 100644 tests/components/ct-svelte/tsconfig.json
 delete mode 100644 tests/components/ct-vue-cli/jsconfig.json
 create mode 100644 tests/components/ct-vue-cli/tsconfig.app.json
 create mode 100644 tests/components/ct-vue-cli/tsconfig.config.json
 create mode 100644 tests/components/ct-vue-cli/tsconfig.json
 create mode 100644 tests/components/ct-vue-cli/tsconfig.test.json
 create mode 100644 tests/components/ct-vue-cli/vue.d.ts
 create mode 100644 tests/components/ct-vue-vite/env.d.ts
 create mode 100644 tests/components/ct-vue-vite/tsconfig.app.json
 create mode 100644 tests/components/ct-vue-vite/tsconfig.config.json
 create mode 100644 tests/components/ct-vue-vite/tsconfig.json
 create mode 100644 tests/components/ct-vue-vite/tsconfig.test.json
 delete mode 100644 tests/components/ct-vue-vite/vue.d.ts
 create mode 100644 tests/components/ct-vue2-cli/src/shims-vue.d.ts
 delete mode 100644 tests/components/ct-vue2-cli/src/vue.d.ts
 create mode 100644 tests/components/ct-vue2-cli/tsconfig.app.json
 create mode 100644 tests/components/ct-vue2-cli/tsconfig.config.json
 create mode 100644 tests/components/ct-vue2-cli/tsconfig.json
 create mode 100644 tests/components/ct-vue2-cli/tsconfig.test.json

diff --git a/tests/components/ct-react-vite/package.json b/tests/components/ct-react-vite/package.json
index a2d9e02547..4126048dbe 100644
--- a/tests/components/ct-react-vite/package.json
+++ b/tests/components/ct-react-vite/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "react": "^17.0.2",
diff --git a/tests/components/ct-react-vite/src/components/Button.tsx b/tests/components/ct-react-vite/src/components/Button.tsx
index 2b44784ac4..8785b878d0 100644
--- a/tests/components/ct-react-vite/src/components/Button.tsx
+++ b/tests/components/ct-react-vite/src/components/Button.tsx
@@ -4,7 +4,7 @@ type ButtonProps = {
   title: string;
   onClick?(props: string): void;
   className?: string;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
 
 export default function Button({ onClick, title, ...attributes }: ButtonProps) {
   return <button {...attributes} onClick={() => onClick?.('hello')}>
diff --git a/tests/components/ct-react-vite/tsconfig.json b/tests/components/ct-react-vite/tsconfig.json
index c8bdc64082..3d0a51a86e 100644
--- a/tests/components/ct-react-vite/tsconfig.json
+++ b/tests/components/ct-react-vite/tsconfig.json
@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
diff --git a/tests/components/ct-react/package.json b/tests/components/ct-react/package.json
index 3d6fb76e13..d7012b6af0 100644
--- a/tests/components/ct-react/package.json
+++ b/tests/components/ct-react/package.json
@@ -18,7 +18,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "typecheck": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": [
diff --git a/tests/components/ct-react/src/components/Button.tsx b/tests/components/ct-react/src/components/Button.tsx
index 2b44784ac4..8785b878d0 100644
--- a/tests/components/ct-react/src/components/Button.tsx
+++ b/tests/components/ct-react/src/components/Button.tsx
@@ -4,7 +4,7 @@ type ButtonProps = {
   title: string;
   onClick?(props: string): void;
   className?: string;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
 
 export default function Button({ onClick, title, ...attributes }: ButtonProps) {
   return <button {...attributes} onClick={() => onClick?.('hello')}>
diff --git a/tests/components/ct-react/src/tests.spec.tsx b/tests/components/ct-react/src/tests.spec.tsx
index e53243871a..3f2eede57b 100644
--- a/tests/components/ct-react/src/tests.spec.tsx
+++ b/tests/components/ct-react/src/tests.spec.tsx
@@ -1,5 +1,5 @@
-import { test, expect } from '@playwright/experimental-ct-react'
-import { serverFixtures } from '../../../../tests/config/serverFixtures';
+import { test, expect } from '@playwright/experimental-ct-react';
+const { serverFixtures } = require('../../../../tests/config/serverFixtures');
 import Fetch from './components/Fetch';
 import DelayedData from './components/DelayedData';
 import Button from './components/Button';
@@ -143,7 +143,7 @@ test('get textContent of the empty fragment', async ({ mount }) => {
 
 const testWithServer = test.extend(serverFixtures);
 testWithServer('components routing should go through context', async ({ mount, context, server }) => {
-  server.setRoute('/hello', (req, res) => {
+  server.setRoute('/hello', (req: any, res: any) => {
     res.write('served via server');
     res.end();
   });
@@ -158,7 +158,7 @@ testWithServer('components routing should go through context', async ({ mount, c
   });
 
   const whoServedTheRequest = Promise.race([
-    server.waitForRequest('/hello').then((req) => `served via server: ${req.method} ${req.url}`),
+    server.waitForRequest('/hello').then((req: any) => `served via server: ${req.method} ${req.url}`),
     routedViaContext.then(req => `served via context: ${req}`),
   ]);
 
diff --git a/tests/components/ct-solid/package.json b/tests/components/ct-solid/package.json
index 8176ee5f4b..cdcfbc7808 100644
--- a/tests/components/ct-solid/package.json
+++ b/tests/components/ct-solid/package.json
@@ -6,7 +6,8 @@
     "start": "vite",
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "license": "MIT",
   "devDependencies": {
diff --git a/tests/components/ct-solid/src/components/Button.tsx b/tests/components/ct-solid/src/components/Button.tsx
index 07ed57e61d..6569070a96 100644
--- a/tests/components/ct-solid/src/components/Button.tsx
+++ b/tests/components/ct-solid/src/components/Button.tsx
@@ -4,7 +4,7 @@ type ButtonProps = {
   title: string;
   onClick?(props: string): void;
   className?: string;
-} & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+} & Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
 
 export default function Button({ onClick, title, ...attributes }: ButtonProps) {
   return <button {...attributes} onClick={() => onClick?.('hello')}>
diff --git a/tests/components/ct-solid/src/tests.spec.tsx b/tests/components/ct-solid/src/tests.spec.tsx
index a939580e31..d2b4793450 100644
--- a/tests/components/ct-solid/src/tests.spec.tsx
+++ b/tests/components/ct-solid/src/tests.spec.tsx
@@ -71,7 +71,7 @@ test('execute callback when the button is clicked', async ({ mount }) => {
   const component = await mount(
     <Button
       title="Submit"
-      onClick={(data) => {
+      onClick={data => {
         messages.push(data);
       }}
     />
diff --git a/tests/components/ct-solid/tsconfig.json b/tests/components/ct-solid/tsconfig.json
index 249b2732a7..9bb6e17684 100644
--- a/tests/components/ct-solid/tsconfig.json
+++ b/tests/components/ct-solid/tsconfig.json
@@ -10,6 +10,7 @@
     "jsxImportSource": "solid-js",
     "types": ["vite/client"],
     "noEmit": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "skipLibCheck": true
   }
 }
diff --git a/tests/components/ct-svelte-vite/package.json b/tests/components/ct-svelte-vite/package.json
index 1c3b967d94..457a0fa989 100644
--- a/tests/components/ct-svelte-vite/package.json
+++ b/tests/components/ct-svelte-vite/package.json
@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
diff --git a/tests/components/ct-svelte-vite/src/components/Counter.svelte b/tests/components/ct-svelte-vite/src/components/Counter.svelte
index 2b8a064b46..baf642fdcf 100644
--- a/tests/components/ct-svelte-vite/src/components/Counter.svelte
+++ b/tests/components/ct-svelte-vite/src/components/Counter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { update, remountCount } from '../store'
 import { createEventDispatcher } from "svelte";
-export let count;
+export let count: number;
 const dispatch = createEventDispatcher();
 update();
 </script>
diff --git a/tests/components/ct-svelte-vite/src/main.ts b/tests/components/ct-svelte-vite/src/main.ts
index ca8aaba9be..4e7ad898e9 100644
--- a/tests/components/ct-svelte-vite/src/main.ts
+++ b/tests/components/ct-svelte-vite/src/main.ts
@@ -2,7 +2,7 @@ import App from './App.svelte';
 import './assets/index.css';
 
 const app = new App({
-  target: document.getElementById('app')
+  target: document.getElementById('app')!
 });
 
 export default app;
diff --git a/tests/components/ct-svelte-vite/src/svelte.d.ts b/tests/components/ct-svelte-vite/src/svelte.d.ts
new file mode 100644
index 0000000000..0fdb59facc
--- /dev/null
+++ b/tests/components/ct-svelte-vite/src/svelte.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svelte' {
+  const value: any; // Add better type definitions here if desired.
+  export default value;
+}
diff --git a/tests/components/ct-svelte-vite/src/tests.spec.ts b/tests/components/ct-svelte-vite/src/tests.spec.ts
index e7cc19f220..6ebcc4ee03 100644
--- a/tests/components/ct-svelte-vite/src/tests.spec.ts
+++ b/tests/components/ct-svelte-vite/src/tests.spec.ts
@@ -65,13 +65,13 @@ test('renderer updates event listeners without remounting', async ({ mount }) =>
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
+  const messages: string[] = []
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     },
     on: {
-      submit: data => messages.push(data)
+      submit: (data: string) => messages.push(data)
     }
   })
   await component.click()
@@ -101,7 +101,7 @@ test('render a component with a named slot', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<HooksConfig>(Button, {
     props: {
diff --git a/tests/components/ct-svelte-vite/tsconfig.json b/tests/components/ct-svelte-vite/tsconfig.json
index 4d6c04cf0a..898993ae64 100644
--- a/tests/components/ct-svelte-vite/tsconfig.json
+++ b/tests/components/ct-svelte-vite/tsconfig.json
@@ -13,8 +13,10 @@
      * of JS in `.svelte` files.
      */
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "skipLibCheck": true,
+    "strict": true
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/**/*.spec.*/*"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tests/components/ct-svelte/package.json b/tests/components/ct-svelte/package.json
index ef1144a34e..5a491ded3b 100644
--- a/tests/components/ct-svelte/package.json
+++ b/tests/components/ct-svelte/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "start": "sirv public --no-clear"
+    "start": "sirv public --no-clear",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -15,13 +16,13 @@
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0"
+    "sirv-cli": "^2.0.0"
   },
   "@standaloneDevDependencies": {
     "@playwright/experimental-ct-svelte": "^1.22.2",
     "@playwright/test": "^1.22.2"
   },
   "dependencies": {
-    "sirv-cli": "^2.0.0"
+    "svelte": "^3.0.0"
   }
 }
diff --git a/tests/components/ct-svelte/src/components/Counter.svelte b/tests/components/ct-svelte/src/components/Counter.svelte
index 2b8a064b46..e850f3a35a 100644
--- a/tests/components/ct-svelte/src/components/Counter.svelte
+++ b/tests/components/ct-svelte/src/components/Counter.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import { update, remountCount } from '../store'
 import { createEventDispatcher } from "svelte";
 export let count;
diff --git a/tests/components/ct-svelte/src/tests.spec.ts b/tests/components/ct-svelte/src/tests.spec.ts
index 655beba19b..576b5c2acf 100644
--- a/tests/components/ct-svelte/src/tests.spec.ts
+++ b/tests/components/ct-svelte/src/tests.spec.ts
@@ -66,13 +66,13 @@ test('renderer updates event listeners without remounting', async ({ mount }) =>
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
+  const messages: string[] = []
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     },
     on: {
-      submit: data => messages.push(data)
+      submit: (data: string) => messages.push(data)
     }
   })
   await component.click()
@@ -107,7 +107,7 @@ test('render a component without options', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<HooksConfig>(Button, {
     props: {
diff --git a/tests/components/ct-svelte/tsconfig.json b/tests/components/ct-svelte/tsconfig.json
new file mode 100644
index 0000000000..c3b167bbe8
--- /dev/null
+++ b/tests/components/ct-svelte/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node"
+  }
+}
diff --git a/tests/components/ct-vue-cli/.gitignore b/tests/components/ct-vue-cli/.gitignore
index 11f5d71423..7e2a946d8e 100644
--- a/tests/components/ct-vue-cli/.gitignore
+++ b/tests/components/ct-vue-cli/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+*.tsbuildinfo
 
 # local env files
 .env.local
diff --git a/tests/components/ct-vue-cli/jsconfig.json b/tests/components/ct-vue-cli/jsconfig.json
deleted file mode 100644
index 2f1dc80434..0000000000
--- a/tests/components/ct-vue-cli/jsconfig.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "jsx": "react-jsx",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}
diff --git a/tests/components/ct-vue-cli/package.json b/tests/components/ct-vue-cli/package.json
index e260488047..e2990f0f21 100644
--- a/tests/components/ct-vue-cli/package.json
+++ b/tests/components/ct-vue-cli/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "typecheck": "tsc --noEmit --project tsconfig.test.json"
   },
   "dependencies": {
     "core-js": "^3.8.3",
@@ -17,6 +18,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "@vue/tsconfig": "^0.1.3",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3"
   },
diff --git a/tests/components/ct-vue-cli/src/components/Button.vue b/tests/components/ct-vue-cli/src/components/Button.vue
index 334a3d0364..f597f2803d 100644
--- a/tests/components/ct-vue-cli/src/components/Button.vue
+++ b/tests/components/ct-vue-cli/src/components/Button.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 defineProps({
   title: {
     type: String,
diff --git a/tests/components/ct-vue-cli/src/components/Counter.vue b/tests/components/ct-vue-cli/src/components/Counter.vue
index 6e211660b7..29ed704343 100644
--- a/tests/components/ct-vue-cli/src/components/Counter.vue
+++ b/tests/components/ct-vue-cli/src/components/Counter.vue
@@ -5,11 +5,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 let remountCount = 0
 </script>
 
-<script setup>
+<script lang="ts" setup>
 defineProps({
   count: {
     type: Number,
diff --git a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
index 43eb2c69b7..b21002e3cc 100644
--- a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
+++ b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
@@ -28,10 +28,13 @@ test('renderer and keep the component instance intact', async ({ mount }) => {
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
-  const component = await mount(<Button title='Submit' v-on:submit={data => {
-    messages.push(data)
-  }}></Button>)
+  const messages: string[] = []
+  const component = await mount(<Button 
+    title="Submit"
+    v-on:submit={(data: string) => {
+      messages.push(data)
+    }}
+  />)
   await component.click()
   expect(messages).toEqual(['hello'])
 })
@@ -79,7 +82,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
diff --git a/tests/components/ct-vue-cli/src/notation-vue.spec.ts b/tests/components/ct-vue-cli/src/notation-vue.spec.ts
index 10d4fd21ae..2ba1be9ba3 100644
--- a/tests/components/ct-vue-cli/src/notation-vue.spec.ts
+++ b/tests/components/ct-vue-cli/src/notation-vue.spec.ts
@@ -1,5 +1,4 @@
 import { test, expect } from '@playwright/experimental-ct-vue'
-
 import Button from './components/Button.vue'
 import Counter from './components/Counter.vue'
 import DefaultSlot from './components/DefaultSlot.vue'
@@ -38,13 +37,13 @@ test('renderer and keep the component instance intact', async ({ mount }) => {
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
+  const messages: string[] = []
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     },
     on: {
-      submit: data => messages.push(data)
+      submit: (data: string) => messages.push(data)
     }
   })
   await component.click()
@@ -89,7 +88,7 @@ test('render a component without options', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<HooksConfig>(Button, {
     props: {
diff --git a/tests/components/ct-vue-cli/tsconfig.app.json b/tests/components/ct-vue-cli/tsconfig.app.json
new file mode 100644
index 0000000000..326d9a3552
--- /dev/null
+++ b/tests/components/ct-vue-cli/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/*.spec.*/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+    "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/tests/components/ct-vue-cli/tsconfig.config.json b/tests/components/ct-vue-cli/tsconfig.config.json
new file mode 100644
index 0000000000..d554caf51b
--- /dev/null
+++ b/tests/components/ct-vue-cli/tsconfig.config.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}
diff --git a/tests/components/ct-vue-cli/tsconfig.json b/tests/components/ct-vue-cli/tsconfig.json
new file mode 100644
index 0000000000..536e033e83
--- /dev/null
+++ b/tests/components/ct-vue-cli/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.test.json"
+    }
+  ]
+}
diff --git a/tests/components/ct-vue-cli/tsconfig.test.json b/tests/components/ct-vue-cli/tsconfig.test.json
new file mode 100644
index 0000000000..34e0d41121
--- /dev/null
+++ b/tests/components/ct-vue-cli/tsconfig.test.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["playwright"],
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "jsx": "react-jsx",
+    "types": ["node"]
+  }
+}
diff --git a/tests/components/ct-vue-cli/vue.d.ts b/tests/components/ct-vue-cli/vue.d.ts
new file mode 100644
index 0000000000..d4d073050e
--- /dev/null
+++ b/tests/components/ct-vue-cli/vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  const value: any;
+  export default value;
+}
diff --git a/tests/components/ct-vue-vite/.gitignore b/tests/components/ct-vue-vite/.gitignore
index 7cc64f4ee4..0f4b1c5632 100644
--- a/tests/components/ct-vue-vite/.gitignore
+++ b/tests/components/ct-vue-vite/.gitignore
@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+*.tsbuildinfo
 
 node_modules
 .DS_Store
diff --git a/tests/components/ct-vue-vite/env.d.ts b/tests/components/ct-vue-vite/env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/tests/components/ct-vue-vite/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tests/components/ct-vue-vite/package.json b/tests/components/ct-vue-vite/package.json
index c2ceb077f9..55633afba1 100644
--- a/tests/components/ct-vue-vite/package.json
+++ b/tests/components/ct-vue-vite/package.json
@@ -4,14 +4,17 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 5050"
+    "preview": "vite preview --port 5050",
+    "typecheck": "vue-tsc --noEmit --project tsconfig.test.json"
   },
   "dependencies": {
     "vue": "^3.2.31"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.2",
-    "vite": "^2.8.4"
+    "@vue/tsconfig": "^0.1.3",
+    "vite": "^2.8.4",
+    "vue-tsc": "^1.0.0"
   },
   "@standaloneDevDependencies": {
     "@playwright/experimental-ct-vue": "^1.22.2",
diff --git a/tests/components/ct-vue-vite/src/components/Button.vue b/tests/components/ct-vue-vite/src/components/Button.vue
index 334a3d0364..ecd53ed284 100644
--- a/tests/components/ct-vue-vite/src/components/Button.vue
+++ b/tests/components/ct-vue-vite/src/components/Button.vue
@@ -1,10 +1,5 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    required: true
-  }
-})
+<script lang="ts" setup>
+  defineProps<{ title: string }>()
 </script>
 
 <template>
diff --git a/tests/components/ct-vue-vite/src/components/Counter.vue b/tests/components/ct-vue-vite/src/components/Counter.vue
index a2c6f4c82e..9c9fe4009f 100644
--- a/tests/components/ct-vue-vite/src/components/Counter.vue
+++ b/tests/components/ct-vue-vite/src/components/Counter.vue
@@ -7,17 +7,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 let remountCount = 0
 </script>
 
-<script setup>
-defineProps({
-  count: {
-    type: Number,
-    required: false
-  }
-})
+<script lang="ts" setup>
+defineProps<{ count?: number }>()
+
 remountCount++
 </script>
 
diff --git a/tests/components/ct-vue-vite/src/components/NamedSlots.vue b/tests/components/ct-vue-vite/src/components/NamedSlots.vue
index b7e95f4487..582608df32 100644
--- a/tests/components/ct-vue-vite/src/components/NamedSlots.vue
+++ b/tests/components/ct-vue-vite/src/components/NamedSlots.vue
@@ -3,7 +3,6 @@
     <header>
       <slot name="header" />
     </header>
-
     <main>
       <slot name="main" />
     </main>
diff --git a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
index 86501606bb..0610f52536 100644
--- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
+++ b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
@@ -33,8 +33,8 @@ test('renderer updates props without remounting', async ({ mount }) => {
 test('renderer updates event listeners without remounting', async ({ mount }) => {
   const component = await mount(<Counter />)
 
-  const messages = []
-  await component.update(<Counter v-on:submit={count => { 
+  const messages: string[] = []
+  await component.update(<Counter v-on:submit={(count: string) => { 
     messages.push(count) 
   }} />)
   await component.click();
@@ -57,10 +57,13 @@ test('renderer updates slots without remounting', async ({ mount }) => {
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
-  const component = await mount(<Button title='Submit' v-on:submit={data => {
-    messages.push(data)
-  }}></Button>)
+  const messages: string[] = []
+  const component = await mount(<Button 
+    title="Submit"
+    v-on:submit={(data: string) => {
+      messages.push(data)
+    }} 
+  />)
   await component.click()
   expect(messages).toEqual(['hello'])
 })
@@ -108,7 +111,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
@@ -118,12 +121,9 @@ test('run hooks', async ({ page, mount }) => {
 
 test('unmount a multi root component', async ({ mount, page }) => {
   const component = await mount(<MultiRoot />)
-
   await expect(page.locator('#root')).toContainText('root 1')
   await expect(page.locator('#root')).toContainText('root 2')
-
   await component.unmount()
-
   await expect(page.locator('#root')).not.toContainText('root 1')
   await expect(page.locator('#root')).not.toContainText('root 2')
 })
diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.js b/tests/components/ct-vue-vite/src/notation-vue.spec.js
index 95aaefce87..316635c478 100644
--- a/tests/components/ct-vue-vite/src/notation-vue.spec.js
+++ b/tests/components/ct-vue-vite/src/notation-vue.spec.js
@@ -40,7 +40,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) =>
   const messages = []
   await component.update({
     on: { 
-      submit: count => messages.push(count)
+      submit: (count) => messages.push(count)
     }
   })
   await component.click();
@@ -71,7 +71,7 @@ test('emit an submit event when the button is clicked', async ({ mount }) => {
       title: 'Submit'
     },
     on: {
-      submit: data => messages.push(data)
+      submit: (data) => messages.push(data)
     }
   })
   await component.click()
diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.ts b/tests/components/ct-vue-vite/src/notation-vue.spec.ts
index 94c2565620..18a833ca7f 100644
--- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts
+++ b/tests/components/ct-vue-vite/src/notation-vue.spec.ts
@@ -38,10 +38,10 @@ test('renderer updates props without remounting', async ({ mount }) => {
 test('renderer updates event listeners without remounting', async ({ mount }) => {
   const component = await mount(Counter)
 
-  const messages = []
+  const messages: string[] = []
   await component.update({
     on: { 
-      submit: data => messages.push(data)
+      submit: (data: string) => messages.push(data)
     }
   })
   await component.click();
@@ -66,13 +66,13 @@ test('renderer updates slots without remounting', async ({ mount }) => {
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
+  const messages: string[] = []
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     },
     on: {
-      submit: data => messages.push(data)
+      submit: (data: string) => messages.push(data)
     }
   })
   await component.click()
@@ -120,7 +120,7 @@ test('render a component without options', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<HooksConfig>(Button, {
     props: {
diff --git a/tests/components/ct-vue-vite/tsconfig.app.json b/tests/components/ct-vue-vite/tsconfig.app.json
new file mode 100644
index 0000000000..be8aaad0f1
--- /dev/null
+++ b/tests/components/ct-vue-vite/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/*.spec.*/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+    "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/tests/components/ct-vue-vite/tsconfig.config.json b/tests/components/ct-vue-vite/tsconfig.config.json
new file mode 100644
index 0000000000..75f02c4939
--- /dev/null
+++ b/tests/components/ct-vue-vite/tsconfig.config.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}
diff --git a/tests/components/ct-vue-vite/tsconfig.json b/tests/components/ct-vue-vite/tsconfig.json
new file mode 100644
index 0000000000..536e033e83
--- /dev/null
+++ b/tests/components/ct-vue-vite/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.test.json"
+    }
+  ]
+}
diff --git a/tests/components/ct-vue-vite/tsconfig.test.json b/tests/components/ct-vue-vite/tsconfig.test.json
new file mode 100644
index 0000000000..0a7c05b4e3
--- /dev/null
+++ b/tests/components/ct-vue-vite/tsconfig.test.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["playwright"],
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node"]
+  }
+}
diff --git a/tests/components/ct-vue-vite/vue.d.ts b/tests/components/ct-vue-vite/vue.d.ts
deleted file mode 100644
index df9f4ba885..0000000000
--- a/tests/components/ct-vue-vite/vue.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '*.vue';
diff --git a/tests/components/ct-vue2-cli/.gitignore b/tests/components/ct-vue2-cli/.gitignore
index 403adbc1e5..7e2a946d8e 100644
--- a/tests/components/ct-vue2-cli/.gitignore
+++ b/tests/components/ct-vue2-cli/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+*.tsbuildinfo
 
 # local env files
 .env.local
diff --git a/tests/components/ct-vue2-cli/package.json b/tests/components/ct-vue2-cli/package.json
index 11fedb66eb..17c4f707df 100644
--- a/tests/components/ct-vue2-cli/package.json
+++ b/tests/components/ct-vue2-cli/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "typecheck": "tsc --noEmit --project tsconfig.test.json"
   },
   "dependencies": {
     "core-js": "^3.8.3",
@@ -17,6 +18,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "@vue/tsconfig": "^0.1.3",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "vue-template-compiler": "^2.6.14"
diff --git a/tests/components/ct-vue2-cli/playwright/index.ts b/tests/components/ct-vue2-cli/playwright/index.ts
index 90677834ed..4cd9effc9b 100644
--- a/tests/components/ct-vue2-cli/playwright/index.ts
+++ b/tests/components/ct-vue2-cli/playwright/index.ts
@@ -1,4 +1,3 @@
-//@ts-check
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks';
 
diff --git a/tests/components/ct-vue2-cli/src/components/Button.vue b/tests/components/ct-vue2-cli/src/components/Button.vue
index bf008d3f7c..8bf2f3b71b 100644
--- a/tests/components/ct-vue2-cli/src/components/Button.vue
+++ b/tests/components/ct-vue2-cli/src/components/Button.vue
@@ -2,7 +2,7 @@
   <button @click="$emit('submit', 'hello')">{{ title }}</button>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'ButtonButton',
   props: ['title']
diff --git a/tests/components/ct-vue2-cli/src/components/Counter.vue b/tests/components/ct-vue2-cli/src/components/Counter.vue
index 9998a6cb85..bc3269bf36 100644
--- a/tests/components/ct-vue2-cli/src/components/Counter.vue
+++ b/tests/components/ct-vue2-cli/src/components/Counter.vue
@@ -7,7 +7,7 @@
   </div>
  </template>
 
-<script>
+<script lang="ts">
   let remountCount = 0;
   
   export default {
diff --git a/tests/components/ct-vue2-cli/src/components/HelloWorld.vue b/tests/components/ct-vue2-cli/src/components/HelloWorld.vue
index 879051a297..2b04639e8b 100644
--- a/tests/components/ct-vue2-cli/src/components/HelloWorld.vue
+++ b/tests/components/ct-vue2-cli/src/components/HelloWorld.vue
@@ -30,7 +30,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'HelloWorld',
   props: {
diff --git a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
index 575d1198cb..087d96b31e 100644
--- a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
+++ b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
@@ -30,12 +30,14 @@ test('renderer updates props without remounting', async ({ mount }) => {
 })
 
 test('renderer updates event listeners without remounting', async ({ mount }) => {
-  const messages = []
+  const messages: string[] = []
   const component = await mount(<Counter />)
 
-  await component.update(<Counter v-on:submit={count => { 
-    messages.push(count) 
-  }} />)
+  await component.update(<Counter 
+    v-on:submit={(count: string) => { 
+      messages.push(count) 
+    }}
+  />)
   await component.click();
   expect(messages).toEqual(['hello'])
   
@@ -56,10 +58,13 @@ test('renderer updates slots without remounting', async ({ mount }) => {
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
-  const component = await mount(<Button title='Submit' v-on:submit={data => {
-    messages.push(data)
-  }}></Button>)
+  const messages: string[] = []
+  const component = await mount(<Button 
+    title="Submit"
+    v-on:submit={(data: string) => {
+      messages.push(data)
+    }} 
+  />)
   await component.click()
   expect(messages).toEqual(['hello'])
 })
@@ -107,7 +112,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<hooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
diff --git a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts
index c5a9ca0867..515399be8a 100644
--- a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts
+++ b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts
@@ -36,10 +36,10 @@ test('renderer updates props without remounting', async ({ mount }) => {
 test('renderer updates event listeners without remounting', async ({ mount }) => {
   const component = await mount(Counter)
 
-  const messages = []
+  const messages: string[] = []
   await component.update({
     on: { 
-      submit: data => messages.push(data)
+      submit: (data: string) => messages.push(data)
     }
   })
   await component.click();
@@ -70,13 +70,13 @@ test('renderer updates slots without remounting', async ({ mount }) => {
 })
 
 test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages = []
+  const messages: string[] = []
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     },
     on: {
-      submit: data => messages.push(data)
+      submit: (data: string) => messages.push(data)
     }
   })
   await component.click()
@@ -121,7 +121,7 @@ test('render a component without options', async ({ mount }) => {
 })
 
 test('run hooks', async ({ page, mount }) => {
-  const messages = []
+  const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
   await mount<hooksConfig>(Button, {
     props: {
diff --git a/tests/components/ct-vue2-cli/src/shims-vue.d.ts b/tests/components/ct-vue2-cli/src/shims-vue.d.ts
new file mode 100644
index 0000000000..8f6f410263
--- /dev/null
+++ b/tests/components/ct-vue2-cli/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}
diff --git a/tests/components/ct-vue2-cli/src/vue.d.ts b/tests/components/ct-vue2-cli/src/vue.d.ts
deleted file mode 100644
index df9f4ba885..0000000000
--- a/tests/components/ct-vue2-cli/src/vue.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '*.vue';
diff --git a/tests/components/ct-vue2-cli/tsconfig.app.json b/tests/components/ct-vue2-cli/tsconfig.app.json
new file mode 100644
index 0000000000..326d9a3552
--- /dev/null
+++ b/tests/components/ct-vue2-cli/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/*.spec.*/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+    "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/tests/components/ct-vue2-cli/tsconfig.config.json b/tests/components/ct-vue2-cli/tsconfig.config.json
new file mode 100644
index 0000000000..d554caf51b
--- /dev/null
+++ b/tests/components/ct-vue2-cli/tsconfig.config.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["playwright.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}
diff --git a/tests/components/ct-vue2-cli/tsconfig.json b/tests/components/ct-vue2-cli/tsconfig.json
new file mode 100644
index 0000000000..536e033e83
--- /dev/null
+++ b/tests/components/ct-vue2-cli/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.test.json"
+    }
+  ]
+}
diff --git a/tests/components/ct-vue2-cli/tsconfig.test.json b/tests/components/ct-vue2-cli/tsconfig.test.json
new file mode 100644
index 0000000000..0a7c05b4e3
--- /dev/null
+++ b/tests/components/ct-vue2-cli/tsconfig.test.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["playwright"],
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node"]
+  }
+}
diff --git a/tests/components/test-all.spec.js b/tests/components/test-all.spec.js
index bdd2ba6a67..98fba8d9a2 100644
--- a/tests/components/test-all.spec.js
+++ b/tests/components/test-all.spec.js
@@ -14,11 +14,15 @@ for (const dir of fs.readdirSync(__dirname)) {
       await run('npm', ['i'], folder);
     });
 
+    test('typecheck', async () => {
+      await run('npm', ['run', 'typecheck'], folder);
+    });
+
     for (const project of ['chromium', 'firefox', 'webkit']) {
       test(project, async () => {
         await run('npx', ['playwright', 'test', '--project=' + project, '--reporter=list'], folder);
       });
-    }
+    } 
   });
 }