.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
     - uses: actions/checkout@v4
     - name: Install pnpm
-      uses: pnpm/action-setup@v2.4.0
+      uses: pnpm/action-setup@v3.0.0
       with:
         version: 8.6.3
     - name: Use Node.js ${{ matrix.node }}

docs/fr/guide/advanced/teleport.md

@@ -188,6 +188,22 @@ test('teleport', async () => {
 });
 ```
 
+Vous pouvez remplacer teleport par un stub en utilisant `teleport: true`:
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar, {
+    global: {
+      stubs: {
+        teleport: true
+      }
+    }
+  })
+})
+```
+
 ## Conclusion
 
 - Créez une cible de téléportation avec `document.createElement`.

docs/fr/guide/advanced/vue-router.md

@@ -187,7 +187,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
 
 Les composants `<router-link>` et `<router-view>` ne sont pas trouvés. Nous devons installer Vue Router&nbsp;! Comme Vue Router est un plugin, nous l'installons en utilisant l'option de `mount`&nbsp;: `global.plugins`&nbsp;:
 
-```js {10,11,12}
+```js {12,13,14}
 import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router"; // Cet import devrait pointer vers votre fichier de configuration des routes.
@@ -218,7 +218,7 @@ Le `warning` n'est pas très explicite. En fait, cela est lié au fait que **Vue
 
 Vue Router fournit une fonction `isReady` qui nous informe lorsque le routeur est prêt. Nous pouvons alors l'`await` pour nous assurer que la navigation initiale a eu lieu.
 
-```js {11,12}
+```js {13,14}
 import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";
@@ -247,7 +247,7 @@ Le test passe enfin&nbsp;! Cela a été assez laborieux, mais désormais nous no
 
 Maintenant, allons sur `/posts` et assurons-nous que le routage fonctionne comme prévu&nbsp;:
 
-```js {19,20}
+```js {21,22}
 import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";
@@ -288,7 +288,7 @@ Une fois de plus, en raison de la nature asynchrone de Vue Router 4, nous devons
 
 Cependant, il n'y a pas de `hook` `hasNavigated` sur lequel nous pouvons `await`. Une alternative est d'utiliser la fonction `flushPromises` exportée de Vue Test Utils&nbsp;:
 
-```js {1,20}
+```js {1,22}
 import { mount, flushPromises } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";
@@ -317,7 +317,7 @@ test('routing', async () => {
 
 Cela passe. Super&nbsp;! Cependant, c'est très laborieux - et cela concerne une petite application triviale. C'est pour cette raison que l'utilisation d'un routeur simulé est une approche courante lors des tests de composants Vue avec Vue Test Utils. Si vous préférez continuer à utiliser un routeur réel, gardez à l'esprit que chaque test doit utiliser son propre instance du routeur de cette manière&nbsp;:
 
-```js {1,20}
+```js {1,22}
 import { mount, flushPromises } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import { routes } from "@/router";

docs/guide/advanced/teleport.md

@@ -187,6 +187,23 @@ test('teleport', async () => {
 })
 ```
 
+You can stub teleport by using `teleport: true`:
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar, {
+    global: {
+      stubs: {
+        teleport: true
+      }
+    }
+  })
+})
+```
+
 ## Conclusion
 
 - Create a teleport target with `document.createElement`.

docs/guide/advanced/vue-router.md

@@ -187,7 +187,7 @@ console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
 
 The `<router-link>` and `<router-view>` component are not found. We need to install Vue Router! Since Vue Router is a plugin, we install it using the `global.plugins` mounting option:
 
-```js {10,11,12}
+```js {12,13,14}
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router" // This import should point to your routes file declared above
@@ -218,7 +218,7 @@ Although it's not entirely clear from the warning, it's related to the fact that
 
 Vue Router provides an `isReady` function that tell us when router is ready. We can then `await` it to ensure the initial navigation has happened.
 
-```js {11,12}
+```js {13,14}
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"
@@ -247,7 +247,7 @@ The test is now passing! It was quite a bit of work, but now we make sure the ap
 
 Now let's navigate to `/posts` and make sure the routing is working as expected:
 
-```js {19,20}
+```js {21,22}
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"
@@ -288,7 +288,7 @@ Again, due to Vue Router 4's new asynchronous nature, we need to `await` the rou
 
 In this case, however, there is no _hasNavigated_ hook we can await on. One alternative is to use the `flushPromises` function exported from Vue Test Utils:
 
-```js {1,20}
+```js {1,22}
 import { mount, flushPromises } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"
@@ -317,7 +317,7 @@ test('routing', async () => {
 
 It _finally_ passes. Great! This is all very manual, however - and this is for a tiny, trivial app. This is the reason using a mocked router is a common approach when testing Vue components using Vue Test Utils. In case you prefer to keep using a real router, keep in mind that each test should use it's own instance of the router like so:
 
-```js {1,20}
+```js {1,19}
 import { mount, flushPromises } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from "@/router"

docs/migration/index.md

@@ -324,6 +324,12 @@ If you use snapshot testing and comment nodes are leaking into your snapshots, n
 
 This is table for those coming from VTU 1, comparing the two APIs.
 
+### Base API
+
+| export            | notes                                                                            |
+|-------------------|----------------------------------------------------------------------------------|
+| enableAutoDestroy | replaced by `enableAutoUnmount`                                                  |
+
 ### Mounting Options
 
 | option           | notes                                                                             |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/test-utils",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "license": "MIT",
   "main": "dist/vue-test-utils.cjs.js",
   "unpkg": "dist/vue-test-utils.browser.js",
@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "js-beautify": "^1.14.9",
-    "vue-component-type-helpers": "^1.8.21"
+    "vue-component-type-helpers": "^2.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "25.0.7",
@@ -33,47 +33,38 @@
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-typescript": "11.1.6",
     "@types/js-beautify": "1.14.3",
-    "@types/node": "20.11.6",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@types/node": "20.11.27",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
+    "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",
-    "@vitest/coverage-v8": "1.2.1",
-    "@vue/compat": "3.4.15",
-    "@vue/compiler-dom": "3.4.15",
-    "@vue/compiler-sfc": "3.4.15",
-    "@vue/server-renderer": "3.4.15",
-    "eslint": "8.56.0",
+    "@vitest/coverage-v8": "1.3.1",
+    "@vue/compat": "3.4.21",
+    "@vue/compiler-dom": "3.4.21",
+    "@vue/compiler-sfc": "3.4.21",
+    "@vue/server-renderer": "3.4.21",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
-    "husky": "9.0.1",
+    "husky": "9.0.11",
     "jsdom": "24.0.0",
     "jsdom-global": "3.0.2",
-    "lint-staged": "15.2.0",
-    "prettier": "3.2.4",
+    "lint-staged": "15.2.2",
+    "prettier": "3.2.5",
     "reflect-metadata": "0.2.1",
-    "rollup": "4.9.6",
+    "rollup": "4.13.0",
     "tslib": "2.6.2",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "unplugin-vue-components": "0.26.0",
-    "vite": "5.0.12",
-    "vitepress": "1.0.0-rc.40",
-    "vitest": "1.2.1",
-    "vue": "3.4.15",
+    "vite": "5.1.6",
+    "vitepress": "1.0.0-rc.45",
+    "vitest": "1.3.1",
+    "vue": "3.4.21",
     "vue-class-component": "8.0.0-rc.1",
-    "vue-router": "4.2.5",
-    "vue-tsc": "1.8.27",
+    "vue-router": "4.3.0",
+    "vue-tsc": "2.0.6",
     "vuex": "4.1.0"
   },
-  "peerDependencies": {
-    "@vue/server-renderer": "^3.0.1",
-    "vue": "^3.0.1"
-  },
-  "peerDependenciesMeta": {
-    "@vue/server-renderer": {
-      "optional": true
-    }
-  },
   "author": {
     "name": "Lachlan Miller",
     "email": "lachlan.miller.1990@outlook.com"
@@ -111,7 +102,7 @@
     "url": "git+https://github.com/vuejs/test-utils.git"
   },
   "homepage": "https://github.com/vuejs/test-utils",
-  "packageManager": "pnpm@8.14.3",
+  "packageManager": "pnpm@8.15.4",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

src/baseWrapper.ts

@@ -175,7 +175,12 @@ export default abstract class BaseWrapper<ElementType extends Node>
       matches(currentComponent.vnode, selector) &&
       this.element.contains(currentComponent.vnode.el as Node)
     ) {
-      return createVueWrapper(null, currentComponent.proxy!)
+      return createVueWrapper(
+        null,
+        currentComponent.subTree.component
+          ? currentComponent.subTree.component.proxy!
+          : currentComponent.proxy!
+      )
     }
 
     const [result] = this.findAllComponents(selector)

src/createInstance.ts

@@ -4,7 +4,6 @@ import {
   defineComponent,
   reactive,
   shallowReactive,
-  isRef,
   ref,
   AppConfig,
   ComponentOptions,
@@ -17,6 +16,7 @@ import { MountingOptions, Slot } from './types'
 import {
   getComponentsFromStubs,
   getDirectivesFromStubs,
+  isDeepRef,
   isFunctionalComponent,
   isObject,
   isObjectComponent,
@@ -174,7 +174,7 @@ export function createInstance(
     ...options?.props,
     ref: MOUNT_COMPONENT_REF
   }).forEach(([k, v]) => {
-    if (isRef(v)) {
+    if (isDeepRef(v)) {
       refs[k] = v
     } else {
       props[k] = v

src/types.ts

@@ -7,7 +7,8 @@ import {
   VNode,
   VNodeProps,
   FunctionalComponent,
-  ComponentInternalInstance
+  ComponentInternalInstance,
+  Ref
 } from 'vue'
 
 export interface RefSelector {
@@ -167,3 +168,12 @@ export type VueNode<T extends Node = Node> = T & {
 export type VueElement = VueNode<Element>
 
 export type DefinedComponent = new (...args: any[]) => any
+
+/**
+ * T is a DeepRef if:
+ * - It's a Ref itself
+ * - It's an array containing a ref at any level
+ * - It's an object containing a ref at any level
+ */
+export type DeepRef<T> =
+  T extends Ref<T> ? T : T extends object ? DeepRef<T> : Ref<T>

src/utils.ts

@@ -1,11 +1,12 @@
-import { GlobalMountOptions, RefSelector, Stub, Stubs } from './types'
+import { DeepRef, GlobalMountOptions, RefSelector, Stub, Stubs } from './types'
 import {
   Component,
   ComponentOptions,
   ComponentPublicInstance,
   ConcreteComponent,
   Directive,
-  FunctionalComponent
+  FunctionalComponent,
+  isRef
 } from 'vue'
 import { config } from './config'
 
@@ -252,3 +253,15 @@ export const getGlobalThis = (): any => {
               : {})
   )
 }
+
+/**
+ * Checks if the given value is a DeepRef.
+ *
+ * For both arrays and objects, it will recursively check
+ * if any of their values is a Ref.
+ *
+ * @param {DeepRef<T> | unknown} r - The value to check.
+ * @returns {boolean} Returns true if the value is a DeepRef, false otherwise.
+ */
+export const isDeepRef = <T>(r: DeepRef<T> | unknown): r is DeepRef<T> =>
+  isRef(r) || (isObject(r) && Object.values(r).some(isDeepRef))

tests/components/WithDeepRef.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="countValue">{{ countValue }}</div>
+  <div id="oneLayerCountObjectValue">{{ oneLayerCountObjectValue }}</div>
+  <div id="twoLayersCountObjectValue">{{ twoLayersCountObjectValue }}</div>
+  <div id="countArrayValue">{{ countArrayValue }}</div>
+  <div id="countMatrixValue">{{ countMatrixValue }}</div>
+  <div id="oneLayerCountObjectArrayValue">
+    {{ oneLayerCountObjectArrayValue }}
+  </div>
+  <div id="oneLayerCountArrayObjectValue">
+    {{ oneLayerCountArrayObjectValue }}
+  </div>
+  <div id="oneLayerCountObjectMatrixValue">
+    {{ oneLayerCountObjectMatrixValue }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, Ref } from 'vue'
+
+type Props = {
+  count: Ref<number>
+  oneLayerCountObject: { count: Ref<number> }
+  twoLayersCountObject: { oneLayerCountObject: { count: Ref<number> } }
+
+  countArray: Ref<number>[]
+  countMatrix: Ref<number>[][]
+
+  oneLayerCountObjectArray: { count: Ref<number> }[]
+  oneLayerCountArrayObject: { count: Ref<number>[] }
+  oneLayerCountObjectMatrix: { count: Ref<number> }[][]
+}
+
+const props = defineProps<Props>()
+const countValue = computed(() => props.count.value)
+const oneLayerCountObjectValue = computed(
+  () => props.oneLayerCountObject.count.value
+)
+const twoLayersCountObjectValue = computed(
+  () => props.twoLayersCountObject.oneLayerCountObject.count.value
+)
+
+const countArrayValue = computed(() => props.countArray[0].value)
+const countMatrixValue = computed(() => props.countMatrix[0][0].value)
+
+const oneLayerCountObjectArrayValue = computed(
+  () => props.oneLayerCountObjectArray[0].count.value
+)
+const oneLayerCountArrayObjectValue = computed(
+  () => props.oneLayerCountArrayObject.count[0].value
+)
+const oneLayerCountObjectMatrixValue = computed(
+  () => props.oneLayerCountObjectMatrix[0][0].count.value
+)
+</script>

tests/mount.spec.ts

@@ -1,7 +1,8 @@
 import { describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { mount } from '../src'
 import DefinePropsAndDefineEmits from './components/DefinePropsAndDefineEmits.vue'
+import WithDeepRef from './components/WithDeepRef.vue'
 import HelloFromVitestPlayground from './components/HelloFromVitestPlayground.vue'
 
 describe('mount: general tests', () => {
@@ -44,4 +45,29 @@ describe('mount: general tests', () => {
     expect(wrapper.get('div').text()).toContain('Hello')
     expect(wrapper.get('div').classes()).toContain('end')
   })
+  it('allows access to nested computed values', async () => {
+    const wrapper = mount(WithDeepRef, {
+      props: {
+        count: ref(1),
+        oneLayerCountObject: { count: ref(2) },
+        twoLayersCountObject: { oneLayerCountObject: { count: ref(3) } },
+
+        countArray: [ref(4)],
+        countMatrix: [[ref(5)]],
+
+        oneLayerCountObjectArray: [{ count: ref(6) }],
+        oneLayerCountArrayObject: { count: [ref(7)] },
+        oneLayerCountObjectMatrix: [[{ count: ref(8) }]]
+      }
+    })
+
+    expect(wrapper.get('#countValue').text()).toBe('1')
+    expect(wrapper.get('#oneLayerCountObjectValue').text()).toBe('2')
+    expect(wrapper.get('#twoLayersCountObjectValue').text()).toBe('3')
+    expect(wrapper.get('#countArrayValue').text()).toBe('4')
+    expect(wrapper.get('#countMatrixValue').text()).toBe('5')
+    expect(wrapper.get('#oneLayerCountObjectArrayValue').text()).toBe('6')
+    expect(wrapper.get('#oneLayerCountArrayObjectValue').text()).toBe('7')
+    expect(wrapper.get('#oneLayerCountObjectMatrixValue').text()).toBe('8')
+  })
 })

tests/props.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { mount, shallowMount } from '../src'
+import { mount, shallowMount, VueWrapper } from '../src'
 import WithProps from './components/WithProps.vue'
 import PropWithSymbol from './components/PropWithSymbol.vue'
 import Hello from './components/Hello.vue'
@@ -207,6 +207,31 @@ describe('props', () => {
     expect(wrapper.find('.selectedField').text()).toBe('Cities')
   })
 
+  it('returns props of stubbed root component', async () => {
+    const ChildComponent = defineComponent({
+      props: {
+        value: {
+          type: Number,
+          required: true
+        }
+      },
+      template: '<div>{{ value }}</div>'
+    })
+
+    const TestComponent = defineComponent({
+      components: { ChildComponent },
+      template: '<ChildComponent :value="2"/>'
+    })
+
+    const wrapper = shallowMount(TestComponent)
+    expect(
+      wrapper.findComponent({ name: 'ChildComponent' }).props()
+    ).toStrictEqual({ value: 2 })
+    expect(
+      (wrapper.findComponent('child-component-stub') as VueWrapper).props()
+    ).toStrictEqual({ value: 2 })
+  })
+
   it('returns reactive props on a stubbed component shallow case', async () => {
     const Foo = {
       name: 'Foo',
@@ -242,6 +267,7 @@ describe('props', () => {
       foo: 'new value'
     })
   })
+
   it('https://github.com/vuejs/test-utils/issues/440', async () => {
     const Foo = defineComponent({
       name: 'Foo',