chore: reduce test flakiness (#14684)

.prettierignore

@@ -9,3 +9,4 @@ playground/tsconfig-json-load-error/has-error/tsconfig.json
 playground/html/invalid.html
 playground/html/valid.html
 playground/worker/classic-worker.js
+playground/external/public/slash@3.0.0.js

playground/external/index.html

@@ -7,9 +7,9 @@
     <script type="importmap">
       {
         "imports": {
-          "vue": "https://unpkg.com/vue@3.2.0/dist/vue.runtime.esm-browser.js",
-          "slash5": "https://unpkg.com/slash@5.0.0/index.js",
-          "slash3": "https://esm.sh/slash@3.0.0"
+          "vue": "/vue@3.2.0.js",
+          "slash5": "/slash@5.js",
+          "slash3": "/slash@3.0.0.js"
         }
       }
     </script>

playground/external/package.json

@@ -17,6 +17,7 @@
     "slash3": "npm:slash@^3.0.0",
     "slash5": "npm:slash@^5.1.0",
     "vite": "workspace:*",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue32": "npm:vue@~3.2.0"
   }
 }

playground/external/public/slash@3.0.0.js

@@ -0,0 +1,5 @@
+/* eslint-disable */
+// copied from https://esm.sh/v133/slash@3.0.0/es2022/slash.mjs to reduce network issues in CI
+
+/* esm.sh - esbuild bundle(slash@3.0.0) es2022 production */
+var a=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var A=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),E=(e,t)=>{for(var r in t)d(e,r,{get:t[r],enumerable:!0})},u=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of x(t))!p.call(e,n)&&n!==r&&d(e,n,{get:()=>t[n],enumerable:!(i=m(t,n))||i.enumerable});return e},o=(e,t,r)=>(u(e,t,"default"),r&&u(r,t,"default")),c=(e,t,r)=>(r=e!=null?a(g(e)):{},u(t||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e));var f=A((h,_)=>{"use strict";_.exports=e=>{let t=/^\\\\\?\\/.test(e),r=/[^\u0000-\u0080]+/.test(e);return t||r?e:e.replace(/\\/g,"/")}});var s={};E(s,{default:()=>P});var L=c(f());o(s,c(f()));var{default:l,...N}=L,P=l!==void 0?l:N;export{P as default};

playground/external/vite.config.js

@@ -1,5 +1,25 @@
+import fs from 'node:fs/promises'
 import { defineConfig } from 'vite'
 
+const npmDirectServeConfig = {
+  '/vue@3.2.0.js': 'vue32/dist/vue.runtime.esm-browser.js',
+  '/slash@5.js': 'slash5/index.js',
+}
+/** @type {import('vite').Connect.NextHandleFunction} */
+const serveNpmCodeDirectlyMiddleware = async (req, res, next) => {
+  for (const [url, file] of Object.entries(npmDirectServeConfig)) {
+    if (req.originalUrl === url) {
+      const code = await fs.readFile(
+        new URL(`./node_modules/${file}`, import.meta.url),
+      )
+      res.setHeader('Content-Type', 'application/javascript')
+      res.end(code)
+      return
+    }
+  }
+  next()
+}
+
 export default defineConfig({
   optimizeDeps: {
     include: ['dep-that-imports', 'dep-that-requires'],
@@ -14,4 +34,15 @@ export default defineConfig({
       esmExternals: ['vue', 'slash5'],
     },
   },
+  plugins: [
+    {
+      name: 'serve-npm-code-directly',
+      configureServer({ middlewares }) {
+        middlewares.use(serveNpmCodeDirectlyMiddleware)
+      },
+      configurePreviewServer({ middlewares }) {
+        middlewares.use(serveNpmCodeDirectlyMiddleware)
+      },
+    },
+  ],
 })

playground/hmr/__tests__/hmr.spec.ts

@@ -631,7 +631,7 @@ if (!isBuild) {
 
           await untilBrowserLogAfter(
             () => page.goto(`${viteTestUrl}/${testDir}/`),
-            '>>> ready <<<',
+            [CONNECTED, '>>> ready <<<'],
             (logs) => {
               expect(logs).toContain('loaded:some:a0b0c0default0')
               expect(logs).toContain('some >>>>>> a0, b0, c0')
@@ -640,10 +640,11 @@ if (!isBuild) {
 
           await untilBrowserLogAfter(
             async () => {
+              const loadPromise = page.waitForEvent('load')
               editFile(file, (code) => code.replace(/([abc])0/g, '$11'))
-              await page.waitForEvent('load')
+              await loadPromise
             },
-            '>>> ready <<<',
+            [CONNECTED, '>>> ready <<<'],
             (logs) => {
               expect(logs).toContain('loaded:some:a1b1c1default0')
               expect(logs).toContain('some >>>>>> a1, b1, c1')
@@ -712,21 +713,25 @@ if (!isBuild) {
     const importCode = "import 'missing-modules'"
     const unImportCode = `// ${importCode}`
 
-    await page.goto(viteTestUrl + '/missing-import/index.html', {
-      waitUntil: 'load',
-    })
+    await untilBrowserLogAfter(
+      () =>
+        page.goto(viteTestUrl + '/missing-import/index.html', {
+          waitUntil: 'load',
+        }),
+      /connected/, // wait for HMR connection
+    )
 
     await untilBrowserLogAfter(async () => {
       const loadPromise = page.waitForEvent('load')
       editFile(file, (code) => code.replace(importCode, unImportCode))
       await loadPromise
-    }, 'missing test')
+    }, ['missing test', /connected/])
 
     await untilBrowserLogAfter(async () => {
       const loadPromise = page.waitForEvent('load')
       editFile(file, (code) => code.replace(unImportCode, importCode))
       await loadPromise
-    }, /500/)
+    }, [/500/, /connected/])
   })
 
   test('should hmr when file is deleted and restored', async () => {

playground/lib/__tests__/lib.spec.ts

@@ -6,6 +6,7 @@ import {
   readFile,
   serverLogs,
   untilUpdated,
+  withRetry,
 } from '~utils'
 
 describe.runIf(isBuild)('build', () => {
@@ -84,5 +85,7 @@ describe.runIf(isBuild)('build', () => {
 })
 
 test.runIf(isServe)('dev', async () => {
-  expect(await page.textContent('.demo')).toBe('It works')
+  await withRetry(async () => {
+    expect(await page.textContent('.demo')).toBe('It works')
+  })
 })

playground/proxy-hmr/__tests__/proxy-hmr.spec.ts

@@ -1,8 +1,19 @@
 import { test } from 'vitest'
-import { editFile, page, untilUpdated, viteTestUrl } from '~utils'
+import {
+  editFile,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+  viteTestUrl,
+} from '~utils'
 
 test('proxy-hmr', async () => {
-  await page.goto(viteTestUrl)
+  await untilBrowserLogAfter(
+    () => page.goto(viteTestUrl),
+    // wait for both main and sub app HMR connection
+    [/connected/, /connected/],
+  )
+
   const otherAppTextLocator = page.frameLocator('iframe').locator('.content')
   await untilUpdated(() => otherAppTextLocator.textContent(), 'other app')
   editFile('other-app/index.html', (code) =>

pnpm-lock.yaml

@@ -628,6 +628,9 @@ importers:
       vue:
         specifier: ^3.3.4
         version: 3.3.4
+      vue32:
+        specifier: npm:vue@~3.2.0
+        version: /vue@3.2.0
 
   playground/external/dep-that-imports:
     dependencies:
@@ -4119,6 +4122,16 @@ packages:
       pretty-format: 29.5.0
     dev: true
 
+  /@vue/compiler-core@3.2.0:
+    resolution: {integrity: sha512-+kfA4pisto26tcEh9Naf/qrizplYWnkBLHu3fX5Yu0c47RVBteVG3dHENFczl3Egwra+5NP5f3YuOgxK1ZMbNQ==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
+      '@vue/shared': 3.2.0
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: true
+
   /@vue/compiler-core@3.3.4:
     resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
     dependencies:
@@ -4127,6 +4140,13 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
+  /@vue/compiler-dom@3.2.0:
+    resolution: {integrity: sha512-CqfATmX04+58LNBTTUPRBLyYGLP0bxtL+8b7B8pEvXja7fpmxiYcKBQsdaXfyqoRJsaTzA7eVXQt/t0dYhu/SQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.0
+      '@vue/shared': 3.2.0
+    dev: true
+
   /@vue/compiler-dom@3.3.4:
     resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
     dependencies:
@@ -4170,17 +4190,38 @@ packages:
       estree-walker: 2.0.2
       magic-string: 0.30.5
 
+  /@vue/reactivity@3.2.0:
+    resolution: {integrity: sha512-39L3UJe8+jYeCTM/QrDglDM05O11UrmyhazUOHOOj7+a9pPVu95HGInh5CkKQf98mx2gq6t3PPN8bCN5wK8Wwg==}
+    dependencies:
+      '@vue/shared': 3.2.0
+    dev: true
+
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
 
+  /@vue/runtime-core@3.2.0:
+    resolution: {integrity: sha512-mZlkYTcw3mVwClwFTpql4hkDfOweHE/w+9r3Yb3UPwRs75bSJXMBRUikw1GVx01bZQ8VQPjBYowCElcWNSlKig==}
+    dependencies:
+      '@vue/reactivity': 3.2.0
+      '@vue/shared': 3.2.0
+    dev: true
+
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
 
+  /@vue/runtime-dom@3.2.0:
+    resolution: {integrity: sha512-NCHMfrUwpJelCTINpMRLFhzWKJkl07slabmTbECZFJnkdDfFkptGCWll42q58bbvwGmpAPDzNI3yYch72pcKwg==}
+    dependencies:
+      '@vue/runtime-core': 3.2.0
+      '@vue/shared': 3.2.0
+      csstype: 2.6.21
+    dev: true
+
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
     dependencies:
@@ -4197,6 +4238,10 @@ packages:
       '@vue/shared': 3.3.4
       vue: 3.3.4
 
+  /@vue/shared@3.2.0:
+    resolution: {integrity: sha512-MgdilC3YHYSCFuNlxZBgugh8B9/h/h+nQ6lkeaxqFWW+FnV/JzCwW4Bh5bYIYvBleG8QZjFwxdmdqSAWLXzgEA==}
+    dev: true
+
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
@@ -5191,6 +5236,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /csstype@2.6.21:
+    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: true
+
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
@@ -9890,6 +9939,14 @@ packages:
       vue: 3.3.4
     dev: false
 
+  /vue@3.2.0:
+    resolution: {integrity: sha512-eMo5yCdkWRmBfqp/acBI/Y1Omgk0NyGqPViaU66eOpKarXNtkdImzDA57+E76jnWVr6MEp/rg1n0vnxaVvALMQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.0
+      '@vue/runtime-dom': 3.2.0
+      '@vue/shared': 3.2.0
+    dev: true
+
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
     dependencies: