chore: enable typecheck for tests and scripts (#8114)

Author: antfu

.eslintrc.cjs

@@ -119,7 +119,8 @@ module.exports = defineConfig({
       rules: {
         'node/no-extraneous-import': 'off',
         'node/no-extraneous-require': 'off',
-        'node/no-missing-import': 'off'
+        'node/no-missing-import': 'off',
+        'node/no-missing-require': 'off'
       }
     },
     {

.github/workflows/ci.yml

@@ -102,9 +102,13 @@ jobs:
         run: |
           pnpm run ci-build-vite
           pnpm run build-plugin-vue
+          pnpm run build-plugin-react
 
       - name: Lint
         run: pnpm run lint
 
       - name: Check formatting
         run: pnpm prettier --check .
+
+      - name: Typecheck
+        run: pnpm run typecheck

CONTRIBUTING.md

@@ -34,7 +34,7 @@ If you want to use break point and explore code execution you can use the ["Run
 
 Some errors are masked and hidden away because of the layers of abstraction and sandboxed nature added by Vitest, Playwright, and Chromium. In order to see what's actually going wrong and the contents of the devtools console in those instances, follow this setup:
 
-1. Add a `debugger` statement to the `scripts/vitestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits.
+1. Add a `debugger` statement to the `playground/vitestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits.
 
 1. Run the tests with the `debug-serve` script command which will enable remote debugging: `pnpm run debug-serve -- --runInBand resolve`.
 
@@ -69,7 +69,7 @@ And re-run `pnpm install` to link the package.
 
 ### Integration Tests
 
-Each package under `playground/` contains a `__tests__` directory. The tests are run using [Vitest](https://vitest.dev/) + [Playwright](https://playwright.dev/) with custom integrations to make writing tests simple. The detailed setup is inside `vitest.config.e2e.js` and `scripts/vitest*` files.
+Each package under `playground/` contains a `__tests__` directory. The tests are run using [Vitest](https://vitest.dev/) + [Playwright](https://playwright.dev/) with custom integrations to make writing tests simple. The detailed setup is inside `vitest.config.e2e.js` and `playground/vitest*` files.
 
 Before running the tests, make sure that [Vite has been built](#repo-setup). On Windows, you may want to [activate Developer Mode](https://docs.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development) to solve [issues with symlink creation for non-admins](https://github.com/vitejs/vite/issues/7390). Also you may want to [set git `core.symlinks` to `true` to solve issues with symlinks in git](https://github.com/vitejs/vite/issues/5242).
 
@@ -107,11 +107,11 @@ test('should work', async () => {
 
 Some common test helpers, e.g. `testDir`, `isBuild` or `editFile` are also available in the utils. Source code is located at `playground/test-utils.ts`.
 
-Note: The test build environment uses a [different default set of Vite config](https://github.com/vitejs/vite/blob/9c6501d9c363eaa3c1e7708d531fb2a92b633db6/scripts/vitestSetup.ts#L102-L122) to skip transpilation during tests to make it faster. This may produce a different result compared to the default production build.
+Note: The test build environment uses a [different default set of Vite config](https://github.com/vitejs/vite/blob/main/playground/vitestSetup.ts#L102-L122) to skip transpilation during tests to make it faster. This may produce a different result compared to the default production build.
 
 ### Extending the Test Suite
 
-To add new tests, you should find a related playground to the fix or feature (or create a new one). As an example, static assets loading are tested in the [assets playground](https://github.com/vitejs/vite/tree/main/playground/assets). In this Vite App, there is a test for `?raw` imports, with [a section is defined in the `index.html` for it](https://github.com/vitejs/vite/blob/71215533ac60e8ff566dc3467feabfc2c71a01e2/playground/assets/index.html#L121):
+To add new tests, you should find a related playground to the fix or feature (or create a new one). As an example, static assets loading are tested in the [assets playground](https://github.com/vitejs/vite/tree/main/playground/assets). In this Vite App, there is a test for `?raw` imports, with [a section is defined in the `index.html` for it](https://github.com/vitejs/vite/blob/main/playground/assets/index.html#L121):
 
 ```html
 <h2>?raw import</h2>

package.json

@@ -27,6 +27,7 @@
     "serve-docs": "vitepress serve docs",
     "release": "ts-node scripts/release.ts",
     "ci-publish": "ts-node scripts/publishCI.ts",
+    "typecheck": "tsc -p scripts --noEmit && tsc -p playground --noEmit",
     "build": "run-s build-vite build-plugin-vue build-plugin-react",
     "build-vite": "cd packages/vite && npm run build",
     "build-plugin-vue": "cd packages/plugin-vue && npm run build",

playground/cli-module/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import execa from 'execa'

playground/cli/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import execa from 'execa'

playground/html/__tests__/html.spec.ts

@@ -220,7 +220,7 @@ describe.runIf(isServe)('invalid', () => {
   })
 
   test('should reload when fixed', async () => {
-    const response = await page.goto(viteTestUrl + '/invalid.html')
+    await page.goto(viteTestUrl + '/invalid.html')
     await editFile('invalid.html', (content) => {
       return content.replace('<div Bad', '<div> Good')
     })

playground/legacy/__tests__/ssr/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 import path from 'path'
 import { ports } from '~utils'

playground/lib/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/optimize-missing-deps/__test__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/react-emotion/__tests__/react.spec.ts

@@ -28,7 +28,7 @@ test('should update button style', async () => {
     })
   }
 
-  const styles = await page.evaluate(() => {
+  await page.evaluate(() => {
     return document.querySelector('button').style
   })
 

playground/resolve-config/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/ssr-deps/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/ssr-html/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/ssr-pug/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/ssr-react/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/ssr-react/server.js

@@ -60,6 +60,7 @@ async function createServer(
         render = (await vite.ssrLoadModule('/src/entry-server.jsx')).render
       } else {
         template = indexProd
+        // @ts-ignore
         render = require('./dist/server/entry-server.js').render
       }
 

playground/ssr-vue/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/ssr-vue/server.js

@@ -63,6 +63,7 @@ async function createServer(
         render = (await vite.ssrLoadModule('/src/entry-server.js')).render
       } else {
         template = indexProd
+        // @ts-ignore
         render = require('./dist/server/entry-server.js').render
       }
 

playground/ssr-webworker/__tests__/serve.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 import path from 'path'

playground/test-utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
 // test utils used in e2e tests for playgrounds.
 // `import { getColor } from '~utils'`
 
@@ -12,9 +13,9 @@ import type { Manifest } from 'vite'
 import { normalizePath } from 'vite'
 import { fromComment } from 'convert-source-map'
 import { expect } from 'vitest'
-import { page } from '../scripts/vitestSetup'
+import { page } from './vitestSetup'
 
-export * from '../scripts/vitestSetup'
+export * from './vitestSetup'
 
 export const workspaceRoot = path.resolve(__dirname, '../')
 

playground/tsconfig.json

@@ -3,12 +3,15 @@
   "exclude": ["**/dist/**"],
   "compilerOptions": {
     "target": "es2019",
+    "module": "esnext",
     "outDir": "dist",
+    "baseUrl": ".",
     "allowJs": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
     "resolveJsonModule": true,
-    "baseUrl": ".",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
     "jsx": "preserve",
     "types": ["vite/client", "vitest/globals", "node"],
     "paths": {

scripts/vitestGlobalSetup.ts renamed to playground/vitestGlobalSetup.ts

@@ -13,7 +13,7 @@ import type {
   ViteDevServer
 } from 'vite'
 import { build, createServer, mergeConfig } from 'vite'
-import type { Browser, ConsoleMessage, Page } from 'playwright-chromium'
+import type { Browser, Page } from 'playwright-chromium'
 import type { RollupError, RollupWatcher, RollupWatcherEvent } from 'rollup'
 import type { File } from 'vitest'
 import { beforeAll } from 'vitest'

scripts/vitestSetup.ts renamed to playground/vitestSetup.ts

@@ -1,4 +1,4 @@
-// this is automatically detected by scripts/vitestSetup.ts and will replace
+// this is automatically detected by playground/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
 export async function serve() {

playground/vue-lib/__tests__/serve.ts

@@ -1,14 +1,15 @@
 let count = 0
 const ports = new Set()
 
+// @ts-expect-error
 onconnect = (event) => {
   const port = event.ports[0]
   ports.add(port)
   port.postMessage(count)
   port.onmessage = (message) => {
     if (message.data === 'tick') {
       count++
-      ports.forEach((p) => {
+      ports.forEach((p: any) => {
         p.postMessage(count)
       })
     }
@@ -17,3 +18,5 @@ onconnect = (event) => {
 
 // for sourcemap
 console.log('my-shared-worker.js')
+
+export {}

playground/worker/my-shared-worker.ts

@@ -1,4 +1,4 @@
-import { msg, mode } from './modules/workerImport'
+import { mode, msg } from './modules/workerImport'
 import { bundleWithPlugin } from './modules/test-plugin'
 
 self.onmessage = (e) => {

playground/worker/my-worker.ts

@@ -1,13 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
+  "include": ["."],
   "compilerOptions": {
     "module": "commonjs",
-    "moduleResolution": "node",
     "target": "es2019",
+    "moduleResolution": "node",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["node", "vitest/globals"]
+    "noUnusedLocals": true,
+    "forceConsistentCasingInFileNames": true
   }
 }

scripts/tsconfig.json

@@ -9,8 +9,8 @@ export default defineConfig({
   },
   test: {
     include: ['./playground/**/*.spec.[tj]s'],
-    setupFiles: ['./scripts/vitestSetup.ts'],
-    globalSetup: ['./scripts/vitestGlobalSetup.ts'],
+    setupFiles: ['./playground/vitestSetup.ts'],
+    globalSetup: ['./playground/vitestGlobalSetup.ts'],
     testTimeout: process.env.CI ? 50000 : 20000,
     globals: true,
     reporters: 'dot',