chore(ct): type check (#18208)

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",

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

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,

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": [

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

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}`),
   ]);
 

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": {

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

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);
       }}
     />

tests/components/ct-solid/tsconfig.json

@@ -10,6 +10,7 @@
     "jsxImportSource": "solid-js",
     "types": ["vite/client"],
     "noEmit": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "skipLibCheck": true
   }
 }

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",

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>

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;

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;
+}

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

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" }]
 }

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"
   }
 }

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;

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

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"
+  }
+}

tests/components/ct-vue-cli/.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+*.tsbuildinfo
 
 # local env files
 .env.local

tests/components/ct-vue-cli/jsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "jsx": "react-jsx",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}

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"
   },

tests/components/ct-vue-cli/src/components/Button.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 defineProps({
   title: {
     type: String,

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,

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

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

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/*"]
+    }
+  }
+}

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"]
+  }
+}

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"
+    }
+  ]
+}

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"]
+  }
+}

tests/components/ct-vue-cli/vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  const value: any;
+  export default value;
+}

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

tests/components/ct-vue-vite/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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",

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>

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>
 

tests/components/ct-vue-vite/src/components/NamedSlots.vue

@@ -3,7 +3,6 @@
     <header>
       <slot name="header" />
     </header>
-
     <main>
       <slot name="main" />
     </main>

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

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()

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

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/*"]
+    }
+  }
+}

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"]
+  }
+}

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"
+    }
+  ]
+}

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"]
+  }
+}

tests/components/ct-vue-vite/vue.d.ts

@@ -1 +0,0 @@
-declare module '*.vue';

tests/components/ct-vue2-cli/.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+*.tsbuildinfo
 
 # local env files
 .env.local

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"

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';
 

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']

tests/components/ct-vue2-cli/src/components/Counter.vue

@@ -7,7 +7,7 @@
   </div>
  </template>
 
-<script>
+<script lang="ts">
   let remountCount = 0;
   
   export default {

tests/components/ct-vue2-cli/src/components/HelloWorld.vue

@@ -30,7 +30,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'HelloWorld',
   props: {

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

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

tests/components/ct-vue2-cli/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

tests/components/ct-vue2-cli/src/vue.d.ts

@@ -1 +0,0 @@
-declare module '*.vue';

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/*"]
+    }
+  }
+}

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"]
+  }
+}

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"
+    }
+  ]
+}

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"]
+  }
+}

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);
       });
-    }
+    } 
   });
 }