playground/vue/__tests__/vue.spec.ts > hmr > should reload when relies file changed test is flaky

[sapphi-red]

This test has been failing many times.

vite-plugin-vue/playground/vue/__tests__/vue.spec.ts

Lines 209 to 218 in 388403f

	test('should reload when relies file changed', async () => {
	// rerender
	editFile('Hmr.vue', (code) => code.replace('HMR', 'HMR updated'))
	await untilUpdated(() => page.textContent('h2.hmr'), 'HMR updated')
	await untilUpdated(() => page.textContent('.hmr-number'), '100')
	// reload
	editFile('lib.js', (code) => code.replace('100', '200'))
	await untilUpdated(() => page.textContent('.hmr-number'), '200')
	})

• https://github.com/vitejs/vite-plugin-vue/actions/runs/12052203313/job/33604988317#step:11:32
• https://github.com/vitejs/vite-plugin-vue/actions/runs/12199830795/job/34034581034#step:11:38
• https://github.com/vitejs/vite-plugin-vue/actions/runs/12191628071/job/34010844060#step:11:39

[edison1105]

It was previously only unstable on windows, and running it again sometimes passed. I've tried to investigate, but there's no error on local. 😓

[sapphi-red]

I got the following output with this patch when the test failed.

patch

diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index eddcfff..b511c72 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -150,6 +150,7 @@ export async function transformMain(
     )
     output.push(
       `import.meta.hot.on('file-changed', ({ file }) => {`,
+      normalizePath(filename).endsWith('Hmr.vue') ? `  console.log('file-changed', file)` : '',
       `  __VUE_HMR_RUNTIME__.CHANGED_FILE = file`,
       `})`,
     )
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index 988efa7..0a5e872 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -207,14 +207,20 @@ describe('hmr', () => {
   })
 
   test('should reload when relies file changed', async () => {
-    // rerender
-    editFile('Hmr.vue', (code) => code.replace('HMR', 'HMR updated'))
-    await untilUpdated(() => page.textContent('h2.hmr'), 'HMR updated')
-    await untilUpdated(() => page.textContent('.hmr-number'), '100')
-
-    // reload
-    editFile('lib.js', (code) => code.replace('100', '200'))
-    await untilUpdated(() => page.textContent('.hmr-number'), '200')
+    browserLogs.length = 0
+    try {
+      // rerender
+      editFile('Hmr.vue', (code) => code.replace('HMR', 'HMR updated'))
+      await untilUpdated(() => page.textContent('h2.hmr'), 'HMR updated')
+      await untilUpdated(() => page.textContent('.hmr-number'), '100')
+
+      // reload
+      editFile('lib.js', (code) => code.replace('100', '200'))
+      await untilUpdated(() => page.textContent('.hmr-number'), '200')
+    } catch (e) {
+      console.log('browserLogs', browserLogs)
+      throw e
+    }
   })
 
   test('global hmr for some scenarios', async () => {

browserLogs [
  'file-changed D:/documents/GitHub/vite-plugin-vue/playground-temp/vue/lib.js',
  'file-changed D:/documents/GitHub/vite-plugin-vue/playground-temp/vue/lib.js',
  'file-changed D:/documents/GitHub/vite-plugin-vue/playground-temp/vue/Hmr.vue',
  'file-changed D:/documents/GitHub/vite-plugin-vue/playground-temp/vue/Hmr.vue',
  '[vite] hot updated: /Hmr.vue',
  '[vite] hot updated: /Hmr.vue'
]