wip(vitest-migration): runtime-core tests passing

Author: yyx990803

packages/runtime-core/__tests__/apiOptions.spec.ts

@@ -1,4 +1,7 @@
-import { vi } from 'vitest'
+/**
+ * @vitest-environment jsdom
+ */
+import { vi, type Mock } from 'vitest'
 import {
   h,
   nodeOps,
@@ -187,9 +190,9 @@ describe('api: options', () => {
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
 
-    function assertCall(spy: vi.Mock, callIndex: number, args: any[]) {
+    function assertCall(spy: Mock, callIndex: number, args: any[]) {
       expect(spy.mock.calls[callIndex].slice(0, 2)).toMatchObject(args)
-      expect(spy).toHaveReturnedWith(ctx)
+      expect(spy.mock.results[callIndex].value).toBe(ctx)
     }
 
     ctx.foo++
@@ -260,9 +263,9 @@ describe('api: options', () => {
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
 
-    function assertCall(spy: vi.Mock, callIndex: number, args: any[]) {
+    function assertCall(spy: Mock, callIndex: number, args: any[]) {
       expect(spy.mock.calls[callIndex].slice(0, 2)).toMatchObject(args)
-      expect(spy).toHaveReturnedWith(ctx)
+      expect(spy.mock.results[callIndex].value).toBe(ctx)
     }
 
     ctx.foo++

packages/runtime-core/__tests__/apiSetupHelpers.spec.ts

@@ -122,7 +122,7 @@ describe('SFC <script setup> helpers', () => {
     })
   })
 
-  describe('createPropsRestProxy', () => {
+  test('createPropsRestProxy', () => {
     const original = shallowReactive({
       foo: 1,
       bar: 2,

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -1020,7 +1020,7 @@ describe('api: watch', () => {
     createApp(Comp).mount(root)
 
     expect(instance).toBeDefined()
-    expect(source).toHaveBeenCalledWith(instance)
+    expect(source.mock.calls.some(args => args.includes(instance)))
   })
 
   test('should not leak `this.proxy` to setup()', () => {

packages/runtime-core/__tests__/componentProps.spec.ts

@@ -1,3 +1,6 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { vi } from 'vitest'
 import {
   ComponentInternalInstance,

packages/runtime-core/__tests__/componentPublicInstance.spec.ts

@@ -259,7 +259,7 @@ describe('component: proxy', () => {
     expect(instanceProxy.isDisplayed).toBe(true)
   })
 
-  test('allow jest spying on proxy methods with Object.defineProperty', () => {
+  test('allow test runner spying on proxy methods with Object.defineProperty', () => {
     // #5417
     let instanceProxy: any
     const Comp = {
@@ -305,16 +305,16 @@ describe('component: proxy', () => {
     instanceProxy.toggle()
     expect(getCalledTimes).toEqual(2)
 
-    // attaching jest spy, triggers the getter once, cache it and override the property.
+    // attaching spy, triggers the getter once, and override the property.
     // also uses Object.defineProperty
     const spy = vi.spyOn(instanceProxy, 'toggle')
     expect(getCalledTimes).toEqual(3)
 
-    // expect getter to not evaluate the jest spy caches its value
+    // vitest does not cache the spy like jest do
     const v3 = instanceProxy.toggle()
     expect(v3).toEqual('b')
     expect(spy).toHaveBeenCalled()
-    expect(getCalledTimes).toEqual(3)
+    expect(getCalledTimes).toEqual(4)
   })
 
   test('defineProperty on proxy property with value descriptor', () => {

packages/runtime-core/__tests__/components/BaseTransition.spec.ts

@@ -87,7 +87,7 @@ function assertCalls(
 }
 
 function assertCalledWithEl(fn: any, expected: string, callIndex = 0) {
-  expect(serialize((fn as vi.Mock).mock.calls[callIndex][0])).toBe(expected)
+  expect(serialize(fn.mock.calls[callIndex][0])).toBe(expected)
 }
 
 interface ToggleOptions {

packages/runtime-core/__tests__/components/Suspense.spec.ts

@@ -1,3 +1,6 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { vi } from 'vitest'
 import {
   h,

packages/runtime-core/__tests__/components/Teleport.spec.ts

@@ -1,3 +1,6 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { vi } from 'vitest'
 import {
   nodeOps,

packages/runtime-core/__tests__/helpers/withMemo.spec.ts

@@ -1,3 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 // since v-memo really is a compiler + runtime combo feature, we are performing
 // more of an integration test here.
 import { ComponentOptions, createApp, nextTick } from 'vue'

packages/runtime-core/__tests__/hydration.spec.ts

@@ -1,3 +1,6 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { vi } from 'vitest'
 import {
   createSSRApp,
@@ -287,7 +290,7 @@ describe('SSR hydration', () => {
 
     const teleportHtml = ctx.teleports!['#teleport2']
     expect(teleportHtml).toMatchInlineSnapshot(
-      `"<span>foo</span><span class="foo"></span><!--teleport anchor--><span>foo2</span><span class="foo2"></span><!--teleport anchor-->"`
+      '"<span>foo</span><span class=\\"foo\\"></span><!--teleport anchor--><span>foo2</span><span class=\\"foo2\\"></span><!--teleport anchor-->"'
     )
 
     teleportContainer.innerHTML = teleportHtml
@@ -324,7 +327,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(teleportContainer.innerHTML).toMatchInlineSnapshot(
-      `"<span>bar</span><span class="bar"></span><!--teleport anchor--><span>bar2</span><span class="bar2"></span><!--teleport anchor-->"`
+      '"<span>bar</span><span class=\\"bar\\"></span><!--teleport anchor--><span>bar2</span><span class=\\"bar2\\"></span><!--teleport anchor-->"'
     )
   })
 
@@ -347,7 +350,7 @@ describe('SSR hydration', () => {
     const ctx: SSRContext = {}
     const mainHtml = await renderToString(h(Comp), ctx)
     expect(mainHtml).toMatchInlineSnapshot(
-      `"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class="foo"></span><!--teleport end--><div class="foo2">bar</div><!--]-->"`
+      '"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class=\\"foo\\"></span><!--teleport end--><div class=\\"foo2\\">bar</div><!--]-->"'
     )
 
     const teleportHtml = ctx.teleports!['#teleport3']
@@ -386,7 +389,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class="bar"></span><!--teleport end--><div class="bar2">bar</div><!--]-->"`
+      '"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class=\\"bar\\"></span><!--teleport end--><div class=\\"bar2\\">bar</div><!--]-->"'
     )
   })
 

packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts

@@ -1,3 +1,6 @@
+/**
+ * @vitest-environment jsdom
+ */
 // using DOM renderer because this case is mostly DOM-specific
 import { vi } from 'vitest'
 import {
@@ -15,7 +18,7 @@ import {
   Fragment,
   withModifiers
 } from '@vue/runtime-dom'
-import { PatchFlags } from '@vue/shared/src'
+import { PatchFlags } from '@vue/shared'
 
 describe('attribute fallthrough', () => {
   it('should allow attrs to fallthrough', async () => {

packages/runtime-core/src/renderer.ts

@@ -271,7 +271,8 @@ export const enum MoveType {
 }
 
 export const queuePostRenderEffect = __FEATURE_SUSPENSE__
-  ? queueEffectWithSuspense
+  ? (fn: Function | Function[], suspense: SuspenseBoundary | null) =>
+      queueEffectWithSuspense(fn, suspense)
   : queuePostFlushCb
 
 /**