chore: migrate ct to vite5 (#29033)

Closes https://github.com/microsoft/playwright/issues/28607

package.json

@@ -73,8 +73,8 @@
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "@typescript-eslint/utils": "^6.13.2",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "@zip.js/zip.js": "^2.7.29",
     "chokidar": "^3.5.3",
     "colors": "^1.4.0",
@@ -100,7 +100,7 @@
     "socksv5": "0.0.6",
     "ssim.js": "^3.5.0",
     "typescript": "^5.3.2",
-    "vite": "^4.4.12",
+    "vite": "^5.0.11",
     "ws": "^8.5.0",
     "xml2js": "^0.5.0",
     "yaml": "^2.2.2"

packages/playwright-ct-core/package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "playwright-core": "1.42.0-next",
-    "vite": "^4.4.12",
+    "vite": "^5.0.11",
     "playwright": "1.42.0-next"
   },
   "bin": {

packages/playwright-ct-core/src/vitePlugin.ts

@@ -16,20 +16,18 @@
 
 import type { Suite } from 'playwright/types/testReporter';
 import type { PlaywrightTestConfig as BasePlaywrightTestConfig, FullConfig } from 'playwright/test';
-
+import type http from 'http';
 import type { InlineConfig, Plugin, ResolveFn, ResolvedConfig, UserConfig } from 'vite';
 import type { TestRunnerPlugin } from '../../playwright/src/plugins';
 import type { AddressInfo } from 'net';
 import type { PluginContext } from 'rollup';
 import { debug } from 'playwright-core/lib/utilsBundle';
-
 import fs from 'fs';
 import path from 'path';
 import { stoppable } from 'playwright/lib/utilsBundle';
 import { assert, calculateSha1 } from 'playwright-core/lib/utils';
 import { getPlaywrightVersion } from 'playwright-core/lib/utils';
 import { getUserData, internalDependenciesForTestFile, setExternalDependencies } from 'playwright/lib/transform/compilationCache';
-import { version as viteVersion, build, preview, mergeConfig } from 'vite';
 import { source as injectedSource } from './generated/indexSource';
 import type { ImportInfo } from './tsxTransform';
 
@@ -90,14 +88,17 @@ export function createPlugin(
           outDir: use.ctCacheDir ? path.resolve(configDir, use.ctCacheDir) : path.resolve(templateDir, '.cache')
         },
         preview: {
-          https: baseURL.protocol.startsWith('https:'),
+          https: baseURL.protocol.startsWith('https:') ? {} : undefined,
           host: baseURL.hostname,
           port: use.ctPort || Number(baseURL.port) || 3100
         },
         // Vite preview server will otherwise always return the index.html with 200.
-        appType: 'custom',
+        appType: 'mpa',
       };
 
+      // Vite 5 refuses to support CJS.
+      const { version: viteVersion, build, preview, mergeConfig } = await import('vite');
+
       // Apply user config on top of the base config. This could have changed root and build.outDir.
       const userConfig = typeof use.ctViteConfig === 'function' ? await use.ctViteConfig() : (use.ctViteConfig || {});
       const baseAndUserConfig = mergeConfig(baseConfig, userConfig);
@@ -217,7 +218,7 @@ export function createPlugin(
       }
 
       const previewServer = await preview(finalConfig);
-      stoppableServer = stoppable(previewServer.httpServer, 0);
+      stoppableServer = stoppable(previewServer.httpServer as http.Server, 0);
       const isAddressInfo = (x: any): x is AddressInfo => x?.address;
       const address = previewServer.httpServer.address();
       if (isAddressInfo(address)) {

packages/playwright-ct-react/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@playwright/experimental-ct-core": "1.42.0-next",
-    "@vitejs/plugin-react": "^4.0.0"
+    "@vitejs/plugin-react": "^4.2.1"
   },
   "bin": {
     "playwright": "cli.js"

packages/playwright-ct-react17/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@playwright/experimental-ct-core": "1.42.0-next",
-    "@vitejs/plugin-react": "^4.0.0"
+    "@vitejs/plugin-react": "^4.2.1"
   },
   "bin": {
     "playwright": "cli.js"

tests/components/ct-react-vite/package.json

@@ -16,8 +16,8 @@
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^4.5.4",
-    "vite": "^4.2.1"
+    "vite": "^5.0.11"
   }
 }

tests/components/ct-solid/package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "typescript": "^4.7.4",
-    "vite": "^4.2.1",
+    "vite": "^5.0.11",
     "vite-plugin-solid": "^2.6.1"
   }
 }

tests/components/ct-svelte-vite/package.json

@@ -15,7 +15,7 @@
     "svelte-check": "^3.6.2",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.8"
+    "vite": "^5.0.11"
   },
   "dependencies": {
     "svelte": "^4.2.8",

tests/components/ct-vue-vite/package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/tsconfig": "^0.1.3",
-    "vite": "^4.2.1",
+    "vite": "^5.0.11",
     "vue-tsc": "^1.0.0"
   }
 }

tests/installation/playwright-component-testing.spec.ts

@@ -16,6 +16,8 @@
 import { test } from './npmTest';
 import path from 'path';
 
+test.slow();
+
 test('pnpm: @playwright/experimental-ct-react should work', async ({ exec, tmpWorkspace, writeFiles }) => {
   await exec('pnpm add @playwright/experimental-ct-react react react-dom');
   await exec('pnpm exec playwright install');

tests/playwright-test/playwright-test-fixtures.ts

@@ -346,6 +346,7 @@ const TSCONFIG = {
     'rootDir': '.',
     'lib': ['esnext', 'dom', 'DOM.Iterable'],
     'noEmit': true,
+    'skipLibCheck': true,
   },
   'exclude': [
     'node_modules'