test: add test

Author: edison1105

playground/vue/Hmr.vue

@@ -3,6 +3,10 @@
   <p>Click the button then edit this message. The count should be preserved.</p>
   <button class="hmr-inc" @click="count++">count is {{ count }}</button>
   <span class="hmr-number">{{ number }}</span>
+  <div>
+    <span class="hmr-bar-text">bar-title</span>
+    <span class="hmr-bar">{{ bar }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +16,7 @@ import { test } from './lib.js'
 const number = test()
 
 let foo: number = 0
+let bar = 'bar'
 
 const count = ref(foo)
 </script>

playground/vue/__tests__/vue.spec.ts

@@ -221,6 +221,24 @@ describe('hmr', () => {
     await untilUpdated(() => page.textContent('.hmr-number'), '200')
   })
 
+  test('should reload when script changes after a rerender', async () => {
+    // rerender
+    editFile('Hmr.vue', (code) => code.replace('bar-title', 'bar-title1'))
+    await untilUpdated(() => page.textContent('h2.hmr'), 'bar-title1')
+
+    // change 'bar' to 'updated', should reload
+    editFile('Hmr.vue', (code) =>
+      code.replace(`let bar = 'bar'`, `let bar = 'updated'`),
+    )
+    await untilUpdated(() => page.textContent('.hmr-bar'), 'updated')
+
+    // change 'updated' to 'bar', should reload again not rerender
+    editFile('Hmr.vue', (code) =>
+      code.replace(`let bar = 'updated'`, `let bar = 'bar'`),
+    )
+    await untilUpdated(() => page.textContent('.hmr-bar'), 'bar')
+  })
+
   test('global hmr for some scenarios', async () => {
     editFile('Hmr.vue', (code) =>
       code.replace('</template>', '  <Node/>\n' + '</template>'),