diff --git a/docs/.vitepress/config/index.mts b/docs/.vitepress/config/index.mts
index 6965cc2eb..e3fe97898 100644
--- a/docs/.vitepress/config/index.mts
+++ b/docs/.vitepress/config/index.mts
@@ -1,5 +1,6 @@
 import { enConfig } from './en.mts'
 import { frConfig } from './fr.mts'
+import { zhConfig } from './zh.mts'
 import { sharedConfig } from './shared.mts'
 import { defineConfig } from 'vitepress'
 
@@ -8,6 +9,7 @@ export default defineConfig({
 
   locales: {
     root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
-    fr: { label: 'Français',  lang: 'fr-FR', link: '/fr/', ...frConfig },
+    fr: { label: 'Français', lang: 'fr-FR', link: '/fr/', ...frConfig },
+    zh: { label: '简体中文 (校对中)', lang: 'zh-CN', link: '/zh/', ...zhConfig }
   }
 })
diff --git a/docs/.vitepress/config/zh.mts b/docs/.vitepress/config/zh.mts
new file mode 100644
index 000000000..3e3b0d194
--- /dev/null
+++ b/docs/.vitepress/config/zh.mts
@@ -0,0 +1,154 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const META_URL = ''
+export const META_TITLE = 'Vue Test Utils'
+export const META_DESCRIPTION = 'Vue.js 3 官方测试工具集'
+
+export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  description: META_DESCRIPTION,
+  head: [
+    ['meta', { property: 'og:url', content: META_URL }],
+    ['meta', { property: 'og:title', content: META_TITLE }],
+    ['meta', { property: 'og:description', content: META_DESCRIPTION }],
+    ['meta', { property: 'twitter:url', content: META_URL }],
+    ['meta', { property: 'twitter:title', content: META_TITLE }],
+    ['meta', { property: 'twitter:description', content: META_DESCRIPTION }]
+  ],
+
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/vuejs/test-utils/edit/main/docs/:path',
+      text: '改进此页面的内容'
+    },
+
+    nav: [
+      { text: '指南', link: '/zh/guide/' },
+      { text: 'API 参考', link: '/zh/api/' },
+      { text: '从 Vue 2 迁移', link: '/zh/migration/' },
+      {
+        text: '更新日志',
+        link: 'https://github.com/vuejs/test-utils/releases'
+      }
+    ],
+
+    sidebar: {
+      '/zh': [
+        {
+          text: '安装',
+          link: '/zh/installation/'
+        },
+        {
+          text: '基础知识',
+          items: [
+            {
+              text: '开始',
+              link: '/zh/guide/'
+            },
+            {
+              text: '快速上手',
+              link: '/zh/guide/essentials/a-crash-course'
+            },
+            {
+              text: '条件渲染',
+              link: '/zh/guide/essentials/conditional-rendering'
+            },
+            {
+              text: '测试事件触发',
+              link: '/zh/guide/essentials/event-handling'
+            },
+            {
+              text: '测试表单',
+              link: '/zh/guide/essentials/forms'
+            },
+            {
+              text: '传递数据到组件',
+              link: '/zh/guide/essentials/passing-data'
+            },
+            {
+              text: '编写易于测试的组件',
+              link: '/zh/guide/essentials/easy-to-test'
+            }
+          ]
+        },
+        {
+          text: '深入学习 Vue Test Utils',
+          items: [
+            {
+              text: '插槽',
+              link: '/zh/guide/advanced/slots'
+            },
+            {
+              text: '异步行为',
+              link: '/zh/guide/advanced/async-suspense'
+            },
+            {
+              text: '发起 HTTP 请求',
+              link: '/zh/guide/advanced/http-requests'
+            },
+            {
+              text: '过渡效果',
+              link: '/zh/guide/advanced/transitions'
+            },
+            {
+              text: '组件实例',
+              link: '/zh/guide/advanced/component-instance'
+            },
+            {
+              text: '复用与组合',
+              link: '/zh/guide/advanced/reusability-composition'
+            },
+            {
+              text: '测试 v-model',
+              link: '/zh/guide/advanced/v-model'
+            },
+            {
+              text: '测试 Vuex',
+              link: '/zh/guide/advanced/vuex'
+            },
+            {
+              text: '测试 Vue Router',
+              link: '/zh/guide/advanced/vue-router'
+            },
+            {
+              text: '测试 Teleport',
+              link: '/zh/guide/advanced/teleport'
+            },
+            {
+              text: 'Stubs 和浅挂载',
+              link: '/zh/guide/advanced/stubs-shallow-mount'
+            },
+            {
+              text: '测试服务端渲染',
+              link: '/zh/guide/advanced/ssr'
+            }
+          ]
+        },
+        {
+          text: '扩展 Vue Test Utils',
+          items: [
+            {
+              text: '插件',
+              link: '/zh/guide/extending-vtu/plugins'
+            },
+            {
+              text: '社区与学习资源',
+              link: '/zh/guide/extending-vtu/community-learning'
+            }
+          ]
+        },
+        {
+          text: '常见问题',
+          link: '/zh/guide/faq/'
+        },
+        {
+          text: '从 Vue 2 迁移',
+          link: '/zh/migration/'
+        },
+        {
+          text: 'API 参考',
+          link: '/zh/api/'
+        }
+      ]
+    }
+  }
+}
diff --git a/docs/.vitepress/theme/index.mts b/docs/.vitepress/theme/index.mts
index a7e01c7bb..30162d817 100644
--- a/docs/.vitepress/theme/index.mts
+++ b/docs/.vitepress/theme/index.mts
@@ -5,6 +5,7 @@ import status from '../translation-status.json'
 import './custom.css'
 const i18nLabels = {
   fr: 'La traduction est synchronisée avec les docs du ${date} dont le hash du commit est <code>${hash}</code>.',
+  zh: '该翻译已同步到了 ${date} 的版本，其对应的 commit hash 是 <code>${hash}</code>。<br /><mark>同时该文档仍处于校对中，如有任何疑问或想参与校对工作，请<a href="https://github.com/vuejs/test-utils/issues/2561" target="_blank" style="font-weight: bold; text-decoration: underline;">移步这里</a>了解更多。</mark>'
 }
 
 
diff --git a/docs/.vitepress/translation-status.json b/docs/.vitepress/translation-status.json
index 5a191a06c..b7a6d4c97 100644
--- a/docs/.vitepress/translation-status.json
+++ b/docs/.vitepress/translation-status.json
@@ -2,5 +2,9 @@
   "fr": {
     "hash": "644917a",
     "date": "2024-05-28"
+  },
+  "zh": {
+    "hash": "7c55128",
+    "date": "2024-11-28"
   }
 }
\ No newline at end of file
diff --git a/docs/zh/api/index.md b/docs/zh/api/index.md
new file mode 100644
index 000000000..93337218a
--- /dev/null
+++ b/docs/zh/api/index.md
@@ -0,0 +1,2037 @@
+---
+sidebar: auto
+---
+
+# API 参考
+
+## mount
+
+创建一个包含已挂载和渲染的 Vue 组件的 Wrapper 以进行测试。
+请注意，当使用 Vitest 模拟日期/计时器时，必须在 `vi.setSystemTime` 之后调用此方法。
+
+**签名：**
+
+```ts
+interface MountingOptions<Props, Data = {}> {
+  attachTo?: Element | string
+  attrs?: Record<string, unknown>
+  data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
+  props?: (RawProps & Props) | ({} extends Props ? null : never)
+  slots?: { [key: string]: Slot } & { default?: Slot }
+  global?: GlobalMountOptions
+  shallow?: boolean
+}
+
+function mount(Component, options?: MountingOptions): VueWrapper
+```
+
+**详细信息：**
+
+`mount` 是 Vue Test Utils 提供的主要方法。它创建一个 Vue 3 应用程序，该应用程序持有并渲染正在测试的组件。作为返回，它创建一个 Wrapper 以对组件进行操作和断言。
+
+```js
+import { mount } from '@vue/test-utils'
+
+const Component = {
+  template: '<div>Hello world</div>'
+}
+
+test('mounts a component', () => {
+  const wrapper = mount(Component, {})
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+注意 `mount` 接受第二个参数以定义组件的状态配置。
+
+**示例：使用组件属性和 Vue 应用插件进行挂载**
+
+```js
+const wrapper = mount(Component, {
+  props: {
+    msg: 'world'
+  },
+  global: {
+    plugins: [vuex]
+  }
+})
+```
+
+#### options.global
+
+组件状态中，你可以通过 [`MountingOptions.global` 配置属性](#global)配置上述 Vue 3 应用程序。这对于提供组件期望可用的模拟值非常有用。
+
+::: tip
+如果你发现自己需要为许多测试设置共同的应用配置，则可以使用导出的 [`config` 对象](#config)为整个测试套件设置配置。
+:::
+
+### attachTo
+
+指定要挂载组件的节点。当使用 `renderToString` 时，此选项不可用。
+
+**签名：**
+
+```ts
+attachTo?: Element | string
+```
+
+**详细信息：**
+
+可以是有效的 CSS 选择器，或者是连接到文档的 [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element)。
+
+注意，组件是附加到节点上的，并不会替换节点的整个内容。如果在多个测试中将组件挂载到同一个节点上，请确保在每个测试后调用 `wrapper.unmount()` 以卸载它，这将从节点中移除渲染的元素。
+
+`Component.vue`:
+
+```vue
+<template>
+  <p>Vue Component</p>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+document.body.innerHTML = `
+  <div>
+    <h1>Non Vue app</h1>
+    <div id="app"></div>
+  </div>
+`
+
+test('mounts on a specific element', () => {
+  const wrapper = mount(Component, {
+    attachTo: document.getElementById('app')
+  })
+
+  expect(document.body.innerHTML).toBe(`
+  <div>
+    <h1>Non Vue app</h1>
+    <div id="app"><div data-v-app=""><p>Vue Component</p></div></div>
+  </div>
+`)
+})
+```
+
+### attrs
+
+为组件设置 HTML 属性。
+
+**签名：**
+
+```ts
+attrs?: Record<string, unknown>
+```
+
+**详细信息：**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('attrs', () => {
+  const wrapper = mount(Component, {
+    attrs: {
+      id: 'hello',
+      disabled: true
+    }
+  })
+
+  expect(wrapper.attributes()).toEqual({
+    disabled: 'true',
+    id: 'hello'
+  })
+})
+```
+
+请注意，已定义的属性会覆盖 HTML 属性的设置：
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('attribute is overridden by a prop with the same name', () => {
+  const wrapper = mount(Component, {
+    props: {
+      message: 'Hello World'
+    },
+    attrs: {
+      message: 'this will get overridden'
+    }
+  })
+
+  expect(wrapper.props()).toEqual({ message: 'Hello World' })
+  expect(wrapper.attributes()).toEqual({})
+})
+```
+
+### data
+
+覆盖组件的默认 `data`。必须是一个函数。
+
+**签名：**
+
+```ts
+data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
+```
+
+**详细信息：**
+
+`Component.vue`
+
+```vue
+<template>
+  <div>Hello {{ message }}</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: 'everyone'
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('data', () => {
+  const wrapper = mount(Component, {
+    data() {
+      return {
+        message: 'world'
+      }
+    }
+  })
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+### props
+
+在组件挂载时设置 props。
+
+**签名：**
+
+```ts
+props?: (RawProps & Props) | ({} extends Props ? null : never)
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Count: {{ count }}</span>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Number,
+      required: true
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('props', () => {
+  const wrapper = mount(Component, {
+    props: {
+      count: 5
+    }
+  })
+
+  expect(wrapper.html()).toContain('Count: 5')
+})
+```
+
+### slots
+
+为组件的插槽设置值。
+
+**签名：**
+
+```ts
+type Slot = VNode | string | { render: Function } | Function | Component
+
+slots?: { [key: string]: Slot } & { default?: Slot }
+```
+
+**详细信息：**
+
+插槽可以是一个字符串或任何有效的组件定义，既可以从 `.vue` 文件中导入，也可以内联提供。
+
+`Component.vue`:
+
+```vue
+<template>
+  <slot name="first" />
+  <slot />
+  <slot name="second" />
+</template>
+```
+
+`Bar.vue`:
+
+```vue
+<template>
+  <div>Bar</div>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+import Bar from './Bar.vue'
+
+test('renders slots content', () => {
+  const wrapper = mount(Component, {
+    slots: {
+      default: 'Default',
+      first: h('h1', {}, 'Named Slot'),
+      second: Bar
+    }
+  })
+
+  expect(wrapper.html()).toBe('<h1>Named Slot</h1>Default<div>Bar</div>')
+})
+```
+
+### global
+
+**签名：**
+
+```ts
+type GlobalMountOptions = {
+  plugins?: (Plugin | [Plugin, ...any[]])[]
+  config?: Partial<Omit<AppConfig, 'isNativeTag'>>
+  mixins?: ComponentOptions[]
+  mocks?: Record<string, any>
+  provide?: Record<any, any>
+  components?: Record<string, Component | object>
+  directives?: Record<string, Directive>
+  stubs?: Stubs = Record<string, boolean | Component> | Array<string>
+  renderStubDefaultSlot?: boolean
+}
+```
+
+你可以在每个测试基础上以及整个测试套件中配置所有 `global` 选项。[请参见此处以了解如何配置项目范围的默认值](#config-global)。
+
+#### global.components
+
+将组件全局注册到挂载的组件中。
+
+**签名：**
+
+```ts
+components?: Record<string, Component | object>
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>
+    <global-component />
+  </div>
+</template>
+
+<script>
+import GlobalComponent from '@/components/GlobalComponent'
+
+export default {
+  components: {
+    GlobalComponent
+  }
+}
+</script>
+```
+
+`GlobalComponent.vue`:
+
+```vue
+<template>
+  <div class="global-component">My Global Component</div>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import GlobalComponent from '@/components/GlobalComponent'
+import Component from './Component.vue'
+
+test('global.components', () => {
+  const wrapper = mount(Component, {
+    global: {
+      components: {
+        GlobalComponent
+      }
+    }
+  })
+
+  expect(wrapper.find('.global-component').exists()).toBe(true)
+})
+```
+
+#### global.config
+
+配置 [Vue 的应用程序全局配置](https://v3.vuejs.org/api/application-config.html#application-config)。
+
+**签名：**
+
+```ts
+config?: Partial<Omit<AppConfig, 'isNativeTag'>>
+```
+
+#### global.directives
+
+将[指令](https://v3.vuejs.org/api/directives.html#directives)全局注册到挂载的组件中。
+
+**签名：**
+
+```ts
+directives?: Record<string, Directive>
+```
+
+**详细信息：**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+
+import Directive from '@/directives/Directive'
+
+const Component = {
+  template: '<div v-bar>Foo</div>'
+}
+
+test('global.directives', () => {
+  const wrapper = mount(Component, {
+    global: {
+      directives: {
+        Bar: Directive // Bar matches v-bar
+      }
+    }
+  })
+})
+```
+
+#### global.mixins
+
+将[混入](https://v3.vuejs.org/guide/mixins.html)全局注册到挂载的组件中。
+
+**签名：**
+
+```ts
+mixins?: ComponentOptions[]
+```
+
+**详细信息：**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.mixins', () => {
+  const wrapper = mount(Component, {
+    global: {
+      mixins: [mixin]
+    }
+  })
+})
+```
+
+#### global.mocks
+
+模拟全局实例属性。可用于模拟 `this.$store`、`this.$router` 等。
+
+**签名：**
+
+```ts
+mocks?: Record<string, any>
+```
+
+**详细信息：**
+
+::: warning
+此功能旨在模拟由第三方插件注入的变量，而不是 Vue 的原生属性，如 $root、$children 等。
+:::
+
+`Component.vue`:
+
+```vue
+<template>
+  <button @click="onClick" />
+</template>
+
+<script>
+export default {
+  methods: {
+    onClick() {
+      this.$store.dispatch('click')
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.mocks', async () => {
+  const $store = {
+    dispatch: jest.fn()
+  }
+
+  const wrapper = mount(Component, {
+    global: {
+      mocks: {
+        $store
+      }
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect($store.dispatch).toHaveBeenCalledWith('click')
+})
+```
+
+#### global.plugins
+
+在挂载的组件上安装插件。
+
+**签名：**
+
+```ts
+plugins?: (Plugin | [Plugin, ...any[]])[]
+```
+
+**详细信息：**
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+import myPlugin from '@/plugins/myPlugin'
+
+test('global.plugins', () => {
+  mount(Component, {
+    global: {
+      plugins: [myPlugin]
+    }
+  })
+})
+```
+
+要使用带选项的插件，可以传递选项数组。
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.plugins with options', () => {
+  mount(Component, {
+    global: {
+      plugins: [Plugin, [PluginWithOptions, 'argument 1', 'another argument']]
+    }
+  })
+})
+```
+
+#### global.provide
+
+提供数据，以便在 `setup` 函数中通过 `inject` 接收。
+
+**签名：**
+
+```ts
+provide?: Record<any, any>
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>Theme is {{ theme }}</div>
+</template>
+
+<script>
+import { inject } from 'vue'
+
+export default {
+  setup() {
+    const theme = inject('Theme')
+    return {
+      theme
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.provide', () => {
+  const wrapper = mount(Component, {
+    global: {
+      provide: {
+        Theme: 'dark'
+      }
+    }
+  })
+
+  console.log(wrapper.html()) //=> <div>Theme is dark</div>
+})
+```
+
+如果你使用 ES6 `Symbol` 作为提供键，可以将其用作动态键：
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+const ThemeSymbol = Symbol()
+
+mount(Component, {
+  global: {
+    provide: {
+      [ThemeSymbol]: 'value'
+    }
+  }
+})
+```
+
+#### global.renderStubDefaultSlot
+
+即使在使用 `shallow` 或 `shallowMount` 时，也会渲染 `default` 插槽内容。
+
+**签名：**
+
+```ts
+renderStubDefaultSlot?: boolean
+```
+
+**详细信息：**
+
+默认为 **false**。
+
+`Component.vue`
+
+```vue
+<template>
+  <slot />
+  <another-component />
+</template>
+
+<script>
+export default {
+  components: {
+    AnotherComponent
+  }
+}
+</script>
+```
+
+`AnotherComponent.vue`
+
+```vue
+<template>
+  <p>Another component content</p>
+</template>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.renderStubDefaultSlot', () => {
+  const wrapper = mount(ComponentWithSlots, {
+    slots: {
+      default: '<div>My slot content</div>'
+    },
+    shallow: true,
+    global: {
+      renderStubDefaultSlot: true
+    }
+  })
+
+  expect(wrapper.html()).toBe(
+    '<div>My slot content</div><another-component-stub></another-component-stub>'
+  )
+})
+```
+
+由于技术限制，**此行为无法扩展到除默认插槽之外的其他插槽**。
+
+#### global.stubs
+
+在挂载的组件上使用全局替代组件 (stub)。
+
+**签名：**
+
+```ts
+stubs?: Record<any, any>
+```
+
+**详细信息：**
+
+默认情况下，`Transition` 和 `TransitionGroup` 组件会被自动 stub 掉。
+
+`Component.vue`:
+
+```vue
+<template>
+  <div><foo /></div>
+</template>
+
+<script>
+import Foo from '@/Foo.vue'
+
+export default {
+  components: { Foo }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('global.stubs using array syntax', () => {
+  const wrapper = mount(Component, {
+    global: {
+      stubs: ['Foo']
+    }
+  })
+
+  expect(wrapper.html()).toEqual('<div><foo-stub></div>')
+})
+
+test('global.stubs using object syntax', () => {
+  const wrapper = mount(Component, {
+    global: {
+      stubs: { Foo: true }
+    }
+  })
+
+  expect(wrapper.html()).toEqual('<div><foo-stub></div>')
+})
+
+test('global.stubs using a custom component', () => {
+  const CustomStub = {
+    name: 'CustomStub',
+    template: '<p>custom stub content</p>'
+  }
+
+  const wrapper = mount(Component, {
+    global: {
+      stubs: { Foo: CustomStub }
+    }
+  })
+
+  expect(wrapper.html()).toEqual('<div><p>custom stub content</p></div>')
+})
+```
+
+### shallow
+
+组件的所有子组件替换为 stub。
+
+**签名：**
+
+```ts
+shallow?: boolean
+```
+
+**详细信息：**
+
+默认为 **false**。
+
+`Component.vue`
+
+```vue
+<template>
+  <a-component />
+  <another-component />
+</template>
+
+<script>
+export default {
+  components: {
+    AComponent,
+    AnotherComponent
+  }
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('shallow', () => {
+  const wrapper = mount(Component, { shallow: true })
+
+  expect(wrapper.html()).toEqual(
+    `<a-component-stub></a-component-stub><another-component-stub></another-component-stub>`
+  )
+})
+```
+
+::: tip
+`shallowMount()` 是使用 `shallow: true` 挂载组件的别名。
+:::
+
+## Wrapper methods
+
+当你使用 `mount` 时，会返回一个 `VueWrapper`，它包含了一些用于测试的有用方法。`VueWrapper` 是对你的组件实例的一个轻量级包装。
+
+请注意，像 `find` 这样的函数返回一个 `DOMWrapper`，它是对你组件及其子组件中的 DOM 节点的一个轻量级包装。两者都实现了类似的 API。
+
+### attributes
+
+返回 DOM 节点上的属性。
+
+**签名：**
+
+```ts
+attributes(): { [key: string]: string }
+attributes(key: string): string
+attributes(key?: string): { [key: string]: string } | string
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div id="foo" :class="className" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      className: 'bar'
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('attributes', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.attributes('id')).toBe('foo')
+  expect(wrapper.attributes('class')).toBe('bar')
+})
+```
+
+### classes
+
+**签名：**
+
+```ts
+classes(): string[]
+classes(className: string): boolean
+classes(className?: string): string[] | boolean
+```
+
+**详细信息：**
+
+返回元素上的类名数组。
+
+`Component.vue`:
+
+```vue
+<template>
+  <span class="my-span" />
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('classes', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.classes()).toContain('my-span')
+  expect(wrapper.classes('my-span')).toBe(true)
+  expect(wrapper.classes('not-existing')).toBe(false)
+})
+```
+
+### emitted
+
+返回组件发出的所有事件。
+
+**签名：**
+
+```ts
+emitted<T = unknown>(): Record<string, T[]>
+emitted<T = unknown>(eventName: string): undefined | T[]
+emitted<T = unknown>(eventName?: string): undefined | T[] | Record<string, T[]>
+```
+
+**详细信息：**
+
+参数被存储在一个数组中，因此你可以验证每个事件发出时的参数。
+
+`Component.vue`:
+
+```vue
+<script>
+export default {
+  created() {
+    this.$emit('greet', 'hello')
+    this.$emit('greet', 'goodbye')
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('emitted', () => {
+  const wrapper = mount(Component)
+
+  // wrapper.emitted() equals to { greet: [ ['hello'], ['goodbye'] ] }
+
+  expect(wrapper.emitted()).toHaveProperty('greet')
+  expect(wrapper.emitted().greet).toHaveLength(2)
+  expect(wrapper.emitted().greet[0]).toEqual(['hello'])
+  expect(wrapper.emitted().greet[1]).toEqual(['goodbye'])
+})
+```
+
+### exists
+
+验证一个元素是否存在。
+
+**签名：**
+
+```ts
+exists(): boolean
+```
+
+**详细信息：**
+
+你可以使用与 `querySelector` 实现相同的语法。
+
+`Component.vue`:
+
+```vue
+<template>
+  <span />
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('exists', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.find('span').exists()).toBe(true)
+  expect(wrapper.find('p').exists()).toBe(false)
+})
+```
+
+### find
+
+查找一个元素，如果找到则返回一个 `DOMWrapper`。
+
+**签名：**
+
+```ts
+find<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>
+find<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>
+find<T extends Element>(selector: string): DOMWrapper<T>
+find(selector: string): DOMWrapper<Element>
+find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;
+```
+
+**详细信息：**
+
+你可以使用与 `querySelector` 相同的语法。`find` 基本上是 `querySelector` 的别名。此外，你还可以搜索元素引用。
+
+它与 `get` 类似，但如果未找到元素，`find` 将返回一个 ErrorWrapper，而 [`get`](#get) 会抛出一个错误。
+
+根据经验，当你断言某个元素不存在时，请始终使用 `find`。如果你断言某个元素确实存在，请使用 [`get`](#get)。
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Span</span>
+  <span data-test="span">Span</span>
+  <span ref="span">Span</span>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('find', () => {
+  const wrapper = mount(Component)
+
+  wrapper.find('span') //=> found; returns DOMWrapper
+  wrapper.find('[data-test="span"]') //=> found; returns DOMWrapper
+  wrapper.find({ ref: 'span' }) //=> found; returns DOMWrapper
+  wrapper.find('p') //=> nothing found; returns ErrorWrapper
+})
+```
+
+### findAll
+
+与 `find` 类似，但返回的是一个 `DOMWrapper` 数组。
+
+**签名：**
+
+```ts
+findAll<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>[]
+findAll<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>[]
+findAll<T extends Element>(selector: string): DOMWrapper<T>[]
+findAll(selector: string): DOMWrapper<Element>[]
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <span v-for="number in [1, 2, 3]" :key="number" data-test="number">
+    {{ number }}
+  </span>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import BaseTable from './BaseTable.vue'
+
+test('findAll', () => {
+  const wrapper = mount(BaseTable)
+
+  // .findAll() returns an array of DOMWrappers
+  const thirdRow = wrapper.findAll('span')[2]
+})
+```
+
+### findComponent
+
+找到一个 Vue 组件实例并返回一个 `VueWrapper` (如果找到)。否则返回 `ErrorWrapper`。
+
+**签名：**
+
+```ts
+findComponent<T extends never>(selector: string): WrapperLike
+findComponent<T extends DefinedComponent>(selector: T | Exclude<FindComponentSelector, FunctionalComponent>): VueWrapper<InstanceType<T>>
+findComponent<T extends FunctionalComponent>(selector: T | string): DOMWrapper<Element>
+findComponent<T extends never>(selector: NameSelector | RefSelector): VueWrapper
+findComponent<T extends ComponentPublicInstance>(selector: T | FindComponentSelector): VueWrapper<T>
+findComponent(selector: FindComponentSelector): WrapperLike
+```
+
+**详细信息：**
+
+`findComponent` 支持几种语法：
+
+| 语法            | 示例                          | 详情                                       |
+| --------------- | ----------------------------- | ------------------------------------------ |
+| querySelector   | `findComponent('.component')` | 匹配标准查询选择器。                       |
+| 组件名称        | `findComponent({name: 'a'})`  | 匹配 PascalCase、snake-case 和 camelCase。 |
+| 组件引用        | `findComponent({ref: 'ref'})` | 仅可用于已挂载组件的直接引用子组件。       |
+| 单文件组件(SFC) | `findComponent(Component)`    | 直接传入导入的组件。                       |
+
+`Foo.vue`
+
+```vue
+<template>
+  <div class="foo">Foo</div>
+</template>
+
+<script>
+export default {
+  name: 'Foo'
+}
+</script>
+```
+
+`Component.vue`:
+
+```vue
+<template>
+  <Foo data-test="foo" ref="foo" class="foo" />
+</template>
+
+<script>
+import Foo from '@/Foo'
+
+export default {
+  components: { Foo }
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+import Foo from '@/Foo.vue'
+
+test('findComponent', () => {
+  const wrapper = mount(Component)
+
+  // All the following queries would return a VueWrapper
+
+  wrapper.findComponent('.foo')
+  wrapper.findComponent('[data-test="foo"]')
+
+  wrapper.findComponent({ name: 'Foo' })
+
+  wrapper.findComponent({ ref: 'foo' })
+
+  wrapper.findComponent(Foo)
+})
+```
+
+:::warning
+如果组件中的 `ref` 指向 HTML 元素，`findComponent` 将返回一个空的包装器。这是预期的行为。
+:::
+
+:::warning 使用 CSS 选择器时的注意事项
+使用 `findComponent` 和 CSS 选择器可能会导致混淆的行为。
+
+考虑以下示例：
+
+```js
+const ChildComponent = {
+  name: 'Child',
+  template: '<div class="child"></div>'
+}
+const RootComponent = {
+  name: 'Root',
+  components: { ChildComponent },
+  template: '<child-component class="root" />'
+}
+const wrapper = mount(RootComponent)
+const rootByCss = wrapper.findComponent('.root') // => finds Root
+expect(rootByCss.vm.$options.name).toBe('Root')
+const childByCss = wrapper.findComponent('.child')
+expect(childByCss.vm.$options.name).toBe('Root') // => still Root
+```
+
+这种行为的原因是 `RootComponent` 和 `ChildComponent` 共享相同的 DOM 节点，并且每个唯一的 DOM 节点只包含第一个匹配的组件。
+:::
+
+:::info 使用 CSS 选择器时的 WrapperLike 类型
+例如，当使用 `wrapper.findComponent('.foo')` 时，VTU 将返回 `WrapperLike` 类型。这是因为功能组件需要一个 `DOMWrapper`，否则返回的是 `VueWrapper`。你可以通过提供正确的组件类型来强制返回 `VueWrapper`：
+
+```typescript
+wrapper.findComponent('.foo') // returns WrapperLike
+wrapper.findComponent<typeof FooComponent>('.foo') // returns VueWrapper
+wrapper.findComponent<DefineComponent>('.foo') // returns VueWrapper
+```
+
+:::
+
+### findAllComponents
+
+**签名：**
+
+```ts
+findAllComponents<T extends never>(selector: string): WrapperLike[]
+findAllComponents<T extends DefinedComponent>(selector: T | Exclude<FindAllComponentsSelector, FunctionalComponent>): VueWrapper<InstanceType<T>>[]
+findAllComponents<T extends FunctionalComponent>(selector: string): DOMWrapper<Element>[]
+findAllComponents<T extends FunctionalComponent>(selector: T): DOMWrapper<Node>[]
+findAllComponents<T extends never>(selector: NameSelector): VueWrapper[]
+findAllComponents<T extends ComponentPublicInstance>(selector: T | FindAllComponentsSelector): VueWrapper<T>[]
+findAllComponents(selector: FindAllComponentsSelector): WrapperLike[]
+```
+
+**详细信息：**
+
+与 `findComponent` 类似，但查找所有匹配查询的 Vue 组件实例。返回一个 `VueWrapper` 数组。
+
+:::warning
+`ref` 语法在 `findAllComponents` 中不支持。所有其他查询语法都是有效的。
+:::
+
+`Component.vue`:
+
+```vue
+<template>
+  <FooComponent v-for="number in [1, 2, 3]" :key="number" data-test="number">
+    {{ number }}
+  </FooComponent>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('findAllComponents', () => {
+  const wrapper = mount(Component)
+
+  // Returns an array of VueWrapper
+  wrapper.findAllComponents('[data-test="number"]')
+})
+```
+
+:::warning 使用 CSS 选择器
+`findAllComponents` 在使用 CSS 选择器时具有与 [findComponent](#findcomponent) 相同的行为。
+:::
+
+### get
+
+获取一个元素，如果找到则返回一个 `DOMWrapper`，否则抛出错误。
+
+**签名：**
+
+```ts
+get<K extends keyof HTMLElementTagNameMap>(selector: K): Omit<DOMWrapper<HTMLElementTagNameMap[K]>, 'exists'>
+get<K extends keyof SVGElementTagNameMap>(selector: K): Omit<DOMWrapper<SVGElementTagNameMap[K]>, 'exists'>
+get<T extends Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>
+get(selector: string): Omit<DOMWrapper<Element>, 'exists'>
+```
+
+**详细信息：**
+
+它与 `find` 类似，但如果未找到元素，`get` 会抛出错误，而 [`find`](#find) 会返回一个 ErrorWrapper。
+
+根据经验，除非你断言某个元素不存在 (使用 [`find`](#find))，否则请始终使用 `get`。
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Span</span>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('get', () => {
+  const wrapper = mount(Component)
+
+  wrapper.get('span') //=> found; returns DOMWrapper
+
+  expect(() => wrapper.get('.not-there')).toThrowError()
+})
+```
+
+### getComponent
+
+获取 Vue 组件实例，如果找到则返回一个 `VueWrapper`，否则抛出错误。
+
+**签名：**
+
+```ts
+getComponent<T extends ComponentPublicInstance>(selector: new () => T): Omit<VueWrapper<T>, 'exists'>
+getComponent<T extends ComponentPublicInstance>(selector: { name: string } | { ref: string } | string): Omit<VueWrapper<T>, 'exists'>
+getComponent<T extends ComponentPublicInstance>(selector: any): Omit<VueWrapper<T>, 'exists'>
+```
+
+**详细信息：**
+
+它与 `findComponent` 类似，但如果未找到 Vue 组件实例，`getComponent` 会抛出错误，而 [`findComponent`](#findComponent) 会返回一个 ErrorWrapper。
+
+**支持的语法：**
+
+| 语法            | 示例                         | 详细信息                                 |
+| --------------- | ---------------------------- | ---------------------------------------- |
+| querySelector   | `getComponent('.component')` | 匹配标准查询选择器。                     |
+| 组件名称        | `getComponent({name: 'a'})`  | 匹配 PascalCase、snake-case、camelCase。 |
+| 组件引用        | `getComponent({ref: 'ref'})` | 仅可用于已挂载组件的直接引用子组件。     |
+| 单文件组件(SFC) | `getComponent(Component)`    | 直接传入已导入的组件。                   |
+
+`Foo.vue`
+
+```vue
+<template>
+  <div class="foo">Foo</div>
+</template>
+
+<script>
+export default {
+  name: 'Foo'
+}
+</script>
+```
+
+`Component.vue`:
+
+```vue
+<template>
+  <Foo />
+</template>
+
+<script>
+import Foo from '@/Foo'
+
+export default {
+  components: { Foo }
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+import Foo from '@/Foo.vue'
+
+test('getComponent', () => {
+  const wrapper = mount(Component)
+
+  wrapper.getComponent({ name: 'foo' }) // returns a VueWrapper
+  wrapper.getComponent(Foo) // returns a VueWrapper
+
+  expect(() => wrapper.getComponent('.not-there')).toThrowError()
+})
+```
+
+### html
+
+返回元素的 HTML 内容。
+
+默认情况下，输出会使用 [`js-beautify`](https://github.com/beautify-web/js-beautify) 进行格式化，以使快照更易读。如果需要未格式化的 HTML 字符串，可以使用 `raw: true` 选项。
+
+**签名：**
+
+```ts
+html(): string
+html(options?: { raw?: boolean }): string
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>
+    <p>Hello world</p>
+  </div>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('html', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.html()).toBe('<div>\n' + '  <p>Hello world</p>\n' + '</div>')
+
+  expect(wrapper.html({ raw: true })).toBe('<div><p>Hello world</p></div>')
+})
+```
+
+### isVisible
+
+验证一个元素是否可见。
+
+**签名：**
+
+```ts
+isVisible(): boolean
+```
+
+**详细信息：**
+
+::: warning
+`isVisible()` 仅在使用 [`attachTo`](#attachTo) 将包装器附加到 DOM 时才能正确工作。
+:::
+
+```js
+const Component = {
+  template: `<div v-show="false"><span /></div>`
+}
+
+test('isVisible', () => {
+  const wrapper = mount(Component, {
+    attachTo: document.body
+  })
+
+  expect(wrapper.find('span').isVisible()).toBe(false)
+})
+```
+
+### props
+
+返回传递给 Vue 组件的属性 (props)。
+
+**签名：**
+
+```ts
+props(): { [key: string]: any }
+props(selector: string): any
+props(selector?: string): { [key: string]: any } | any
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```js
+export default {
+  name: 'Component',
+  props: {
+    truthy: Boolean,
+    object: Object,
+    string: String
+  }
+}
+```
+
+```vue
+<template>
+  <Component truthy :object="{}" string="string" />
+</template>
+
+<script>
+import Component from '@/Component'
+
+export default {
+  components: { Component }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('props', () => {
+  const wrapper = mount(Component, {
+    global: { stubs: ['Foo'] }
+  })
+
+  const foo = wrapper.getComponent({ name: 'Foo' })
+
+  expect(foo.props('truthy')).toBe(true)
+  expect(foo.props('object')).toEqual({})
+  expect(foo.props('notExisting')).toEqual(undefined)
+  expect(foo.props()).toEqual({
+    truthy: true,
+    object: {},
+    string: 'string'
+  })
+})
+```
+
+:::tip
+根据经验，测试传递的属性的效果 (如 DOM 更新、触发的事件等)。这将使测试比仅仅断言一个属性被传递要更有效。
+:::
+
+### setData
+
+更新组件内部数据。
+
+**签名：**
+
+```ts
+setData(data: Record<string, any>): Promise<void>
+```
+
+**详细信息：**
+
+`setData` 不允许设置组件中未定义的新属性。
+
+::: warning
+请注意，`setData` 不会修改组合式 API 中 setup() 的数据。
+:::
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>Count: {{ count }}</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('setData', async () => {
+  const wrapper = mount(Component)
+  expect(wrapper.html()).toContain('Count: 0')
+
+  await wrapper.setData({ count: 1 })
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+::: warning
+在调用 `setData` 时，你应该使用 `await`，以确保 Vue 在你进行断言之前更新 DOM。
+:::
+
+### setProps
+
+更新组件的属性。
+
+**签名：**
+
+```ts
+setProps(props: Record<string, any>): Promise<void>
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <div>{{ message }}</div>
+</template>
+
+<script>
+export default {
+  props: ['message']
+}
+</script>
+```
+
+`Component.spec.js`
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('updates prop', async () => {
+  const wrapper = mount(Component, {
+    props: {
+      message: 'hello'
+    }
+  })
+
+  expect(wrapper.html()).toContain('hello')
+
+  await wrapper.setProps({ message: 'goodbye' })
+
+  expect(wrapper.html()).toContain('goodbye')
+})
+```
+
+::: warning
+在调用 `setProps` 时，你应该使用 `await`，以确保 Vue 在你进行断言之前更新 DOM。
+:::
+
+### setValue
+
+在 DOM 元素上设置一个值，包括：
+
+- `<input>`
+  - 会检测 `type="checkbox"` 和 `type="radio"`，并将 `element.checked` 设置为相应的值。
+- `<select>`
+  - 会检测 `<option>`，并将 `element.selected` 设置为相应的值。
+
+**签名：**
+
+```ts
+setValue(value: unknown, prop?: string): Promise<void>
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <input type="text" v-model="text" />
+  <p>Text: {{ text }}</p>
+
+  <input type="checkbox" v-model="checked" />
+  <div v-if="checked">The input has been checked!</div>
+
+  <select v-model="multiselectValue" multiple>
+    <option value="value1"></option>
+    <option value="value2"></option>
+    <option value="value3"></option>
+  </select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: '',
+      checked: false,
+      multiselectValue: []
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('setValue on checkbox', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find('input[type="checkbox"]').setValue(true)
+  expect(wrapper.find('div').exists()).toBe(true)
+
+  await wrapper.find('input[type="checkbox"]').setValue(false)
+  expect(wrapper.find('div').exists()).toBe(false)
+})
+
+test('setValue on input text', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find('input[type="text"]').setValue('hello!')
+  expect(wrapper.find('p').text()).toBe('Text: hello!')
+})
+
+test('setValue on multi select', async () => {
+  const wrapper = mount(Component)
+
+  // For select without multiple
+  await wrapper.find('select').setValue('value1')
+  // For select with multiple
+  await wrapper.find('select').setValue(['value1', 'value3'])
+})
+```
+
+::: warning
+在调用 `setValue` 时，你应该使用 `await`，以确保 Vue 在你进行断言之前更新 DOM。
+:::
+
+### text
+
+返回元素的文本内容。
+
+**签名：**
+
+```ts
+text(): string
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <p>Hello world</p>
+</template>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('text', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.find('p').text()).toBe('Hello world')
+})
+```
+
+### trigger
+
+触发一个 DOM 事件，例如 `click`、`submit` 或 `keyup`。
+
+**签名：**
+
+```ts
+interface TriggerOptions {
+  code?: String
+  key?: String
+  keyCode?: Number
+  [custom: string]: any
+}
+
+trigger(eventString: string, options?: TriggerOptions | undefined): Promise<void>
+```
+
+**详细信息：**
+
+`Component.vue`:
+
+```vue
+<template>
+  <span>Count: {{ count }}</span>
+  <button @click="count++">Click me</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('trigger', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find('button').trigger('click')
+
+  expect(wrapper.find('span').text()).toBe('Count: 1')
+})
+```
+
+请注意，`trigger` 接受第二个参数，以便将选项传递给触发的事件：
+
+```js
+await wrapper.trigger('keydown', { keyCode: 65 })
+```
+
+::: warning
+在调用 `trigger` 时，你应该使用 `await`，以确保 Vue 在你进行断言之前更新 DOM。
+:::
+
+::: warning
+某些事件，例如单击复选框以更改其 `v-model`，仅在测试使用 `attachTo: document.body` 时有效。否则，`change` 事件将不会被触发，`v-model` 的值也不会改变。
+:::
+
+### unmount
+
+从 DOM 中卸载应用程序。
+
+**签名：**
+
+```ts
+unmount(): void
+```
+
+**详细信息：**
+
+它仅适用于从 `mount` 返回的根 `VueWrapper`。在测试后进行手动清理时非常有用。
+
+`Component.vue`:
+
+```vue
+<script>
+export default {
+  unmounted() {
+    console.log('unmounted!')
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js
+import { mount } from '@vue/test-utils'
+import Component from './Component.vue'
+
+test('unmount', () => {
+  const wrapper = mount(Component)
+
+  wrapper.unmount()
+  // Component is removed from DOM.
+  // console.log has been called with 'unmounted!'
+})
+```
+
+## Wrapper properties
+
+### vm
+
+**签名：**
+
+```ts
+vm: ComponentPublicInstance
+```
+
+**详细信息：**
+
+`Vue` 应用实例。你可以访问所有的[实例方法](https://v3.vuejs.org/api/instance-methods.html)和[实例属性](https://v3.vuejs.org/api/instance-properties.html)。
+
+请注意，`vm` 仅在 `VueWrapper` 上可用。
+
+:::tip
+根据经验，测试传递的属性的效果 (如 DOM 更新、触发的事件等)。这将使测试比仅仅断言一个属性被传递要更有效。
+:::
+
+## shallowMount
+
+创建一个包含已挂载 (mounted) 和渲染 (rendered) 的 Vue 组件的包装器 (Wrapper)。
+
+**签名：**
+
+```ts
+interface MountingOptions<Props, Data = {}> {
+  attachTo?: Element | string
+  attrs?: Record<string, unknown>
+  data?: () => {} extends Data ? any : Data extends object ? Partial<Data> : any
+  props?: (RawProps & Props) | ({} extends Props ? null : never)
+  slots?: { [key: string]: Slot } & { default?: Slot }
+  global?: GlobalMountOptions
+}
+
+function shallowMount(Component, options?: MountingOptions): VueWrapper
+```
+
+**详细信息：**
+
+`shallowMount` 的行为与 `mount` 完全相同，但它默认会 stub (替代) 所有的子组件。实际上，`shallowMount(Component)` 是 `mount(Component, { shallow: true })` 的别名。
+
+## enableAutoUnmount
+
+**签名：**
+
+```ts
+enableAutoUnmount(hook: (callback: () => void) => void);
+disableAutoUnmount(): void;
+```
+
+**详细信息：**
+
+`enableAutoUnmount` 允许自动销毁 Vue Wrapper。销毁逻辑作为回调函数传递给 `hook` 函数。常见用法是将 `enableAutoUnmount` 与测试框架提供的清理辅助函数结合使用，例如 `afterEach`：
+
+```ts
+import { enableAutoUnmount } from '@vue/test-utils'
+
+enableAutoUnmount(afterEach)
+```
+
+如果你希望这种行为仅在测试套件的特定子集内生效，并且想要显式禁用此行为，则可以使用 `disableAutoUnmount`。
+
+## flushPromises
+
+**签名：**
+
+```ts
+flushPromises(): Promise<unknown>
+```
+
+**详细信息：**
+
+`flushPromises` 会刷新所有已解析的 Promise 处理程序。这有助于确保在进行断言之前，异步操作 (如 Promise 或 DOM 更新) 已经完成。
+
+你可以查看[发起 HTTP 请求](../guide/advanced/http-requests.md)来了解 `flushPromises` 的实际使用示例。
+
+## config
+
+### config.global
+
+**签名：**
+
+```ts
+type GlobalMountOptions = {
+  plugins?: (Plugin | [Plugin, ...any[]])[]
+  config?: Partial<Omit<AppConfig, 'isNativeTag'>>
+  mixins?: ComponentOptions[]
+  mocks?: Record<string, any>
+  provide?: Record<any, any>
+  components?: Record<string, Component | object>
+  directives?: Record<string, Directive>
+  stubs?: Stubs = Record<string, boolean | Component> | Array<string>
+  renderStubDefaultSlot?: boolean
+}
+```
+
+**详细信息：**
+
+你可以选择在整个测试套件中配置挂载选项，而不是在每个测试中单独配置。这些配置将在每次 `mount` 组件时默认使用。如果需要，你可以在每个测试中覆盖这些默认设置。
+
+**Example :**
+
+全局模拟来可能是自 vue-i18n 的 `$t` 变量和一个组件：
+
+`Component.vue`:
+
+```vue
+<template>
+  <p>{{ $t('message') }}</p>
+  <my-component />
+</template>
+
+<script>
+import MyComponent from '@/components/MyComponent'
+
+export default {
+  components: {
+    MyComponent
+  }
+}
+</script>
+```
+
+`Component.spec.js`:
+
+```js {1,8-10,12-14}
+import { config, mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+const MyComponent = defineComponent({
+  template: `<div>My component</div>`
+})
+
+config.global.stubs = {
+  MyComponent
+}
+
+config.global.mocks = {
+  $t: (text) => text
+}
+
+test('config.global mocks and stubs', () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.html()).toBe('<p>message</p><div>My component</div>')
+})
+```
+
+::: tip
+请记住，这种行为是全局性的，而不是逐次挂载的。你可能需要在每个测试之前和之后启用/禁用它。
+:::
+
+## components
+
+### RouterLinkStub
+
+一个用于替代 Vue Router 的 `router-link` 的组件，当你不想模拟或包含完整路由时，可以使用它。
+
+你可以使用此组件在渲染树中查找 `router-link` 组件。
+
+**Usage:**
+
+在挂载选项中设置为替换组件 (stub)：
+
+```js
+import { mount, RouterLinkStub } from '@vue/test-utils'
+
+const wrapper = mount(Component, {
+  global: {
+    stubs: {
+      RouterLink: RouterLinkStub
+    }
+  }
+})
+
+expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path')
+```
+
+**使用插槽：**
+
+`RouterLinkStub` 组件支持插槽内容，并将为其插槽属性返回非常基本的值。如果你需要更具体的插槽属性值进行测试，考虑使用[真实路由](../guide/advanced/vue-router.html#using-a-real-router)，这样你可以使用真实的 `router-link` 组件。或者，你可以通过复制 test-utils 包中的实现来定义自己的 `RouterLinkStub` 组件。
diff --git a/docs/zh/guide/advanced/async-suspense.md b/docs/zh/guide/advanced/async-suspense.md
new file mode 100644
index 000000000..e04af8a6f
--- /dev/null
+++ b/docs/zh/guide/advanced/async-suspense.md
@@ -0,0 +1,150 @@
+# 异步行为
+
+你可能注意到在指南的某些部分，在调用 `wrapper` 的一些方法时使用了 `await`，例如 `trigger` 和 `setValue`。这是什么意思呢？
+
+你可能知道 [Vue 是以响应式的方式更新的](https://v3.vuejs.org/guide/change-detection.html#async-update-queue)：当你更改一个值时，DOM 会自动更新以反映最新的值。Vue 的这些更新是异步进行的。与此相对，像 Jest 这样的测试运行器是*同步*的。这可能会导致测试中出现一些意外的结果。
+
+让我们看看一些策略，以确保在运行测试时 Vue 按预期更新 DOM。
+
+## 简单示例 - 使用 `trigger` 更新
+
+让我们重用来自[事件处理](../essentials/event-handling)的 `<Counter>` 组件，唯一的变化是我们现在在 `template` 中渲染 `count`。
+
+```js
+const Counter = {
+  template: `
+    <p>Count: {{ count }}</p>
+    <button @click="handleClick">Increment</button>
+  `,
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.count += 1
+    }
+  }
+}
+```
+
+让我们写一个测试来验证 `count` 是否在增加：
+
+```js
+test('increments by 1', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+出乎意料的是，这个测试失败了！原因是虽然 `count` 增加了，但 Vue 不会在下一个事件循环的 tick 之前更新 DOM。因此，断言 (`expect()...`) 会在 Vue 更新 DOM 之前被调用。
+
+:::tip
+如果你想了解更多关于这个核心 JavaScript 行为的信息，可以阅读[事件循环及其宏任务和微任务](https://javascript.info/event-loop#macrotasks-and-microtasks)。
+:::
+
+先抛开实现细节，我们该如何修复这个问题呢？实际上，Vue 提供了一种方法让我们等待 DOM 更新：`nextTick`。
+
+```js {1,7}
+import { nextTick } from 'vue'
+
+test('increments by 1', async () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  await nextTick()
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+现在的测试将会通过，因为我们确保在断言运行之前，下一个 "tick" 已经执行并且 DOM 已经更新。
+
+由于 `await nextTick()` 是常见的，Vue Test Utils 提供了一个快捷方式。导致 DOM 更新的方法，如 `trigger` 和 `setValue` 返回 `nextTick`，因此你可以直接 `await` 它们：
+
+```js {4}
+test('increments by 1', async () => {
+  const wrapper = mount(Counter)
+
+  await wrapper.find('button').trigger('click')
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+## 解决其他异步行为
+
+`nextTick` 用于确保某个响应式数据的变化在继续测试之前反映在 DOM 中。然而，有时你可能还想确保其他与 Vue 无关的异步行为也已完成。
+
+一个常见的例子是返回 `Promise` 的函数。也许你使用 `jest.mock` 模拟了你的 `axios` HTTP 客户端：
+
+```js
+jest.spyOn(axios, 'get').mockResolvedValue({ data: 'some mocked data!' })
+```
+
+在这种情况下，Vue 对未解决的 Promise 没有任何了解，因此调用 `nextTick` 将不起作用——你的断言可能在 Promise 被解决之前就运行了。对于这种情况，Vue Test Utils 提供了 [`flushPromises`](../../api/#flushPromises) 它可以立即解决所有未完成的 Promise。
+
+让我们看一个例子：
+
+```js{1,12}
+import { flushPromises } from '@vue/test-utils'
+import axios from 'axios'
+
+jest.spyOn(axios, 'get').mockResolvedValue({ data: 'some mocked data!' })
+
+test('uses a mocked axios HTTP client and flushPromises', async () => {
+  // 某个在 `created` 中使用 `axios` 进行 HTTP 调用的组件
+  const wrapper = mount(AxiosComponent)
+
+  await flushPromises() // axios 的 Promise 被立即解决
+
+  // 在上面的代码执行后，axios 请求已使用模拟数据解决。
+})
+```
+
+:::tip
+如果你想了解更多关于在组件上测试请求的信息，请确保查看[发起 HTTP 请求](http-requests.md) 指南。
+:::
+
+## 测试异步 `setup`
+
+如果你要测试的组件使用了异步 `setup`，那么你必须在 `Suspense` 组件内挂载该组件（就像在应用程序中使用时一样）。
+
+例如，这个 `Async` 组件：
+
+```js
+const Async = defineComponent({
+  async setup() {
+    // 等待某些内容
+  }
+})
+```
+
+必须这样测试：
+
+```js
+test('Async component', async () => {
+  const TestComponent = defineComponent({
+    components: { Async },
+    template: '<Suspense><Async/></Suspense>'
+  })
+
+  const wrapper = mount(TestComponent)
+  await flushPromises()
+  // ...
+})
+```
+
+注意：要访问你的 `Async` 组件的底层 `vm` 实例，请使用 `wrapper.findComponent(Async)` 的返回值。由于在这种情况下定义并挂载了一个新组件，因此 `mount(TestComponent)` 返回的 wrapper 包含它自己的（空的）`vm`。
+
+## 结论
+
+- Vue 以异步方式更新 DOM；测试运行器以同步方式执行代码。
+- 使用 `await nextTick()` 确保在测试继续之前 DOM 已更新。
+- 可能更新 DOM 的函数（如 `trigger` 和 `setValue`）返回 `nextTick`，因此你需要 `await` 它们。
+- 使用 Vue Test Utils 的 `flushPromises` 来解决来自非 Vue 依赖（如 API 请求）的任何未解决的 Promise。
+- 使用 `Suspense` 在异步测试函数中测试具有异步 `setup` 的组件。
diff --git a/docs/zh/guide/advanced/component-instance.md b/docs/zh/guide/advanced/component-instance.md
new file mode 100644
index 000000000..bf1abb743
--- /dev/null
+++ b/docs/zh/guide/advanced/component-instance.md
@@ -0,0 +1,84 @@
+# 组件实例
+
+[`mount`](/api/#mount) 返回一个 `VueWrapper`，提供了许多方便的测试 Vue 组件的方法。有时你可能希望访问底层的 Vue 实例。可以通过 `vm` 属性访问它。
+
+## 简单示例
+
+下面是一个简单的组件，它结合了 props 和 data 来渲染一个问候语：
+
+```ts
+test('renders a greeting', () => {
+  const Comp = {
+    template: `<div>{{ msg1 }} {{ msg2 }}</div>`,
+    props: ['msg1'],
+    data() {
+      return {
+        msg2: 'world'
+      }
+    }
+  }
+
+  const wrapper = mount(Comp, {
+    props: {
+      msg1: 'hello'
+    }
+  })
+
+  expect(wrapper.html()).toContain('hello world')
+})
+```
+
+让我们通过 `console.log(wrapper.vm)` 来查看 `vm` 上可用的内容：
+
+```js
+{
+  msg1: [Getter/Setter],
+  msg2: [Getter/Setter],
+  hasOwnProperty: [Function]
+}
+```
+
+我们可以看到 `msg1` 和 `msg2`！如果定义了 `methods` 和 `computed` 属性，它们也会显示出来。在编写测试时，虽然通常建议对 DOM 进行断言 (使用 `wrapper.html()` 等)，但在一些特殊情况下，你可能需要访问底层的 Vue 实例。
+
+## 与 `getComponent` 和 `findComponent` 的使用
+
+`getComponent` 和 `findComponent` 返回一个 `VueWrapper`，与从 `mount` 获取的相似。这意味着你也可以在 `getComponent` 或 `findComponent` 的结果上访问所有相同的属性，包括 `vm`。
+
+下面是一个简单的示例：
+
+```js
+test('asserts correct props are passed', () => {
+  const Foo = {
+    props: ['msg'],
+    template: `<div>{{ msg }}</div>`
+  }
+
+  const Comp = {
+    components: { Foo },
+    template: `<div><foo msg="hello world" /></div>`
+  }
+
+  const wrapper = mount(Comp)
+
+  expect(wrapper.getComponent(Foo).vm.msg).toBe('hello world')
+  expect(wrapper.getComponent(Foo).props()).toEqual({ msg: 'hello world' })
+})
+```
+
+一种更彻底的测试方式是对渲染的内容进行断言。这样可以确保正确的 prop 被传递*并*渲染。
+
+:::warning 使用 CSS 选择器时的 WrapperLike 类型
+例如，当使用 `wrapper.findComponent('.foo')` 时，VTU 将返回 `WrapperLike` 类型。这是因为功能组件需要一个 `DOMWrapper`，否则返回 `VueWrapper`。你可以通过提供正确的组件类型来强制返回 `VueWrapper`：
+
+```typescript
+wrapper.findComponent('.foo') // 返回 WrapperLike
+wrapper.findComponent<typeof FooComponent>('.foo') // 返回 VueWrapper
+wrapper.findComponent<DefineComponent>('.foo') // 返回 VueWrapper
+```
+
+:::
+
+## 结论
+
+- 使用 `vm` 访问内部 Vue 实例。
+- `getComponent` 和 `findComponent` 返回一个 Vue 包装器。这些 Vue 实例也可以通过 `vm` 访问。
diff --git a/docs/zh/guide/advanced/http-requests.md b/docs/zh/guide/advanced/http-requests.md
new file mode 100644
index 000000000..ae289c180
--- /dev/null
+++ b/docs/zh/guide/advanced/http-requests.md
@@ -0,0 +1,172 @@
+# 发起 HTTP 请求
+
+现代测试运行器在测试 HTTP 请求方面已经提供了许多优秀的功能。因此，Vue Test Utils 并没有提供任何独特的工具来处理这一点。
+
+然而，测试 HTTP 请求是一个重要的功能，我们希望强调一些注意事项。
+
+在本节中，我们将探讨一些执行、模拟和断言 HTTP 请求的模式。
+
+## 博客文章列表
+
+让我们从一个基本的用例开始。以下的 `PostList` 组件渲染了从外部 API 获取的博客文章列表。为了获取这些文章，组件包含一个触发请求的 `button` 元素：
+
+```vue
+<template>
+  <button @click="getPosts">Get posts</button>
+  <ul>
+    <li v-for="post in posts" :key="post.id" data-test="post">
+      {{ post.title }}
+    </li>
+  </ul>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      posts: null
+    }
+  },
+  methods: {
+    async getPosts() {
+      this.posts = await axios.get('/api/posts')
+    }
+  }
+}
+</script>
+```
+
+为了正确测试这个组件，我们需要做几件事。
+
+我们的第一个目标是测试这个组件**而不实际访问 API**。这样会导致测试变得不稳定且可能执行缓慢。
+
+其次，我们需要断言组件是否以正确的参数进行了正确的调用。虽然我们不会从 API 获取结果，但仍需确保请求了正确的资源。
+
+此外，我们还需要确保 DOM 已相应更新并显示数据。我们可以使用 `@vue/test-utils` 中的 `flushPromises()` 函数来实现。
+
+```js
+import { mount, flushPromises } from '@vue/test-utils'
+import axios from 'axios'
+import PostList from './PostList.vue'
+
+const mockPostList = [
+  { id: 1, title: 'title1' },
+  { id: 2, title: 'title2' }
+]
+
+// 以下行代码告诉 Jest 模拟任何对 `axios.get` 的调用并返回 `mockPostList`
+jest.spyOn(axios, 'get').mockResolvedValue(mockPostList)
+
+test('loads posts on button click', async () => {
+  const wrapper = mount(PostList)
+
+  await wrapper.get('button').trigger('click')
+
+  // 断言我们已正确调用 axios.get 的次数和参数。
+  expect(axios.get).toHaveBeenCalledTimes(1)
+  expect(axios.get).toHaveBeenCalledWith('/api/posts')
+
+  // 等待 DOM 更新。
+  await flushPromises()
+
+  // 最后，确保我们已渲染 API 的内容。
+  const posts = wrapper.findAll('[data-test="post"]')
+
+  expect(posts).toHaveLength(2)
+  expect(posts[0].text()).toContain('title1')
+  expect(posts[1].text()).toContain('title2')
+})
+```
+
+请注意，我们在变量 `mockPostList` 前添加了前缀 `mock`。如果不这样做，我们将收到错误：“The module factory of jest.mock() is not allowed to reference any out-of-scope variables。” 这是 Jest 特有的，你可以在他们的[文档](https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter)中了解更多关于这种行为的信息。
+
+还要注意，我们在与组件交互之前等待了 `flushPromises`。这样可以确保在运行断言之前，DOM 已更新。
+
+:::tip jest.mock() 的替代方案
+在 Jest 中设置模拟有多种方法。上面示例中使用的方式是最简单的。对于更强大的替代方案，你可能想查看 [axios-mock-adapter](https://github.com/ctimmerm/axios-mock-adapter) 或 [msw](https://github.com/mswjs/msw) 等。
+:::
+
+### 断言加载状态
+
+现在，这个 `PostList` 组件非常实用，但缺少一些其他很棒的功能。让我们扩展它，使其在加载文章时显示一个漂亮的消息！
+
+同时，让我们在加载时禁用 `<button>` 元素。我们不希望用户在获取数据时继续发送请求！
+
+```vue {2,4,19,24,28}
+<template>
+  <button :disabled="loading" @click="getPosts">Get posts</button>
+
+  <p v-if="loading" role="alert">Loading your posts…</p>
+  <ul v-else>
+    <li v-for="post in posts" :key="post.id" data-test="post">
+      {{ post.title }}
+    </li>
+  </ul>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      posts: null,
+      loading: null
+    }
+  },
+  methods: {
+    async getPosts() {
+      this.loading = true
+
+      this.posts = await axios.get('/api/posts')
+
+      this.loading = null
+    }
+  }
+}
+</script>
+```
+
+让我们编写一个测试，以断言所有与加载相关的元素都能及时渲染。
+
+```js
+test('displays loading state on button click', async () => {
+  const wrapper = mount(PostList)
+
+  // 注意，我们在点击按钮之前运行以下断言
+  // 此时组件应该处于“未加载”状态。
+  expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  expect(wrapper.get('button').attributes()).not.toHaveProperty('disabled')
+
+  // 现在像往常一样触发它。
+  await wrapper.get('button').trigger('click')
+
+  // 我们在等待所有承诺完成之前，断言“加载状态”。
+  expect(wrapper.find('[role="alert"]').exists()).toBe(true)
+  expect(wrapper.get('button').attributes()).toHaveProperty('disabled')
+
+  // 和之前一样，等待 DOM 更新。
+  await flushPromises()
+
+  // 之后，我们回到“未加载”状态。
+  expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  expect(wrapper.get('button').attributes()).not.toHaveProperty('disabled')
+})
+```
+
+## 从 Vuex 发起 HTTP 请求
+
+对于更复杂的应用程序，一个典型的场景是触发执行 HTTP 请求的 Vuex 动作。
+
+这与上面概述的示例没有什么不同。我们可能想要像往常一样加载存储并模拟像 `axios` 这样的服务。通过这种方式，我们可以模拟系统的边界，从而在测试中获得更高的信心。
+
+你可以查看 [Testing Vuex](vuex.md) 文档，以获取有关使用 Vue Test Utils 测试 Vuex 的更多信息。
+
+## 结论
+
+- Vue Test Utils 不需要特殊工具来测试 HTTP 请求。唯一需要考虑的是测试异步行为。
+- 测试不应依赖于外部服务。使用模拟工具如 `jest.mock` 来避免这种情况。
+- `flushPromises()` 是一个有用的工具，可以确保在异步操作后 DOM 更新。
+- 通过与组件进行交互来直接触发 HTTP 请求，可以让你的测试更加稳健。
diff --git a/docs/zh/guide/advanced/reusability-composition.md b/docs/zh/guide/advanced/reusability-composition.md
new file mode 100644
index 000000000..b08c7f4de
--- /dev/null
+++ b/docs/zh/guide/advanced/reusability-composition.md
@@ -0,0 +1,210 @@
+# 复用与组合
+
+主要内容：
+
+- `global.mixins`.
+- `global.directives`.
+
+## 测试组合函数
+
+在使用组合式 API 并创建组合式函数时，你通常只想测试组合式函数。让我们从一个简单的示例开始：
+
+```typescript
+export function useCounter() {
+  const counter = ref(0)
+
+  function increase() {
+    counter.value += 1
+  }
+
+  return { counter, increase }
+}
+```
+
+在这种情况下，你实际上并不需要 `@vue/test-utils`。对应的测试如下：
+
+```typescript
+test('increase counter on call', () => {
+  const { counter, increase } = useCounter()
+
+  expect(counter.value).toBe(0)
+
+  increase()
+
+  expect(counter.value).toBe(1)
+})
+```
+
+对于更复杂的组合式函数，使用了生命周期钩子如 `onMounted` 或 `provide`/`inject` 处理，你可以创建一个简单的测试助手组件。以下组合式函数在 `onMounted` 钩子中获取用户数据。
+
+```typescript
+export function useUser(userId) {
+  const user = ref()
+
+  function fetchUser(id) {
+    axios.get(`users/${id}`).then((response) => (user.value = response.data))
+  }
+
+  onMounted(() => fetchUser(userId))
+
+  return { user }
+}
+```
+
+要测试这个组合式函数，你可以在测试中创建一个简单的 `TestComponent`。`TestComponent` 应该与真实组件相同的方式使用组合式函数。
+
+```typescript
+// 模拟 API 请求
+jest.spyOn(axios, 'get').mockResolvedValue({ data: { id: 1, name: 'User' } })
+
+test('fetch user on mount', async () => {
+  const TestComponent = defineComponent({
+    props: {
+      // 定义 props，以便使用不同的输入参数测试组合式函数
+      userId: {
+        type: Number,
+        required: true
+      }
+    },
+    setup(props) {
+      return {
+        // 调用组合式函数并将所有返回值暴露到我们的组件实例中，以便我们可以通过 wrapper.vm 访问它们
+        ...useUser(props.userId)
+      }
+    }
+  })
+
+  const wrapper = mount(TestComponent, {
+    props: {
+      userId: 1
+    }
+  })
+
+  expect(wrapper.vm.user).toBeUndefined()
+
+  await flushPromises()
+
+  expect(wrapper.vm.user).toEqual({ id: 1, name: 'User' })
+})
+```
+
+## Provide (提供) / Inject (注入)
+
+Vue 提供了一种通过 `provide` 和 `inject` 将 props 传递给所有子组件的方法。测试这种行为的最佳方式是测试整个树 (父组件 + 子组件)。但有时这并不可能，因为树结构过于复杂，或者你只想测试单个组合式函数。
+
+### 测试 `provide`
+
+假设你要测试以下组件：
+
+```vue
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+provide('my-key', 'some-data')
+</script>
+```
+
+在这种情况下，你可以渲染一个实际的子组件并测试 `provide` 的正确用法，或者你可以创建一个简单的测试助手组件并将其传递到默认插槽中。
+
+```typescript
+test('provides correct data', () => {
+  const TestComponent = defineComponent({
+    template: '<span id="provide-test">{{value}}</span>',
+    setup() {
+      const value = inject('my-key')
+      return { value }
+    }
+  })
+
+  const wrapper = mount(ParentComponent, {
+    slots: {
+      default: () => h(TestComponent)
+    }
+  })
+
+  expect(wrapper.find('#provide-test').text()).toBe('some-data')
+})
+```
+
+如果你的组件不包含插槽，你可以使用 [`stub`](./stubs-shallow-mount.md#Stubbing-a-single-child-component) 替换子组件为你的测试助手：
+
+```vue
+<template>
+  <div>
+    <SomeChild />
+  </div>
+</template>
+
+<script setup>
+import SomeChild from './SomeChild.vue'
+
+provide('my-key', 'some-data')
+</script>
+```
+
+测试如下：
+
+```typescript
+test('provides correct data', () => {
+  const TestComponent = defineComponent({
+    template: '<span id="provide-test">{{value}}</span>',
+    setup() {
+      const value = inject('my-key')
+      return { value }
+    }
+  })
+
+  const wrapper = mount(ParentComponent, {
+    global: {
+      stubs: {
+        SomeChild: TestComponent
+      }
+    }
+  })
+
+  expect(wrapper.find('#provide-test').text()).toBe('some-data')
+})
+```
+
+### 测试 `inject`
+
+当你的组件使用 `inject` 并需要通过 `provide` 传递数据时，你可以使用 `global.provide` 选项。
+
+```vue
+<template>
+  <div>
+    {{ value }}
+  </div>
+</template>
+
+<script setup>
+const value = inject('my-key')
+</script>
+```
+
+单元测试可以简单地写成：
+
+```typescript
+test('renders correct data', () => {
+  const wrapper = mount(MyComponent, {
+    global: {
+      provide: {
+        'my-key': 'some-data'
+      }
+    }
+  })
+
+  expect(wrapper.text()).toBe('some-data')
+})
+```
+
+## 结论
+
+- 测试简单的组合式函数时无需组件和 `@vue/test-utils`
+- 创建测试助手组件以测试更复杂的组合式函数
+- 创建测试助手组件以测试你的组件是否通过 `provide` 提供正确的数据
+- 使用 `global.provide` 将数据传递给使用 `inject` 的组件
diff --git a/docs/zh/guide/advanced/slots.md b/docs/zh/guide/advanced/slots.md
new file mode 100644
index 000000000..5b5e3dcb2
--- /dev/null
+++ b/docs/zh/guide/advanced/slots.md
@@ -0,0 +1,188 @@
+# 插槽
+
+Vue Test Utils 提供了一些有用的功能，用于测试使用 `slots` 的组件。
+
+## 简单示例
+
+你可能有一个通用的 `<layout>` 组件，它使用默认插槽来渲染一些内容。例如：
+
+```js
+const Layout = {
+  template: `
+    <div>
+      <h1>Welcome!</h1>
+      <main>
+        <slot />
+      </main>
+      <footer>
+        Thanks for visiting.
+      </footer>
+    </div>
+  `
+}
+```
+
+你可能想编写一个测试，以确保默认插槽的内容被正确渲染。VTU 提供了 `slots` 挂载选项来实现这一目的：
+
+```js
+test('layout default slot', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      default: 'Main Content'
+    }
+  })
+
+  expect(wrapper.html()).toContain('Main Content')
+})
+```
+
+测试通过！在这个示例中，我们将一些文本内容传递给默认插槽。如果你想更具体地验证默认插槽的内容是否渲染在 `<main>` 中，你可以修改断言：
+
+```js
+test('layout default slot', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      default: 'Main Content'
+    }
+  })
+
+  expect(wrapper.find('main').text()).toContain('Main Content')
+})
+```
+
+## 命名插槽
+
+你可能有一个更复杂的 `<layout>` 组件，带有一些命名插槽。例如：
+
+```js
+const Layout = {
+  template: `
+    <div>
+      <header>
+        <slot name="header" />
+      </header>
+
+      <main>
+        <slot name="main" />
+      </main>
+      <footer>
+        <slot name="footer" />
+      </footer>
+    </div>
+  `
+}
+```
+
+VTU 也支持这一点。你可以编写如下测试。在这个示例中，我们将 HTML 而不是文本内容传递给插槽
+
+```js
+test('layout full page layout', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      header: '<div>Header</div>',
+      main: '<div>Main Content</div>',
+      footer: '<div>Footer</div>'
+    }
+  })
+
+  expect(wrapper.html()).toContain('<div>Header</div>')
+  expect(wrapper.html()).toContain('<div>Main Content</div>')
+  expect(wrapper.html()).toContain('<div>Footer</div>')
+})
+```
+
+## 多个插槽
+
+你也可以传递一个插槽数组：
+
+```js
+test('layout full page layout', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      default: ['<div id="one">One</div>', '<div id="two">Two</div>']
+    }
+  })
+
+  expect(wrapper.find('#one').exists()).toBe(true)
+  expect(wrapper.find('#two').exists()).toBe(true)
+})
+```
+
+## 高级用法
+
+你还可以将渲染函数、带有模板的对象，甚至从 `vue` 文件导入的单文件组件传递给插槽挂载选项：
+
+```js
+import { h } from 'vue'
+import Header from './Header.vue'
+
+test('layout full page layout', () => {
+  const wrapper = mount(Layout, {
+    slots: {
+      header: Header,
+      main: h('div', 'Main Content'),
+      sidebar: { template: '<div>Sidebar</div>' },
+      footer: '<div>Footer</div>'
+    }
+  })
+
+  expect(wrapper.html()).toContain('<div>Header</div>')
+  expect(wrapper.html()).toContain('<div>Main Content</div>')
+  expect(wrapper.html()).toContain('<div>Footer</div>')
+})
+```
+
+[参考测试](https://github.com/vuejs/test-utils/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/tests/mountingOptions/slots.spec.ts#L124-L167)获取更多示例和用例。
+
+## 作用域插槽
+
+[作用域插槽](https://v3.vuejs.org/guide/component-slots.html#scoped-slots)和绑定也得到了支持。
+
+```js
+const ComponentWithSlots = {
+  template: `
+    <div class="scoped">
+      <slot name="scoped" v-bind="{ msg }" />
+    </div>
+  `,
+  data() {
+    return {
+      msg: 'world'
+    }
+  }
+}
+
+test('scoped slots', () => {
+  const wrapper = mount(ComponentWithSlots, {
+    slots: {
+      scoped: `<template #scoped="scope">
+        Hello {{ scope.msg }}
+        </template>
+      `
+    }
+  })
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+当使用字符串模板作为插槽内容时，**如果没有使用包裹的** `<template #scoped="scopeVar">` **标签显式定义**，插槽作用域在插槽内容被解析时将作为 `params` 对象。
+
+```js
+test('scoped slots', () => {
+  const wrapper = mount(ComponentWithSlots, {
+    slots: {
+      scoped: `Hello {{ params.msg }}` // no wrapping template tag provided, slot scope exposed as "params"
+    }
+  })
+
+  expect(wrapper.html()).toContain('Hello world')
+})
+```
+
+## 结论
+
+- 使用 `slots` 挂载选项来测试组件使用 `<slot>` 是否正确渲染内容。
+- 内容可以是字符串、渲染函数或导入的单文件组件 (SFC)。
+- 使用 `default` 表示默认插槽，使用正确的名称表示命名插槽。
+- 作用域插槽和 `#` 简写也得到了支持。
diff --git a/docs/zh/guide/advanced/ssr.md b/docs/zh/guide/advanced/ssr.md
new file mode 100644
index 000000000..0ff77af62
--- /dev/null
+++ b/docs/zh/guide/advanced/ssr.md
@@ -0,0 +1,39 @@
+# 测试服务端渲染
+
+Vue Test Utils 提供了 `renderToString` 方法，用于测试使用服务器端渲染 (SSR) 的 Vue 应用程序。本指南将带你了解如何测试使用 SSR 的 Vue 应用程序。
+
+## `renderToString`
+
+`renderToString` 是一个将 Vue 组件渲染为字符串的函数。它是一个异步函数，返回一个 Promise，并接受与 `mount` 或 `shallowMount` 相同的参数。
+
+让我们考虑一个使用 `onServerPrefetch` 钩子的简单组件：
+
+```ts
+function fakeFetch(text: string) {
+  return Promise.resolve(text)
+}
+
+const Component = defineComponent({
+  template: '<div>{{ text }}</div>',
+  setup() {
+    const text = ref<string | null>(null)
+
+    onServerPrefetch(async () => {
+      text.value = await fakeFetch('onServerPrefetch')
+    })
+
+    return { text }
+  }
+})
+```
+
+你可以使用 `renderToString` 为这个组件编写测试：
+
+```ts
+import { renderToString } from '@vue/test-utils'
+
+it('renders the value returned by onServerPrefetch', async () => {
+  const contents = await renderToString(Component)
+  expect(contents).toBe('<div>onServerPrefetch</div>')
+})
+```
diff --git a/docs/zh/guide/advanced/stubs-shallow-mount.md b/docs/zh/guide/advanced/stubs-shallow-mount.md
new file mode 100644
index 000000000..cb177f087
--- /dev/null
+++ b/docs/zh/guide/advanced/stubs-shallow-mount.md
@@ -0,0 +1,391 @@
+# 桩 (Stubs) 与浅层挂载
+
+Vue Test Utils 提供了一些高级功能用于*桩*组件和指令。*桩*是指将自定义组件或指令的现有实现替换为一个不执行任何操作的虚拟实现，这可以简化本来复杂的测试。让我们来看一个例子。
+
+## 桩化单个子组件
+
+一个常见的例子是当你想要测试一个在组件层级中非常高的组件时。
+
+在这个例子中，我们有一个 `<App>` 组件，它渲染一条消息，还有一个 `FetchDataFromApi` 组件，它进行 API 调用并渲染结果。
+
+```js
+const FetchDataFromApi = {
+  name: 'FetchDataFromApi',
+  template: `
+    <div>{{ result }}</div>
+  `,
+  async mounted() {
+    const res = await axios.get('/api/info')
+    this.result = res.data
+  },
+  data() {
+    return {
+      result: ''
+    }
+  }
+}
+
+const App = {
+  components: {
+    FetchDataFromApi
+  },
+  template: `
+    <h1>Welcome to Vue.js 3</h1>
+    <fetch-data-from-api />
+  `
+}
+```
+
+在这个特定的测试中，我们不想进行 API 调用，我们只想断言消息是否被渲染。在这种情况下，我们可以使用 `stubs`，它出现在 `global` 挂载选项中。
+
+```js
+test('stubs component with custom template', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        FetchDataFromApi: {
+          template: '<span />'
+        }
+      }
+    }
+  })
+
+  console.log(wrapper.html())
+  // <h1>Welcome to Vue.js 3</h1><span></span>
+
+  expect(wrapper.html()).toContain('Welcome to Vue.js 3')
+})
+```
+
+注意，模板中显示的是 `<span></span>`，而不是 `<fetch-data-from-api />`。我们用一个桩替换了它——在这种情况下，我们通过传入一个 `template` 提供了自己的实现。
+
+你也可以获取一个默认的桩，而不需要提供自己的实现：
+
+```js
+test('stubs component', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        FetchDataFromApi: true
+      }
+    }
+  })
+
+  console.log(wrapper.html())
+  /*
+    <h1>Welcome to Vue.js 3</h1>
+    <fetch-data-from-api-stub></fetch-data-from-api-stub>
+  */
+
+  expect(wrapper.html()).toContain('Welcome to Vue.js 3')
+})
+```
+
+这将桩化整个渲染树中的*所有* `<FetchDataFromApi />` 组件，而不管它们出现在哪个层级。这就是为什么它在 `global` 挂载选项中的原因。
+
+::: tip
+要桩化组件，你可以使用 `components` 中的键或组件的名称。如果在 `global.stubs` 中同时给出这两者，将优先使用键。
+:::
+
+## 桩化所有子组件
+
+有时你可能想要桩化*所有*自定义组件。例如，你可能有这样的组件：
+
+```js
+const ComplexComponent = {
+  components: { ComplexA, ComplexB, ComplexC },
+  template: `
+    <h1>Welcome to Vue.js 3</h1>
+    <ComplexA />
+    <ComplexB />
+    <ComplexC />
+  `
+}
+```
+
+想象一下，每个 `<Complex>` 组件都做一些复杂的事情，而你只对测试 `<h1>` 是否渲染正确的问候语感兴趣。你可以这样做：
+
+```js
+const wrapper = mount(ComplexComponent, {
+  global: {
+    stubs: {
+      ComplexA: true,
+      ComplexB: true,
+      ComplexC: true
+    }
+  }
+})
+```
+
+但这需要很多样板代码。VTU 有一个 `shallow` 挂载选项，可以自动桩化所有子组件：
+
+```js {3}
+test('shallow stubs out all child components', () => {
+  const wrapper = mount(ComplexComponent, {
+    shallow: true
+  })
+
+  console.log(wrapper.html())
+  /*
+    <h1>Welcome to Vue.js 3</h1>
+    <complex-a-stub></complex-a-stub>
+    <complex-b-stub></complex-b-stub>
+    <complex-c-stub></complex-c-stub>
+  */
+})
+```
+
+::: tip
+如果你使用的是 VTU V1，你可能记得这个方法叫 `shallowMount`。这个方法仍然可用——它与写 `shallow: true` 是一样的。
+:::
+
+## 桩化所有子组件但有例外
+
+有时你想要桩化*所有*自定义组件，除了特定的一个。让我们考虑一个例子：
+
+```js
+const ComplexA = {
+  template: '<h2>Hello from real component!</h2>'
+}
+
+const ComplexComponent = {
+  components: { ComplexA, ComplexB, ComplexC },
+  template: `
+    <h1>Welcome to Vue.js 3</h1>
+    <ComplexA />
+    <ComplexB />
+    <ComplexC />
+  `
+}
+```
+
+通过使用 `shallow` 挂载选项，可以自动桩化所有子组件。如果我们想要明确选择不桩化特定组件，可以在 `stubs` 中提供其名称，值设置为 `false。`
+
+```js {3}
+test('shallow allows opt-out of stubbing specific component', () => {
+  const wrapper = mount(ComplexComponent, {
+    shallow: true,
+    global: {
+      stubs: { ComplexA: false }
+    }
+  })
+
+  console.log(wrapper.html())
+  /*
+    <h1>Welcome to Vue.js 3</h1>
+    <h2>Hello from real component!</h2>
+    <complex-b-stub></complex-b-stub>
+    <complex-c-stub></complex-c-stub>
+  */
+})
+```
+
+## 桩化异步组件
+
+如果你想要桩化一个异步组件，则有两种行为。例如，你可能有这样的组件：
+
+```js
+// AsyncComponent.js
+export default defineComponent({
+  name: 'AsyncComponent',
+  template: '<span>AsyncComponent</span>'
+})
+
+// App.js
+const App = defineComponent({
+  components: {
+    MyComponent: defineAsyncComponent(() => import('./AsyncComponent'))
+  },
+  template: '<MyComponent/>'
+})
+```
+
+第一种行为是使用你在组件中定义的键来加载异步组件。在这个例子中，我们使用了键 “MyComponent”。
+在测试用例中不需要使用 `async/await`，因为组件在解析之前已经被桩化。
+
+```js
+test('stubs async component without resolving', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        MyComponent: true
+      }
+    }
+  })
+
+  expect(wrapper.html()).toBe('<my-component-stub></my-component-stub>')
+})
+```
+
+第二种行为是使用异步组件的名称。在这个例子中，我们使用了名称 “AsyncComponent”。
+现在需要使用 `async/await`，因为异步组件需要解析，然后才能通过在异步组件中定义的名称进行桩化。
+
+**确保在异步组件中定义名称！**
+
+```js
+test('stubs async component with resolving', async () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        AsyncComponent: true
+      }
+    }
+  })
+
+  await flushPromises()
+
+  expect(wrapper.html()).toBe('<async-component-stub></async-component-stub>')
+})
+```
+
+## 桩化指令
+
+有时指令会执行非常复杂的操作，比如进行大量的 DOM 操作，这可能导致测试中的错误 (由于 JSDOM 与整个 DOM 行为不相似)。一个常见的例子是来自各种库的工具提示指令，它们通常严重依赖于测量 DOM 节点的位置/大小。
+
+在这个例子中，我们有另一个 `<App>`，它渲染带有工具提示的消息：
+
+```js
+// 在某处声明的工具提示指令，命名为 `Tooltip`
+
+const App = {
+  directives: {
+    Tooltip
+  },
+  template: '<h1 v-tooltip title="Welcome tooltip">Welcome to Vue.js 3</h1>'
+}
+```
+
+我们不想在这个测试中执行 `Tooltip` 指令的代码，我们只想断言消息是否被渲染。在这种情况下，我们可以使用 `stubs`，它出现在 `global` 挂载选项中，传入 `vTooltip`。
+
+```js
+test('stubs component with custom template', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        vTooltip: true
+      }
+    }
+  })
+
+  console.log(wrapper.html())
+  // <h1>Welcome to Vue.js 3</h1>
+
+  expect(wrapper.html()).toContain('Welcome to Vue.js 3')
+})
+```
+
+::: tip
+使用 `vCustomDirective` 命名方案来区分组件和指令，灵感来自于[相同方法](https://vuejs.org/api/sfc-script-setup.html#using-custom-directives)在 `<script setup>` 中的使用。
+:::
+
+有时，我们需要指令功能的一部分 (通常是因为某些代码依赖于它)。假设我们的指令在执行时添加 `with-tooltip` CSS 类，而这对我们的代码是重要的行为。在这种情况下，我们可以用我们的模拟指令实现替换 `true`。
+
+```js
+test('stubs component with custom template', () => {
+  const wrapper = mount(App, {
+    global: {
+      stubs: {
+        vTooltip: {
+          beforeMount(el: Element) {
+            console.log('directive called')
+            el.classList.add('with-tooltip')
+          }
+        }
+      }
+    }
+  })
+
+  // 'directive called' 被记录到控制台
+
+  console.log(wrapper.html())
+  // <h1 class="with-tooltip">Welcome to Vue.js 3</h1>
+
+  expect(wrapper.classes('with-tooltip')).toBe(true)
+})
+```
+
+我们刚刚用自己的实现替换了指令的实现！
+
+::: warning
+桩化指令在功能组件或 `<script setup>` 中不起作用，因为在 [withDirectives](https://vuejs.org/api/render-function.html#withdirectives) 函数中缺少指令名称。如果你需要模拟在功能组件中使用的指令，请考虑通过你的测试框架模拟指令模块。请参见 <https://github.com/vuejs/core/issues/6887> 以解锁此功能。
+:::
+
+## 默认插槽和 `shallow`
+
+由于 `shallow` 会桩化组件的所有内容，因此在使用 `shallow` 时，任何 `<slot>` 都不会被渲染。虽然在大多数情况下这不是问题，但在某些场景下这并不理想。
+
+```js
+const CustomButton = {
+  template: `
+    <button>
+      <slot />
+    </button>
+  `
+}
+```
+
+你可能会这样使用它：
+
+```js
+const App = {
+  props: ['authenticated'],
+  components: { CustomButton },
+  template: `
+    <custom-button>
+      <div v-if="authenticated">Log out</div>
+      <div v-else>Log in</div>
+    </custom-button>
+  `
+}
+```
+
+如果你使用 `shallow`，插槽将不会被渲染，因为 `<custom-button />` 中的渲染函数被桩化了。这意味着你将无法验证是否渲染了正确的文本！
+
+对于这种用例，你可以使用 `config.renderStubDefaultSlot`，即使在使用 `shallow` 时也会渲染默认插槽内容：
+
+```js {1,4,8}
+import { config, mount } from '@vue/test-utils'
+
+beforeAll(() => {
+  config.global.renderStubDefaultSlot = true
+})
+
+afterAll(() => {
+  config.global.renderStubDefaultSlot = false
+})
+
+test('shallow with stubs', () => {
+  const wrapper = mount(AnotherApp, {
+    props: {
+      authenticated: true
+    },
+    shallow: true
+  })
+
+  expect(wrapper.html()).toContain('Log out')
+})
+```
+
+由于此行为是全局的，而不是逐个 `mount` 的基础上，你需要记得在每个测试之前和之后启用/禁用它。
+
+::: tip
+你也可以通过在测试设置文件中导入 `config` 并将 `renderStubDefaultSlot` 设置为 `true` 来全局启用此功能。不幸的是，由于技术限制，此行为不扩展到默认插槽以外的插槽。
+:::
+
+## `mount`、`shallow` 和 `stubs`：选择哪个，何时使用？
+
+根据经验，**你的测试越像软件的使用方式**，它们就能给你提供越多的信心。
+
+使用 `mount` 的测试将渲染整个组件层次结构，这与用户在真实浏览器中的体验更接近。
+
+另一方面，使用 `shallow` 的测试则专注于特定组件。`shallow` 对于在完全隔离的情况下测试高级组件非常有用。如果你只有一两个与测试无关的组件，考虑使用 `mount` 结合 `stubs` 而不是 `shallow`。你桩化得越多，测试就越不具备生产环境的特性。
+
+请记住，无论你选择全挂载还是浅层渲染 (shallow render)，好的测试都应专注于输入 (`props` 和用户交互，如使用 `trigger`) 和输出 (渲染的 DOM 元素和事件)，而不是实现细节。
+
+因此，无论你选择哪种挂载方法，我们建议你牢记这些指导原则。
+
+## 结论
+
+- 使用 `global.stubs` 将组件或指令替换为虚拟实现，以简化测试
+- 使用 `shallow: true` (或 `shallowMount`) 来桩化所有子组件
+- 使用 `global.renderStubDefaultSlot` 渲染桩化组件的默认 `<slot>`
diff --git a/docs/zh/guide/advanced/teleport.md b/docs/zh/guide/advanced/teleport.md
new file mode 100644
index 000000000..d492e8aad
--- /dev/null
+++ b/docs/zh/guide/advanced/teleport.md
@@ -0,0 +1,210 @@
+# 测试 Teleport
+
+Vue 3 引入了一个新的内置组件：`<Teleport>`，它允许组件将其内容 “传送” 到其 `<template>` 之外的某处。大多数使用 Vue Test Utils 编写的测试都是针对传递给 `mount` 的组件，这在测试被传送到最初渲染组件之外的组件时引入了一些复杂性。
+
+以下是一些使用 `<Teleport>` 测试组件的策略和技术。
+
+::: tip
+如果你想测试组件的其余部分，而忽略 `teleport`，可以通过在[全局 stubs 选项](../../api/#global-stubs)中传递 `teleport: true` 来 stub `teleport`。
+:::
+
+## 示例
+
+在这个示例中，我们正在测试一个 `<Navbar>` 组件。它在 `<Teleport>` 中渲染一个 `<Signup>` 组件。`<Teleport>` 的 `target` 属性是位于 `<Navbar>` 组件之外的一个元素。
+
+这是 `Navbar.vue` 组件：
+
+```vue
+<template>
+  <Teleport to="#modal">
+    <Signup />
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Signup from './Signup.vue'
+
+export default defineComponent({
+  components: {
+    Signup
+  }
+})
+</script>
+```
+
+它简单地将一个 `<Signup>` 传送到其他地方。这对于此示例的目的来说很简单。
+
+`Signup.vue` 是一个表单，用于验证 `username` 是否大于 8 个字符。如果是，当提交时，它会发出一个 `signup` 事件，并将 `username` 作为有效载荷。测试这个将是我们的目标。
+
+```vue
+<template>
+  <div>
+    <form @submit.prevent="submit">
+      <input v-model="username" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ['signup'],
+  data() {
+    return {
+      username: ''
+    }
+  },
+  computed: {
+    error() {
+      return this.username.length < 8
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.error) {
+        this.$emit('signup', this.username)
+      }
+    }
+  }
+}
+</script>
+```
+
+## 挂载组件
+
+从一个最小的测试开始：
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+test('emits a signup event when valid', async () => {
+  const wrapper = mount(Navbar)
+})
+```
+
+运行此测试会给出一个警告：`[Vue warn]: Failed to locate Teleport target with selector "#modal"`。让我们创建它：
+
+```ts {5-15}
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+beforeEach(() => {
+  // 创建 teleport 的目标
+  const el = document.createElement('div')
+  el.id = 'modal'
+  document.body.appendChild(el)
+})
+
+afterEach(() => {
+  // 清理
+  document.body.innerHTML = ''
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+})
+```
+
+我们在这个示例中使用 Jest，它不会在每个测试中重置 DOM。因此，在每个测试后使用 `afterEach` 进行清理是一个好主意。
+
+## 与 Teleport 组件交互
+
+接下来要做的是填写用户名输入。不幸的是，我们无法使用 `wrapper.find('input')`。为什么呢？执行 `console.log(wrapper.html())` 显示给我们以下内容：
+
+```html
+<!--teleport start-->
+<!--teleport end-->
+```
+
+我们看到 Vue 用于处理 `<Teleport>` 的一些注释——但没有 `<input>`。这是因为 `<Signup>` 组件 (及其 HTML) 不再渲染在 `<Navbar>` 内部——它被传送到了外面。
+
+尽管实际的 HTML 被传送到外部，但与 `<Navbar>` 相关的虚拟 DOM 仍然保持对原始组件的引用。这意味着你可以使用 `getComponent` 和 `findComponent`，它们在虚拟 DOM 上操作，而不是常规 DOM。
+
+```ts {12}
+beforeEach(() => {
+  // ...
+})
+
+afterEach(() => {
+  // ...
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  wrapper.getComponent(Signup) // got it!
+})
+```
+
+`getComponent` 返回一个 `VueWrapper`。现在你可以使用 `get`、`find` 和 `trigger` 等方法。
+
+让我们完成测试：
+
+```ts {4-8}
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  const signup = wrapper.getComponent(Signup)
+  await signup.get('input').setValue('valid_username')
+  await signup.get('form').trigger('submit.prevent')
+
+  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
+})
+```
+
+它通过了！
+
+完整的测试：
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+import Signup from './Signup.vue'
+
+beforeEach(() => {
+  // 创建 teleport 的目标
+  const el = document.createElement('div')
+  el.id = 'modal'
+  document.body.appendChild(el)
+})
+
+afterEach(() => {
+  // 清理
+  document.body.innerHTML = ''
+})
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar)
+
+  const signup = wrapper.getComponent(Signup)
+  await signup.get('input').setValue('valid_username')
+  await signup.get('form').trigger('submit.prevent')
+
+  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
+})
+```
+
+你可以通过使用 `teleport: true` 来 stub teleport：
+
+```ts
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar.vue'
+
+test('teleport', async () => {
+  const wrapper = mount(Navbar, {
+    global: {
+      stubs: {
+        teleport: true
+      }
+    }
+  })
+})
+```
+
+## 结论
+
+- 使用 `document.createElement` 创建一个 teleport 目标。
+- 使用 `getComponent` 或 `findComponent` 查找传送的组件，这些方法在虚拟 DOM 层面上操作
diff --git a/docs/zh/guide/advanced/transitions.md b/docs/zh/guide/advanced/transitions.md
new file mode 100644
index 000000000..bcedce79d
--- /dev/null
+++ b/docs/zh/guide/advanced/transitions.md
@@ -0,0 +1,71 @@
+# 过渡效果
+
+通常情况下，你可能希望测试过渡后的 DOM 结构，这就是为什么 Vue Test Utils 默认会模拟 `<transition>` 和 `<transition-group>` 的原因。
+
+以下是一个简单的组件，它通过淡入淡出的过渡效果切换内容：
+
+```vue
+<template>
+  <button @click="show = !show">Toggle</button>
+
+  <transition name="fade">
+    <p v-if="show">hello</p>
+  </transition>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const show = ref(false)
+
+    return {
+      show
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+```
+
+由于 Vue Test Utils 会模拟内置的过渡效果，你可以像测试其他组件一样测试上述组件：
+
+```js
+import Component from './Component.vue'
+import { mount } from '@vue/test-utils'
+
+test('works with transitions', async () => {
+  const wrapper = mount(Component)
+
+  expect(wrapper.find('hello').exists()).toBe(false)
+
+  await wrapper.find('button').trigger('click')
+
+  // 点击按钮后，<p> 元素存在并且可见
+  expect(wrapper.get('p').text()).toEqual('hello')
+})
+```
+
+## 部分支持
+
+Vue Test Utils 内置的过渡效果模拟比较简单，并不涵盖 Vue 所有的[过渡特性](https://vuejs.org/guide/built-ins/transition)。例如，[JavaScript 钩子](https://vuejs.org/guide/built-ins/transition#javascript-hooks)不被支持。这一限制可能会导致 Vue 发出警告。
+
+::: tip
+潜在解决方案：
+
+- 你可以通过将 [global stubs transition](../../api/#global-stubs) 设置为 false 来关闭自动模拟。
+- 如果需要，你可以创建自己的过渡效果模拟，以处理这些钩子。
+- 你可以在测试中捕获警告以消除它。
+  :::
diff --git a/docs/zh/guide/advanced/v-model.md b/docs/zh/guide/advanced/v-model.md
new file mode 100644
index 000000000..eee3fc80d
--- /dev/null
+++ b/docs/zh/guide/advanced/v-model.md
@@ -0,0 +1,98 @@
+# 测试 `v-model`
+
+在编写依赖于 `v-model` 交互的组件时 (即 `update:modelValue` 事件)，需要处理 `event` 和 `props`。
+
+可以查看 [“vmodel integration” 讨论](https://github.com/vuejs/test-utils/discussions/279)获取一些社区解决方案。
+
+有关 v-model 事件的更多信息，请查看 [VueJS VModel 事件文档](https://vuejs.org/guide/components/events.html#usage-with-v-model)。
+
+## 简单的示例
+
+这是一个简单的编辑器组件：
+
+```js
+const Editor = {
+  props: {
+    label: String,
+    modelValue: String
+  },
+  emits: ['update:modelValue'],
+  template: `<div>
+    <label>{{label}}</label>
+    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
+  </div>`
+}
+```
+
+这个组件将表现得像一个输入组件：
+
+```js
+const App = {
+  components: {
+    Editor
+  },
+  template: `<editor v-model="text" label="test" />`,
+  data() {
+    return {
+      text: 'test'
+    }
+  }
+}
+```
+
+现在，当我们在输入框中输入时，它将更新组件中的 `text`。
+
+要测试这种行为，可以使用：
+
+```js
+test('modelValue should be updated', async () => {
+  const wrapper = mount(Editor, {
+    props: {
+      modelValue: 'initialText',
+      'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+    }
+  })
+
+  await wrapper.find('input').setValue('test')
+  expect(wrapper.props('modelValue')).toBe('test')
+})
+```
+
+# 多个 `v-model`
+
+在某些情况下，我们可以有多个 `v-model` 定向到特定属性。
+
+例如在一个货币编辑器中，我们可以有 `currency` 和 `modelValue` 属性。
+
+```js
+const MoneyEditor = {
+  template: `<div> 
+    <input :value="currency" @input="$emit('update:currency', $event.target.value)"/>
+    <input :value="modelValue" type="number" @input="$emit('update:modelValue', $event.target.value)"/>
+  </div>`,
+  props: ['currency', 'modelValue'],
+  emits: ['update:currency', 'update:modelValue']
+}
+```
+
+我们可以通过以下方式测试这两个属性：
+
+```js
+test('modelValue and currency should be updated', async () => {
+  const wrapper = mount(MoneyEditor, {
+    props: {
+      modelValue: 'initialText',
+      'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+      currency: '$',
+      'onUpdate:currency': (e) => wrapper.setProps({ currency: e })
+    }
+  })
+
+  const [currencyInput, modelValueInput] = wrapper.findAll('input')
+  await modelValueInput.setValue('test')
+  await currencyInput.setValue('£')
+
+  expect(wrapper.props('modelValue')).toBe('test')
+  expect(wrapper.props('currency')).toBe('£')
+})
+```
diff --git a/docs/zh/guide/advanced/vue-router.md b/docs/zh/guide/advanced/vue-router.md
new file mode 100644
index 000000000..921837545
--- /dev/null
+++ b/docs/zh/guide/advanced/vue-router.md
@@ -0,0 +1,495 @@
+# 测试 Vue Router
+
+本文将介绍两种方法测试使用 Vue Router 的应用程序：
+
+1. 使用真实的 Vue Router，这种方法更接近生产环境，但在测试较大应用时可能会导致复杂性。
+2. 使用模拟的路由器，允许对测试环境进行更细粒度的控制。
+
+请注意，Vue Test Utils 并未提供任何特殊函数来辅助测试依赖于 Vue Router 的组件。
+
+## 使用模拟路由器
+
+使用模拟路由器可以避免在单元测试中关注 Vue Router 的实现细节。
+
+我们可以创建一个仅实现我们感兴趣的功能的模拟版本，而不是使用真实的 Vue Router 实例。可以使用 `jest.mock` (如果你使用 Jest) 和 `global.components` 的组合来实现。
+
+在模拟依赖时，通常是因为**我们不关心测试其行为**。我们不想测试点击 `<router-link>` 是否导航到正确的页面，我们可能更关心的是确保 `<a>` 拥有正确的 `to` 属性。
+
+让我们来看一个更实际的例子！这个组件展示了一个按钮，当用户经过身份验证时，会将其重定向到编辑帖子页面 (基于当前路由参数)。未经过身份验证的用户则会被重定向到 `/404` 路由。
+
+```js
+const Component = {
+  template: `<button @click="redirect">Click to Edit</button>`,
+  props: ['isAuthenticated'],
+  methods: {
+    redirect() {
+      if (this.isAuthenticated) {
+        this.$router.push(`/posts/${this.$route.params.id}/edit`)
+      } else {
+        this.$router.push('/404')
+      }
+    }
+  }
+}
+```
+
+我们可以使用真实的路由器，然后导航到该组件的正确路由，点击按钮后断言正确的页面是否被渲染……然而，对于相对简单的测试来说，这需要很多设置。我们想要编写的测试核心是 “如果经过身份验证，则重定向到 X，否则重定向到 Y”。下面是如何使用 `global.mocks` 属性模拟路由的示例：
+
+```js
+import { mount } from '@vue/test-utils'
+
+test('allows authenticated user to edit a post', async () => {
+  const mockRoute = {
+    params: {
+      id: 1
+    }
+  }
+  const mockRouter = {
+    push: jest.fn()
+  }
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: true
+    },
+    global: {
+      mocks: {
+        $route: mockRoute,
+        $router: mockRouter
+      }
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(mockRouter.push).toHaveBeenCalledTimes(1)
+  expect(mockRouter.push).toHaveBeenCalledWith('/posts/1/edit')
+})
+
+test('redirect an unauthenticated user to 404', async () => {
+  const mockRoute = {
+    params: {
+      id: 1
+    }
+  }
+  const mockRouter = {
+    push: jest.fn()
+  }
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: false
+    },
+    global: {
+      mocks: {
+        $route: mockRoute,
+        $router: mockRouter
+      }
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(mockRouter.push).toHaveBeenCalledTimes(1)
+  expect(mockRouter.push).toHaveBeenCalledWith('/404')
+})
+```
+
+我们使用 `global.mocks` 提供了必要的依赖 (`this.$route` 和 `this.$router`)，为每个测试设置了理想状态。
+
+然后，我们能够使用 `jest.fn()` 监控 `this.$router.push` 被调用的次数和参数。最重要的是，我们不必在测试中处理 Vue Router 的复杂性或注意事项！我们只关注测试应用逻辑。
+
+:::tip
+你可能想以端到端的方式测试整个系统。可以考虑使用 [Cypress](https://www.cypress.io/) 进行使用真实浏览器的完整系统测试。
+:::
+
+## 使用真实路由器
+
+现在我们已经看到了如何使用模拟路由器，让我们看看如何使用真实的 Vue Router。
+
+我们来创建一个基本的博客应用程序，使用 Vue Router。帖子在 `/posts` 路由上列出：
+
+```js
+const App = {
+  template: `
+    <router-link to="/posts">Go to posts</router-link>
+    <router-view />
+  `
+}
+
+const Posts = {
+  template: `
+    <h1>Posts</h1>
+    <ul>
+      <li v-for="post in posts" :key="post.id">
+        {{ post.name }}
+      </li>
+    </ul>
+  `,
+  data() {
+    return {
+      posts: [{ id: 1, name: 'Testing Vue Router' }]
+    }
+  }
+}
+```
+
+应用程序显示一个指向 `/posts` 的 `<router-link>`，在该路由下我们列出帖子。
+
+真实路由器如下所示。请注意，我们将路由单独导出，以便可以为每个单独的测试实例化一个新的路由器。
+
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: {
+      template: 'Welcome to the blogging app'
+    }
+  },
+  {
+    path: '/posts',
+    component: Posts
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes
+})
+
+export { routes }
+
+export default router
+```
+
+验证使用 Vue Router 测试应用程序的最佳方法是让警告引导我们。以下最小测试足以让我们开始：
+
+```js
+import { mount } from '@vue/test-utils'
+
+test('routing', () => {
+  const wrapper = mount(App)
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+})
+```
+
+测试失败。它还打印了两个警告：
+
+```bash
+console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
+  [Vue warn]: Failed to resolve component: router-link
+
+console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
+  [Vue warn]: Failed to resolve component: router-view
+```
+
+找不到 `<router-link>` 和 `<router-view>` 组件。我们需要安装 Vue Router！由于 Vue Router 是一个插件，我们使用 `global.plugins` 挂载选项来安装它：
+
+```js {12,13,14}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/router' // 此导入应指向你上面声明的路由文件
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes
+})
+
+test('routing', () => {
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+})
+```
+
+这两个警告现在消失了——但现在我们又有了另一个警告：
+
+```js
+console.warn node_modules/vue-router/dist/vue-router.cjs.js:225
+  [Vue Router warn]: Unexpected error when starting the router: TypeError: Cannot read property '_history' of null
+```
+
+虽然警告的内容并不完全明确，但它与 Vue Router 4 **处理路由是异步的**有关。
+
+Vue Router 提供了一个 `isReady` 函数，告诉我们路由器何时准备就绪。然后我们可以 `await` 它，以确保初始导航已发生。
+
+```js {13,14}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/router'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes
+})
+
+test('routing', async () => {
+  router.push('/')
+
+  // 这行之后，路由已准备就绪
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+})
+```
+
+测试现在通过了！这确实需要一些工作，但现在我们确保应用程序正确导航到初始路由。
+
+现在让我们导航到 `/posts`，确保路由按预期工作：
+
+```js {21,22}
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/router'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes
+})
+
+test('routing', async () => {
+  router.push('/')
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+
+  await wrapper.find('a').trigger('click')
+  expect(wrapper.html()).toContain('Testing Vue Router')
+})
+```
+
+又一个有些隐晦的错误：
+
+```js
+console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:39
+  [Vue warn]: Unhandled error during execution of native event handler
+    at <RouterLink to="/posts" >
+
+console.error node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:211
+  TypeError: Cannot read property '_history' of null
+```
+
+同样，由于 Vue Router 4 的新异步特性，我们需要在进行任何断言之前 `await` 路由完成。
+
+然而，在这种情况下，我们没有可以等待的 *hasNavigated* 钩子。一种替代方法是使用从 Vue Test Utils 导出的 `flushPromises` 函数：
+
+```js {1,22}
+import { mount, flushPromises } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/router'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: routes
+})
+
+test('routing', async () => {
+  router.push('/')
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+
+  await wrapper.find('a').trigger('click')
+  await flushPromises()
+  expect(wrapper.html()).toContain('Testing Vue Router')
+})
+```
+
+它*终于*通过了。太好了！然而，这一切都非常手动——而且这是针对一个微小且无关紧要的应用程序。这就是在使用 Vue Test Utils 测试 Vue 组件时，使用模拟路由器是一种常见方法的原因。如果你倾向于继续使用真实的路由器，请记住每个测试都应该使用自己实例化的路由器，如下所示：
+
+```js {1,19}
+import { mount, flushPromises } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/router'
+
+let router
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes
+  })
+})
+
+test('routing', async () => {
+  router.push('/')
+  await router.isReady()
+
+  const wrapper = mount(App, {
+    global: {
+      plugins: [router]
+    }
+  })
+  expect(wrapper.html()).toContain('Welcome to the blogging app')
+
+  await wrapper.find('a').trigger('click')
+  await flushPromises()
+  expect(wrapper.html()).toContain('Testing Vue Router')
+})
+```
+
+## 在组合式 API 中使用模拟路由器
+
+Vue Router 4 允许在组合式 API 的 `setup` 函数中使用路由器和路由。
+
+考虑将相同的示例组件重写为组合式 API。
+
+```js
+import { useRouter, useRoute } from 'vue-router'
+
+const Component = {
+  template: `<button @click="redirect">Click to Edit</button>`,
+  props: ['isAuthenticated'],
+  setup(props) {
+    const router = useRouter()
+    const route = useRoute()
+
+    const redirect = () => {
+      if (props.isAuthenticated) {
+        router.push(`/posts/${route.params.id}/edit`)
+      } else {
+        router.push('/404')
+      }
+    }
+
+    return {
+      redirect
+    }
+  }
+}
+```
+
+这次为了测试组件，我们将使用 Jest 模拟导入的资源 `vue-router`，并直接模拟路由器和路由。
+
+```js
+import { useRouter, useRoute } from 'vue-router'
+
+jest.mock('vue-router', () => ({
+  useRoute: jest.fn(),
+  useRouter: jest.fn(() => ({
+    push: () => {}
+  }))
+}))
+
+test('allows authenticated user to edit a post', () => {
+  useRoute.mockImplementationOnce(() => ({
+    params: {
+      id: 1
+    }
+  }))
+
+  const push = jest.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: true
+    },
+    global: {
+      stubs: ["router-link", "router-view"], // 为可能在模板中渲染的 router-link 和 router-view 提供 Stubs
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(push).toHaveBeenCalledTimes(1)
+  expect(push).toHaveBeenCalledWith('/posts/1/edit')
+})
+
+test('redirect an unauthenticated user to 404', () => {
+  useRoute.mockImplementationOnce(() => ({
+    params: {
+      id: 1
+    }
+  }))
+
+  const push = jest.fn()
+  useRouter.mockImplementationOnce(() => ({
+    push
+  }))
+
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: false
+    }
+    global: {
+      stubs: ["router-link", "router-view"], // 为可能在模板中渲染的 router-link 和 router-view 提供 Stubs
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(push).toHaveBeenCalledTimes(1)
+  expect(push).toHaveBeenCalledWith('/404')
+})
+```
+
+## 使用真实路由器与组合式 API
+
+使用真实路由器与组合式 API 的方式与使用选项 API 时相同。请记住，和选项 API 一样，建议为每个测试实例化一个新的路由器对象，而不是直接从应用程序中导入路由器。
+
+```js
+import { mount } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from '@/router'
+
+let router
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes
+  })
+
+  router.push('/')
+  await router.isReady()
+})
+
+test('allows authenticated user to edit a post', async () => {
+  const wrapper = mount(Component, {
+    props: {
+      isAuthenticated: true
+    },
+    global: {
+      plugins: [router]
+    }
+  })
+
+  const push = jest.spyOn(router, 'push')
+  await wrapper.find('button').trigger('click')
+
+  expect(push).toHaveBeenCalledTimes(1)
+  expect(push).toHaveBeenCalledWith('/posts/1/edit')
+})
+```
+
+对于那些喜欢非手动方法的人，Posva 创建的库 [vue-router-mock](https://github.com/posva/vue-router-mock) 也可以作为替代方案。
+
+## 结论
+
+- 你可以在测试中使用真实的路由器实例。
+- 但是有一些注意事项：Vue Router 4 是异步的，我们需要在编写测试时考虑这一点。
+- 对于更复杂的应用程序，考虑模拟路由器依赖项，专注于测试底层逻辑。
+- 尽可能利用测试运行器的桩 (stub)/模拟功能。
+- 使用 `global.mocks` 来模拟全局依赖项，例如 `this.$route` 和 `this.$router`。
diff --git a/docs/zh/guide/advanced/vuex.md b/docs/zh/guide/advanced/vuex.md
new file mode 100644
index 000000000..d2b716bcc
--- /dev/null
+++ b/docs/zh/guide/advanced/vuex.md
@@ -0,0 +1,303 @@
+# 测试 Vuex
+
+Vuex 只是一个实现细节；在测试使用 Vuex 的组件时不需要特别处理。尽管如此，有一些技术可以使你的测试更易读和易写。我们将在这里讨论这些技术。
+
+本指南假设你对 Vuex 已经熟悉。Vuex 4 是与 Vue.js 3 一起使用的版本。可以在[这里](https://next.vuex.vuejs.org/)阅读文档。
+
+## 简单示例
+
+以下是一个简单的 Vuex 存储和一个依赖于 Vuex 存储的组件：
+
+```js
+import { createStore } from 'vuex'
+
+const store = createStore({
+  state() {
+    return {
+      count: 0
+    }
+  },
+  mutations: {
+    increment(state: any) {
+      state.count += 1
+    }
+  }
+})
+```
+
+这个存储简单地存储了一个计数，当提交 `increment` 变更时增加计数。以下是我们将要测试的组件：
+
+```js
+const App = {
+  template: `
+    <div>
+      <button @click="increment" />
+      Count: {{ count }}
+    </div>
+  `,
+  computed: {
+    count() {
+      return this.$store.state.count
+    }
+  },
+  methods: {
+    increment() {
+      this.$store.commit('increment')
+    }
+  }
+}
+```
+
+## 使用真实的 Vuex 存储进行测试
+
+为了充分测试这个组件和 Vuex 存储的工作情况，我们将点击 `<button>` 并断言计数是否增加。在你的 Vue 应用中，通常在 `main.js` 中，你可以这样安装 Vuex：
+
+```js
+const app = createApp(App)
+app.use(store)
+```
+
+这是因为 Vuex 是一个插件。插件通过调用 `app.use` 并传入插件来应用。
+
+Vue Test Utils 也允许你安装插件，使用 `global.plugins` 挂载选项。
+
+```js
+import { createStore } from 'vuex'
+
+const store = createStore({
+  state() {
+    return {
+      count: 0
+    }
+  },
+  mutations: {
+    increment(state: any) {
+      state.count += 1
+    }
+  }
+})
+
+test('vuex', async () => {
+  const wrapper = mount(App, {
+    global: {
+      plugins: [store]
+    }
+  })
+
+  await wrapper.find('button').trigger('click')
+
+  expect(wrapper.html()).toContain('Count: 1')
+})
+```
+
+在安装插件后，我们使用 `trigger` 点击按钮并断言 `count` 是否增加。这种测试覆盖了不同系统之间的交互 (在这种情况下是组件和存储)，称为集成测试。
+
+## 使用模拟存储进行测试
+
+相比之下，单元测试可能会将组件和存储分开进行测试。如果你有一个非常大的应用程序和复杂的存储，这可能会很有用。对于这种用例，你可以使用 `global.mocks` 模拟你感兴趣的存储部分
+
+```js
+test('vuex using a mock store', async () => {
+  const $store = {
+    state: {
+      count: 25
+    },
+    commit: jest.fn()
+  }
+
+  const wrapper = mount(App, {
+    global: {
+      mocks: {
+        $store
+      }
+    }
+  })
+
+  expect(wrapper.html()).toContain('Count: 25')
+  await wrapper.find('button').trigger('click')
+  expect($store.commit).toHaveBeenCalled()
+})
+```
+
+我们没有使用真实的 Vuex 存储并通过 `global.plugins` 安装它，而是创建了自己的模拟存储，仅实现了组件中使用的 Vuex 部分 (在这种情况下是 `state` 和 `commit` 函数)。
+
+虽然在隔离中测试存储似乎很方便，但请注意，如果你破坏了 Vuex 存储，它不会给你任何警告。请仔细考虑是否要模拟 Vuex 存储，或者使用真实的存储，并理解其中的权衡。
+
+## 独立测试 Vuex
+
+你可能希望完全独立地测试你的 Vuex 变更或动作，特别是如果它们很复杂。你不需要 Vue Test Utils，因为 Vuex 存储只是常规的 JavaScript。以下是如何在没有 Vue Test Utils 的情况下测试 `increment` 变更：
+
+```js
+test('increment mutation', () => {
+  const store = createStore({
+    state: {
+      count: 0
+    },
+    mutations: {
+      increment(state) {
+        state.count += 1
+      }
+    }
+  })
+
+  store.commit('increment')
+
+  expect(store.state.count).toBe(1)
+})
+```
+
+## 预设 Vuex 状态
+
+有时在测试中将 Vuex 存储设置为特定状态是有用的。除了 `global.mocks`，你可以使用创建一个包装 `createStore` 的函数，并接受一个参数来设置初始状态。在这个示例中，我们扩展 `increment` 以接受一个附加参数，该参数将添加到 `state.count` 上。如果未提供该参数，我们只将 `state.count` 增加 1。
+
+```js
+const createVuexStore = (initialState) =>
+  createStore({
+    state: {
+      count: 0,
+      ...initialState
+    },
+    mutations: {
+      increment(state, value = 1) {
+        state.count += value
+      }
+    }
+  })
+
+test('increment mutation without passing a value', () => {
+  const store = createVuexStore({ count: 20 })
+  store.commit('increment')
+  expect(store.state.count).toBe(21)
+})
+
+test('increment mutation with a value', () => {
+  const store = createVuexStore({ count: -10 })
+  store.commit('increment', 15)
+  expect(store.state.count).toBe(5)
+})
+```
+
+通过创建一个接受初始状态的 `createVuexStore` 函数，我们可以轻松设置初始状态。这使我们能够测试所有边界情况，同时简化我们的测试。
+
+[Vue 测试手册](https://lmiller1990.github.io/vue-testing-handbook/testing-vuex.html)中有更多关于测试 Vuex 的示例。注意：这些示例适用于 Vue.js 2 和 Vue Test Utils v1。思想和概念是相同的，Vue 测试手册将在不久的将来更新为 Vue.js 3 和 Vue Test Utils 2。
+
+## 使用组合 API 进行测试
+
+在使用组合 API 时，通过 `useStore` 函数访问 Vuex。[在这里阅读更多相关内容](https://next.vuex.vuejs.org/guide/composition-api.html)。
+
+`useStore` 可以与可选的唯一注入键一起使用，如 [Vuex 文档中所述](https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function)。
+
+它看起来像这样：
+
+```js
+import { createStore } from 'vuex'
+import { createApp } from 'vue'
+
+// 创建一个全局唯一的符号作为注入键
+const key = Symbol()
+
+const App = {
+  setup() {
+    // 使用唯一键访问存储
+    const store = useStore(key)
+  }
+}
+
+const store = createStore({
+  /* ... */
+})
+const app = createApp({
+  /* ... */
+})
+
+// 在调用 app.use(store) 时指定键作为第二个参数
+app.use(store, key)
+```
+
+为了避免在每次使用 `useStore` 时重复传递键参数，Vuex 文档建议将该逻辑提取到一个辅助函数中，并重用该函数，而不是使用默认的 `useStore` 函数。[在这里阅读更多内容](https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function)。使用 Vue Test Utils 提供存储的方法取决于组件中 `useStore` 函数的使用方式。
+
+### 测试不使用注入键的 `useStore` 的组件
+
+如果不使用注入键，存储数据可以通过全局 `provide` 挂载选项直接注入到组件中。注入的存储名称必须与组件中的名称相同，例如 “store”。
+
+#### 提供未键入的 `useStore` 示例
+
+```js
+import { createStore } from 'vuex'
+
+const store = createStore({
+  // ...
+})
+
+const wrapper = mount(App, {
+  global: {
+    provide: {
+      store: store
+    }
+  }
+})
+```
+
+### 测试使用注入键的 `useStore` 的组件
+
+当使用带有注入键的存储时，之前的方法将无法工作。存储实例将不会从 `useStore` 返回。为了访问正确的存储，需要提供标识符。
+
+它必须是传递给组件的 `setup` 函数中 `useStore` 的确切键，或者在自定义辅助函数中调用 `useStore` 时使用的键。由于 JavaScript symbols 是唯一的且无法重建，最好从真实的存储中导出该键。
+
+你可以使用 `global.provide` 和正确的键来注入存储，或者使用 `global.plugins` 安装存储并指定键
+
+#### 使用 `global.provide` 提供带有键的 `useStore`
+
+```js
+// store.js
+export const key = Symbol()
+```
+
+```js
+// app.spec.js
+import { createStore } from 'vuex'
+import { key } from './store'
+
+const store = createStore({
+  /* ... */
+})
+
+const wrapper = mount(App, {
+  global: {
+    provide: {
+      [key]: store
+    }
+  }
+})
+```
+
+#### 使用 `global.plugins` 提供带有键的 `useStore`
+
+```js
+// store.js
+export const key = Symbol()
+```
+
+```js
+// app.spec.js
+import { createStore } from 'vuex'
+import { key } from './store'
+
+const store = createStore({
+  /* ... */
+})
+
+const wrapper = mount(App, {
+  global: {
+    // 要传递选项给插件，请使用数组语法。
+    plugins: [[store, key]]
+  }
+})
+```
+
+## 结论
+
+- 使用 `global.plugins` 安装 Vuex 作为插件
+- 使用 `global.mocks` 模拟全局对象，例如 Vuex，以满足高级用例
+- 考虑单独测试复杂的 Vuex 变更和动作
+- 使用一个接受参数的函数来封装 `createStore`，以便设置特定的测试场景
diff --git a/docs/zh/guide/essentials/a-crash-course.md b/docs/zh/guide/essentials/a-crash-course.md
new file mode 100644
index 000000000..d818024d0
--- /dev/null
+++ b/docs/zh/guide/essentials/a-crash-course.md
@@ -0,0 +1,262 @@
+# 快速上手
+
+让我们直接开始吧！通过构建一个简单的待办事项应用程序并逐步编写测试，来学习 Vue Test Utils (VTU)。本指南将涵盖以下内容：
+
+- 挂载组件
+- 查找元素
+- 填写表单
+- 触发事件
+
+## 开始
+
+我们将从一个简单的 `TodoApp` 组件开始，该组件包含一个待办事项：
+
+```vue
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'TodoApp',
+
+  data() {
+    return {
+      todos: [
+        {
+          id: 1,
+          text: 'Learn Vue.js 3',
+          completed: false
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## 第一个测试 - 渲染待办事项
+
+我们将编写的第一个测试验证待办事项是否被渲染。先看测试代码，然后讨论每个部分：
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('renders a todo', () => {
+  const wrapper = mount(TodoApp)
+
+  const todo = wrapper.get('[data-test="todo"]')
+
+  expect(todo.text()).toBe('Learn Vue.js 3')
+})
+```
+
+我们首先导入 `mount`——这是在 VTU 中渲染组件的主要方式。使用 `test` 函数声明一个测试，并给出简短的描述。`test` 和 `expect` 函数在大多数测试运行器中是全局可用的 (此示例使用 [Jest](https://jestjs.io/))。如果 `test` 和 `expect` 看起来令人困惑，Jest 文档中有一个[更简单的示例](https://jestjs.io/docs/getting-started)，可以帮助你理解它们的用法和工作原理。
+
+接下来，我们调用 `mount` 并将组件作为第一个参数传入——这是几乎每个测试都会执行的操作。根据约定，我们将结果赋值给一个名为 `wrapper` 的变量，因为 `mount` 提供了一个简单的 “包装器”，它为测试提供了一些方便的方法。
+
+最后，我们使用另一个在许多测试运行器中常见的全局函数 - `expect`。我们的想法是，我们正在断言或*期望*实际输出与我们认为的应该匹配。在这个例子中，我们使用选择器 `data-test="todo"` 查找元素——在 DOM 中，这将看起来像 `<div data-test="todo">...</div>`。然后我们调用 `text` 方法获取内容，并期望它是 `'Learn Vue.js 3'`。
+
+> 使用 `data-test` 选择器并不是必需的，但它可以使你的测试更加稳定。随着应用程序的增长，类和 ID 往往会变化或移动——通过使用 `data-test`，其他开发人员可以清楚地知道哪些元素在测试中被使用，并且不应更改。
+
+## 使测试通过
+
+如果我们现在运行这个测试，它会失败，并显示以下错误信息：`Unable to get [data-test="todo"]`。这是因为我们没有渲染任何待办事项，因此 `get()` 调用未能返回一个包装器 (记住，VTU 将所有组件和 DOM 元素包装在一个带有一些方便方法的 “包装器 (wrapper)” 中)。让我们更新 `TodoApp.vue` 中的 `<template>` 来渲染 todos 数组：
+
+```vue
+<template>
+  <div>
+    <div v-for="todo in todos" :key="todo.id" data-test="todo">
+      {{ todo.text }}
+    </div>
+  </div>
+</template>
+```
+
+通过这个更改，测试通过了。恭喜你！你编写了第一个组件测试。
+
+## 添加新的待办事项
+
+我们将添加的下一个功能是允许用户创建新的待办事项。为此，我们需要一个包含输入框的表单，用户可以在其中输入文本。当用户提交表单时，我们期望新的待办事项被渲染。测试如下：
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('creates a todo', () => {
+  const wrapper = mount(TodoApp)
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
+
+  wrapper.get('[data-test="new-todo"]').setValue('New todo')
+  wrapper.get('[data-test="form"]').trigger('submit')
+
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+})
+```
+
+和往常一样，我们首先使用 `mount` 渲染元素。我们还断言只有 1 个待办事项被渲染——这使得我们清楚地知道我们正在添加一个额外的待办事项，正如测试的最后一行所暗示的那样。
+
+要更新 `<input>`，我们使用 `setValue`——这允许我们设置输入的值。
+
+在更新 `<input>` 之后，我们使用 `trigger` 方法来模拟用户提交表单。最后，我们断言待办事项的数量从 1 增加到 2。
+
+如果我们运行这个测试，它显然会失败。让我们更新 `TodoApp.vue` 以包含 `<form>` 和 `<input>` 元素，并使测试通过：
+
+```vue
+<template>
+  <div>
+    <div v-for="todo in todos" :key="todo.id" data-test="todo">
+      {{ todo.text }}
+    </div>
+
+    <form data-test="form" @submit.prevent="createTodo">
+      <input data-test="new-todo" v-model="newTodo" />
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TodoApp',
+
+  data() {
+    return {
+      newTodo: '',
+      todos: [
+        {
+          id: 1,
+          text: 'Learn Vue.js 3',
+          completed: false
+        }
+      ]
+    }
+  },
+
+  methods: {
+    createTodo() {
+      this.todos.push({
+        id: 2,
+        text: this.newTodo,
+        completed: false
+      })
+    }
+  }
+}
+</script>
+```
+
+我们使用 `v-model` 绑定到 `<input>`，并使用 `@submit` 监听表单提交。当表单被提交时，`createTodo` 被调用，将新的待办事项插入到 `todos` 数组中。
+
+虽然这看起来不错，但运行测试会显示一个错误：
+
+```
+expect(received).toHaveLength(expected)
+
+    Expected length: 2
+    Received length: 1
+    Received array:  [{"element": <div data-test="todo">Learn Vue.js 3</div>}]
+```
+
+待办事项的数量没有增加。问题在于 Jest 以同步方式执行测试，在最后一个函数调用后立即结束测试。然而，Vue 会异步更新 DOM。我们需要将测试标记为 `async`，并在任何可能导致 DOM 变化的方法上调用 `await`。`trigger` 和 `setValue` 都是这样的函数，我们只需在前面添加 `await`，测试就应该按预期工作：
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('creates a todo', async () => {
+  const wrapper = mount(TodoApp)
+
+  await wrapper.get('[data-test="new-todo"]').setValue('New todo')
+  await wrapper.get('[data-test="form"]').trigger('submit')
+
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+})
+```
+
+现在测试终于通过了！
+
+## 完成待办事项
+
+现在我们可以创建待办事项，让我们给用户增加一个功能，允许他们通过复选框标记待办事项为完成/未完成。像之前一样，让我们从失败的测试开始：
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('completes a todo', async () => {
+  const wrapper = mount(TodoApp)
+
+  await wrapper.get('[data-test="todo-checkbox"]').setValue(true)
+
+  expect(wrapper.get('[data-test="todo"]').classes()).toContain('completed')
+})
+```
+
+这个测试与之前的两个测试类似；我们找到一个元素并以相同的方式与之交互 (我们再次使用 `setValue`，因为我们在与 `<input>` 交互)。
+
+最后，我们进行断言。我们将为已完成的待办事项应用一个 `completed` 类——我们可以使用这个类来添加一些样式，以直观地指示待办事项的状态。
+
+我们可以通过更新 `<template>` 来使这个测试通过，以包含 `<input type="checkbox">` 和对待办事项元素的类绑定：
+
+```vue
+<template>
+  <div>
+    <div
+      v-for="todo in todos"
+      :key="todo.id"
+      data-test="todo"
+      :class="[todo.completed ? 'completed' : '']"
+    >
+      {{ todo.text }}
+      <input
+        type="checkbox"
+        v-model="todo.completed"
+        data-test="todo-checkbox"
+      />
+    </div>
+
+    <form data-test="form" @submit.prevent="createTodo">
+      <input data-test="new-todo" v-model="newTodo" />
+    </form>
+  </div>
+</template>
+```
+
+恭喜你！你编写了第一个组件测试。
+
+## 安排、执行、断言
+
+你可能注意到每个测试中的代码之间有一些新行。让我们再次详细查看第二个测试：
+
+```js
+import { mount } from '@vue/test-utils'
+import TodoApp from './TodoApp.vue'
+
+test('creates a todo', async () => {
+  const wrapper = mount(TodoApp)
+
+  await wrapper.get('[data-test="new-todo"]').setValue('New todo')
+  await wrapper.get('[data-test="form"]').trigger('submit')
+
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+})
+```
+
+测试分为三个不同的阶段，用新行分隔。这三个阶段代表了测试的三个阶段：**安排 (Arrange)**、**执行 (Act)** 和**断言 (Assert)**。
+
+在 *安排 (Arrange)* 阶段，我们为测试设置场景。更复杂的示例可能需要创建 Vuex 存储或填充数据库。
+
+在 *执行 (Act)* 阶段，我们模拟用户如何与组件或应用程序交互。
+
+在 *断言 (Assert)* 阶段，我们对组件的当前状态进行断言。
+
+几乎所有测试都将遵循这三个阶段。你不需要像本指南那样用新行将它们分开，但在编写测试时，牢记这三个阶段是很好的。
+
+## 结论
+
+- 使用 `mount()` 渲染组件。
+- 使用 `get()` 和 `findAll()` 查询 DOM。
+- `trigger()` 和 `setValue()` 是模拟用户输入的助手。
+- 更新 DOM 是一个异步操作，因此请确保使用 `async` 和 `await`。
+- 测试通常由三个阶段组成：安排、执行和断言。
diff --git a/docs/zh/guide/essentials/conditional-rendering.md b/docs/zh/guide/essentials/conditional-rendering.md
new file mode 100644
index 000000000..7dad01c1c
--- /dev/null
+++ b/docs/zh/guide/essentials/conditional-rendering.md
@@ -0,0 +1,147 @@
+# 条件渲染
+
+Vue Test Utils 提供了一系列功能，用于渲染组件并对其状态进行断言，以验证其是否正常工作。本文将探讨如何渲染组件，以及验证它们是否正确渲染内容。
+
+本文也可以作为[短视频](https://www.youtube.com/watch?v=T3CHtGgEFTs&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA&index=15)观看。
+
+## 查找元素
+
+Vue 的基本特性之一是能够动态插入和移除元素，使用 `v-if` 指令。让我们看看如何测试一个使用 `v-if` 的组件。
+
+```js
+const Nav = {
+  template: `
+    <nav>
+      <a id="profile" href="/profile">My Profile</a>
+      <a v-if="admin" id="admin" href="/admin">Admin</a>
+    </nav>
+  `,
+  data() {
+    return {
+      admin: false
+    }
+  }
+}
+```
+
+在 `<Nav>` 组件中，显示用户个人资料的链接。此外，如果 `admin` 的值为 `true`，则会显示指向管理员部分的链接。我们需要验证的三个场景是：
+
+1. 应该显示 `/profile` 链接。
+2. 当用户是管理员时，应该显示 `/admin` 链接。
+3. 当用户不是管理员时，应该不显示 `/admin` 链接。
+
+## 使用 `get()`
+
+`wrapper` 有一个 `get()` 方法，用于查找现有元素。它使用 [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) 语法。
+
+我们可以使用 `get()` 来断言 `/profile` 链接的内容：
+
+```js
+test('renders a profile link', () => {
+  const wrapper = mount(Nav)
+
+  // 在这里，我们隐含地断言元素 #profile 存在。
+  const profileLink = wrapper.get('#profile')
+
+  expect(profileLink.text()).toEqual('My Profile')
+})
+```
+
+如果 `get()` 不返回与选择器匹配的元素，它将引发错误，测试将失败。如果找到元素，`get()` 返回一个 `DOMWrapper`。`DOMWrapper` 是对 DOM 元素的一个薄包装，支持 [Wrapper API](../../api/#Wrapper-methods) - 这就是我们能够使用 `profileLink.text()` 访问文本的原因。你可以使用 `element` 属性访问原始元素。
+
+还有另一种类型的包装器 - `VueWrapper` - 它是从 [`getComponent`](../../api/#getComponent) 返回的，工作方式相同。
+
+## 使用 `find()` 和 `exists()`
+
+`get()` 假设元素存在，并在不存在时抛出错误。因此，不建议使用它来断言元素的存在。
+
+为此，我们使用 `find()` 和 `exists()`。下一个测试断言如果 `admin` 为 `false` (默认值)，则管理员链接不存在：
+
+```js
+test('does not render an admin link', () => {
+  const wrapper = mount(Nav)
+
+  // 使用 `wrapper.get` 会抛出错误并使测试失败。
+  expect(wrapper.find('#admin').exists()).toBe(false)
+})
+```
+
+请注意，我们在 `.find()` 返回的值上调用 `exists()`。`find()` 和 `mount()` 一样，也返回一个 `wrapper`。`mount()` 有一些额外的方法，因为它包装的是 Vue 组件，而 `find()` 仅返回常规 DOM 节点，但两者之间共享许多方法。其他方法包括 `classes()`，用于获取 DOM 节点的类，以及 `trigger()`，用于模拟用户交互。你可以在[这里](../../api/#Wrapper-methods)找到支持的方法列表。
+
+## 使用 `data`
+
+最后一个测试是断言当 `admin` 为 `true` 时，管理员链接被渲染。它默认是 `false`，但我们可以使用 `mount()` 的第二个参数，即[挂载选项](../../api/#mount)来覆盖它。
+
+对于 `data`，我们使用命名恰当的 `data` 选项：
+
+```js
+test('renders an admin link', () => {
+  const wrapper = mount(Nav, {
+    data() {
+      return {
+        admin: true
+      }
+    }
+  })
+
+  // 通过使用 `get()` 我们隐含地断言元素存在。
+  expect(wrapper.get('#admin').text()).toEqual('Admin')
+})
+```
+
+如果你在 `data` 中有其他属性，不用担心 - Vue Test Utils 会将两者合并。挂载选项中的 `data` 将优先于任何默认值。
+
+要了解其他挂载选项，请参见[传递数据](../essentials/passing-data.md)或[挂载选项](../../api/#mount)。
+
+## 检查元素可见性
+
+有时你只想隐藏/显示一个元素，同时将其保留在 DOM 中。Vue 提供了 `v-show` 以应对这种情况。(你可以在[这里](https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show)查阅 `v-if` 和 `v-show` 之间的区别。)
+
+使用 `v-show` 的组件如下所示：
+
+```js
+const Nav = {
+  template: `
+    <nav>
+      <a id="user" href="/profile">My Profile</a>
+      <ul v-show="shouldShowDropdown" id="user-dropdown">
+        <!-- dropdown content -->
+      </ul>
+    </nav>
+  `,
+  data() {
+    return {
+      shouldShowDropdown: false
+    }
+  }
+}
+```
+
+在这种情况下，元素不可见但始终被渲染。`get()` 或 `find()` 将始终返回一个 `Wrapper` - `find()` 的 `.exists()` 始终返回 `true` - 因为**元素仍然在 DOM 中**。
+
+## 使用 `isVisible()`
+
+`isVisible()` 可以检查隐藏元素。特别是 `isVisible()` 将检查：
+
+- 元素或其祖先是否具有 `display: none`、`visibility: hidden` 或 `opacity: 0` 样式
+- 元素或其祖先是否位于折叠的 `<details>` 标签内
+- an element or its ancestors have the `hidden` attribute
+
+在这些情况下，`isVisible()` 将返回 `false`。
+
+使用 `v-show` 进行测试的场景如下：
+
+```js
+test('does not show the user dropdown', () => {
+  const wrapper = mount(Nav)
+
+  expect(wrapper.get('#user-dropdown').isVisible()).toBe(false)
+})
+```
+
+## 结论
+
+- 使用 `find()` 结合 `exists()` 验证元素是否在 DOM 中。
+- 如果你确认元素应该在 DOM 中，请使用 `get()`。
+- 可以使用 `data` 挂载选项设置组件的默认值。
+- 使用 `get()` 和 `isVisible()` 验证在 DOM 中的元素的可见性。
diff --git a/docs/zh/guide/essentials/easy-to-test.md b/docs/zh/guide/essentials/easy-to-test.md
new file mode 100644
index 000000000..e099d6888
--- /dev/null
+++ b/docs/zh/guide/essentials/easy-to-test.md
@@ -0,0 +1,125 @@
+# 编写易于测试的组件
+
+Vue Test Utils 帮助你为 Vue 组件编写测试。然而，VTU 的功能是有限的。
+
+以下是一些建议，旨在帮助你编写更易于测试的代码，以及编写有意义且易于维护的测试。
+
+以下列表提供了通用指导，可能在常见场景中派上用场。
+
+## 不要测试实现细节
+
+从用户的角度考虑输入和输出。大致来说，这些是你在为 Vue 组件编写测试时应考虑的所有内容：
+
+| **输入** | 示例                                |
+| -------- | ----------------------------------- |
+| 交互     | 点击、输入……任何“人类”交互          |
+| Props    | 组件接收的参数                      |
+| 数据流   | 从 API 调用、数据订阅等中传入的数据 |
+
+| **输出** | 示例                         |
+| -------- | ---------------------------- |
+| DOM 元素 | 渲染到文档中的任何可观察节点 |
+| 事件     | 发出的事件（使用 `$emit`）   |
+| 副作用   | 如 `console.log` 或 API 调用 |
+
+**其他一切都是实现细节**。
+
+注意，这个列表没有包括内部方法、中间状态或甚至数据等元素。
+
+经验法则是**测试在重构时不应失败**，也就是说，当我们更改其内部实现而不改变其行为时，测试不应失败。如果发生这种情况，测试可能依赖于实现细节。
+
+例如，假设有一个基本的计数器组件，包含一个用于增加计数的按钮：
+
+```vue
+<template>
+  <p class="paragraph">Times clicked: {{ count }}</p>
+  <button @click="increment">increment</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return { count: 0 }
+  },
+  methods: {
+    increment() {
+      this.count++
+    }
+  }
+}
+</script>
+```
+
+我们可以编写以下测试：
+
+```js
+import { mount } from '@vue/test-utils'
+import Counter from './Counter.vue'
+
+test('counter text updates', async () => {
+  const wrapper = mount(Counter)
+  const paragraph = wrapper.find('.paragraph')
+
+  expect(paragraph.text()).toBe('Times clicked: 0')
+
+  await wrapper.setData({ count: 2 })
+
+  expect(paragraph.text()).toBe('Times clicked: 2')
+})
+```
+
+注意这里我们在更新其内部数据，并且也依赖于用户视角的细节，如 CSS 类。
+
+:::tip
+注意，更改数据或 CSS 类名都会导致测试失败。然而，组件仍然可以按预期工作。这被称为**假阳性 (false positive)**。
+:::
+
+相反，以下测试尝试坚持使用上述输入和输出：
+
+```js
+import { mount } from '@vue/test-utils'
+
+test('text updates on clicking', async () => {
+  const wrapper = mount(Counter)
+
+  expect(wrapper.text()).toContain('Times clicked: 0')
+
+  const button = wrapper.find('button')
+  await button.trigger('click')
+  await button.trigger('click')
+
+  expect(wrapper.text()).toContain('Times clicked: 2')
+})
+```
+
+像 [Vue Testing Library](https://github.com/testing-library/vue-testing-library/) 这样的库就是基于这些原则构建的。如果你对这种方法感兴趣，确保查看一下。
+
+## 构建更小、更简单的组件
+
+根据经验，如果一个组件的功能更少，那么它将更容易测试。
+
+构建更小的组件将使它们更具组合性，更易于理解。以下是一些建议，以使组件更简单。
+
+### 提取 API 调用
+
+通常，你会在应用程序中执行多个 HTTP 请求。从测试的角度来看，HTTP 请求为组件提供输入，组件也可以发送 HTTP 请求。
+
+:::tip
+如果你不熟悉测试 API 调用，请查看[发起 HTTP 请求](../advanced/http-requests.md)指南。
+:::
+
+### 提取复杂方法
+
+有时，一个组件可能包含复杂的方法、执行重计算或使用多个依赖项。
+
+这里的建议是**提取该方法并将其导入组件**。这样，你可以使用 Jest 或其他测试运行器在隔离状态下测试该方法。
+
+这还有一个额外的好处，就是最终得到一个更易于理解的组件，因为复杂的逻辑被封装在另一个文件中。
+
+此外，如果复杂的方法难以设置或速度慢，你可能希望对其进行模拟，以使测试更简单和更快速。关于[发起 HTTP 请求](../advanced/http-requests.md)的示例就是一个很好的例子—— axios 是一个相当复杂的库！
+
+## 在编写组件之前编写测试
+
+如果你提前编写测试，就无法编写不可测试的代码！
+
+我们的[快速上手](../essentials/a-crash-course.md)提供了一个示例，说明如何在编写代码之前编写测试，从而导致可测试的组件。这也帮助你发现和测试边缘情况。
diff --git a/docs/zh/guide/essentials/event-handling.md b/docs/zh/guide/essentials/event-handling.md
new file mode 100644
index 000000000..8af844588
--- /dev/null
+++ b/docs/zh/guide/essentials/event-handling.md
@@ -0,0 +1,155 @@
+# 事件处理
+
+Vue 组件通过 props 互相交互，并通过调用 `$emit` 触发事件。在本指南中，我们将探讨如何使用 `emitted()` 函数验证事件是否正确触发。
+
+本文也有[短视频](https://www.youtube.com/watch?v=U_j-nDur4oU&list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA&index=14)观看。
+
+## 计数器组件
+
+这是一个简单的 `<Counter>` 组件。它包含一个按钮，当点击时，会增加一个内部计数变量并触发该值的事件：
+
+```js
+const Counter = {
+  template: '<button @click="handleClick">Increment</button>',
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.count += 1
+      this.$emit('increment', this.count)
+    }
+  }
+}
+```
+
+为了全面测试这个组件，我们需要验证是否发出了带有最新 `count` 值的 `increment` 事件。
+
+## 断言触发的事件
+
+为此，我们将依赖 `emitted()` 方法。它**返回一个对象，包含组件发出的所有事件**，其参数以数组的形式呈现。让我们看看它是如何工作的：
+
+```js
+test('emits an event when clicked', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  wrapper.find('button').trigger('click')
+
+  expect(wrapper.emitted()).toHaveProperty('increment')
+})
+```
+
+> 如果你之前没有见过 `trigger()`，不要担心。它用于模拟用户交互。你可以在[测试表单](./forms)中了解更多。
+
+首先要注意的是，`emitted()` 返回一个对象，其中每个键对应一个已触发的事件。在这个例子中是 `increment`。
+
+这个测试应该通过。我们确保发出了具有适当名称的事件。
+
+## 断言事件的参数
+
+干得漂亮，但我们可以做得更好！我们需要检查在调用 `this.$emit('increment', this.count)` 时是否发出了正确的参数。
+
+我们的下一步是断言事件包含 `count` 值。我们通过向 `emitted()` 传递参数来实现这一点。
+
+```js {9}
+test('emits an event with count when clicked', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  wrapper.find('button').trigger('click')
+
+  // `emitted()` 接受一个参数。它返回一个数组，包含
+  // 所有 `this.$emit('increment')` 的发生情况。
+  const incrementEvent = wrapper.emitted('increment')
+
+  // 我们“点击”了两次，因此 `increment` 的数组应该有两个值。
+  expect(incrementEvent).toHaveLength(2)
+
+  // 断言第一次点击的结果。
+  // 注意，值是一个数组。
+  expect(incrementEvent[0]).toEqual([1])
+
+  // 然后是第二次的结果。
+  expect(incrementEvent[1]).toEqual([2])
+})
+```
+
+让我们回顾一下并分解 `emitted()` 的输出。每个键包含测试期间发出的不同值：
+
+```js
+// console.log(wrapper.emitted('increment'))
+;[
+  [1], // 第一次调用时，`count` 为 1
+  [2] // 第二次调用时，`count` 为 2
+]
+```
+
+## 断言复杂事件
+
+假设我们的 `<Counter>` 组件现在需要发出一个包含附加信息的对象。例如，我们需要告诉任何监听 `@increment` 事件的父组件 `count` 是偶数还是奇数：
+
+```js {12-15}
+const Counter = {
+  template: `<button @click="handleClick">Increment</button>`,
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.count += 1
+
+      this.$emit('increment', {
+        count: this.count,
+        isEven: this.count % 2 === 0
+      })
+    }
+  }
+}
+```
+
+和之前一样，我们需要在 `<button>` 元素上触发 `click` 事件。然后，我们使用 `emitted('increment')` 确保发出了正确的值。
+
+```js
+test('emits an event with count when clicked', () => {
+  const wrapper = mount(Counter)
+
+  wrapper.find('button').trigger('click')
+  wrapper.find('button').trigger('click')
+
+  // 我们“点击”了两次，因此 `increment` 的数组应该有两个值。
+  expect(wrapper.emitted('increment')).toHaveLength(2)
+
+  // 然后，我们可以确保 `wrapper.emitted('increment')` 的每个元素
+  // 包含一个带有预期对象的数组。
+  expect(wrapper.emitted('increment')[0]).toEqual([
+    {
+      count: 1,
+      isEven: false
+    }
+  ])
+
+  expect(wrapper.emitted('increment')[1]).toEqual([
+    {
+      count: 2,
+      isEven: true
+    }
+  ])
+})
+```
+
+测试复杂事件负载 (如对象) 与测试简单值 (如数字或字符串) 没有区别。
+
+## 组合 API
+
+如果你使用的是组合 API，你将调用 `context.emit()` 而不是 `this.$emit()`。`emitted()` 可以捕获两者的事件，因此你可以使用本文中描述的相同方法来测试你的组件。
+
+## 结论
+
+- 使用 `emitted()` 访问从 Vue 组件发出的事件。
+- `emitted(eventName)` 返回一个数组，其中每个元素代表一个已发出的事件。
+- 参数存储在 `emitted(eventName)[index]` 中，按发出顺序以数组形式呈现。
diff --git a/docs/zh/guide/essentials/forms.md b/docs/zh/guide/essentials/forms.md
new file mode 100644
index 000000000..868a3a406
--- /dev/null
+++ b/docs/zh/guide/essentials/forms.md
@@ -0,0 +1,408 @@
+# 表单处理
+
+在 Vue 中，表单可以是简单的 HTML 表单，也可以是复杂的嵌套自定义 Vue 组件表单元素。我们将逐步了解如何与表单元素交互、设置值和触发事件。
+
+我们将使用的主要方法是 `setValue()` 和 `trigger()`。
+
+## 与表单元素交互
+
+让我们看一个非常基本的表单：
+
+```vue
+<template>
+  <div>
+    <input type="email" v-model="email" />
+
+    <button @click="submit">Submit</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      email: ''
+    }
+  },
+  methods: {
+    submit() {
+      this.$emit('submit', this.email)
+    }
+  }
+}
+</script>
+```
+
+### 设置元素值
+
+在 Vue 中，将输入绑定到数据的最常见方法是使用 `v-model`。正如你可能已经知道的，它处理每个表单元素发出的事件以及它接受的 props，使我们更容易处理表单元素。
+
+要在 VTU 中更改输入的值，可以使用 `setValue()` 方法。它接受一个参数，通常是一个 `String` 或 `Boolean`，并返回一个 `Promise`，在 Vue 更新 DOM 后解析。
+
+```js
+test('sets the value', async () => {
+  const wrapper = mount(Component)
+  const input = wrapper.find('input')
+
+  await input.setValue('my@mail.com')
+
+  expect(input.element.value).toBe('my@mail.com')
+})
+```
+
+如你所见，`setValue` 将输入元素的 `value` 属性设置为我们传递的值。
+
+我们使用 `await` 确保 Vue 完成更新，并且更改已反映在 DOM 中，然后再进行任何断言。
+
+### 触发事件
+
+触发事件是处理表单和操作元素时的第二个重要操作。让我们看看之前示例中的 `button`。
+
+```html
+<button @click="submit">Submit</button>
+```
+
+要触发点击事件，我们可以使用 `trigger` 方法。
+
+```js
+test('trigger', async () => {
+  const wrapper = mount(Component)
+
+  // 触发元素
+  await wrapper.find('button').trigger('click')
+
+  // 断言某个操作已执行，例如发出事件。
+  expect(wrapper.emitted()).toHaveProperty('submit')
+})
+```
+
+> 如果你之前没有见过 `emitted()`，不要担心。它用于断言组件发出的事件。你可以在[事件处理](./event-handling)中了解更多。
+
+我们触发 `click` 事件监听器，以便组件执行 `submit` 方法。与 `setValue` 一样，我们使用 `await` 确保操作已被 Vue 处理。
+
+然后我们可以断言某个操作是否发生。在这种情况下，我们确认发出了正确的事件。
+
+让我们将这两个结合起来，测试我们的简单表单是否发出了用户输入。
+
+```js
+test('emits the input to its parent', async () => {
+  const wrapper = mount(Component)
+
+  // 设置值
+  await wrapper.find('input').setValue('my@mail.com')
+
+  // 触发元素
+  await wrapper.find('button').trigger('click')
+
+  //  断言 `submit` 事件被发出
+  expect(wrapper.emitted('submit')[0][0]).toBe('my@mail.com')
+})
+```
+
+## 高级工作流
+
+现在我们知道了基础知识，让我们深入更复杂的示例。
+
+### 与各种表单元素的协作
+
+我们看到 `setValue` 可以与输入元素一起使用，但它更为通用，可以设置各种类型输入元素的值。
+
+让我们看一个更复杂的表单，它包含更多类型的输入。
+
+```vue
+<template>
+  <form @submit.prevent="submit">
+    <input type="email" v-model="form.email" />
+
+    <textarea v-model="form.description" />
+
+    <select v-model="form.city">
+      <option value="new-york">New York</option>
+      <option value="moscow">Moscow</option>
+    </select>
+
+    <input type="checkbox" v-model="form.subscribe" />
+
+    <input type="radio" value="weekly" v-model="form.interval" />
+    <input type="radio" value="monthly" v-model="form.interval" />
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        email: '',
+        description: '',
+        city: '',
+        subscribe: false,
+        interval: ''
+      }
+    }
+  },
+  methods: {
+    async submit() {
+      this.$emit('submit', this.form)
+    }
+  }
+}
+</script>
+```
+
+我们的扩展 Vue 组件稍微长一些，包含更多输入类型，并且 `submit` 处理程序已移至 `<form/>` 元素。
+
+就像我们为 `input` 设置值一样，我们也可以为表单中的所有其他输入字段设置值。
+
+```js
+import { mount } from '@vue/test-utils'
+import FormComponent from './FormComponent.vue'
+
+test('submits a form', async () => {
+  const wrapper = mount(FormComponent)
+
+  await wrapper.find('input[type=email]').setValue('name@mail.com')
+  await wrapper.find('textarea').setValue('Lorem ipsum dolor sit amet')
+  await wrapper.find('select').setValue('moscow')
+  await wrapper.find('input[type=checkbox]').setValue()
+  await wrapper.find('input[type=radio][value=monthly]').setValue()
+})
+```
+
+如你所见，`setValue` 是一个非常通用的方法。它可以与所有类型的表单元素一起使用。
+
+我们在每个地方都使用 `await`，以确保在触发下一个事件之前，每个更改都已应用。这是推荐的做法，以确保在 DOM 更新后进行断言。
+
+::: tip
+如果你不为 `OPTION`、`CHECKBOX` 或 `RADIO` 传递参数给 `setValue`，它们将被设置为 `checked`。
+:::
+
+我们已经在表单中设置了值，现在该提交表单并进行一些断言了。
+
+### 触发复杂事件监听器
+
+事件监听器并不总是简单的 `click` 事件。Vue 允许你监听各种 DOM 事件，添加特殊修饰符如 `.prevent` 等。让我们看看如何测试这些。
+
+在上面的表单中，我们将事件从 `button` 移动到 `form` 元素。这是一个好的实践，因为这样可以通过按 `enter` 键提交表单，这是一种更原生的方式。
+
+要触发 `submit` 处理程序，我们再次使用 `trigger` 方法。
+
+```js {14,16-22}
+test('submits the form', async () => {
+  const wrapper = mount(FormComponent)
+
+  const email = 'name@mail.com'
+  const description = 'Lorem ipsum dolor sit amet'
+  const city = 'moscow'
+
+  await wrapper.find('input[type=email]').setValue(email)
+  await wrapper.find('textarea').setValue(description)
+  await wrapper.find('select').setValue(city)
+  await wrapper.find('input[type=checkbox]').setValue()
+  await wrapper.find('input[type=radio][value=monthly]').setValue()
+
+  await wrapper.find('form').trigger('submit.prevent')
+
+  expect(wrapper.emitted('submit')[0][0]).toStrictEqual({
+    email,
+    description,
+    city,
+    subscribe: true,
+    interval: 'monthly'
+  })
+})
+```
+
+要测试事件修饰符，我们直接将事件字符串 `submit.prevent` 复制粘贴到 `trigger` 中。`trigger` 可以读取传递的事件及其所有修饰符，并选择性地应用必要的内容。
+
+::: tip
+原生事件修饰符如 `.prevent` 和 `.stop` 是 Vue 特有的，因此我们不需要测试它们，Vue 内部已经对此进行了测试。
+:::
+
+然后我们进行简单的断言，检查表单是否发出了正确的事件和载荷。
+
+#### 原生表单提交
+
+在 `<form>` 元素上触发 `submit` 事件模拟了浏览器在表单提交时的行为。如果我们想以更自然的方式触发表单提交，可以触发提交按钮上的 `click` 事件。由于未连接到 `document` 的表单元素无法提交，因此根据 [HTML 规范](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm)，我们需要使用 [`attachTo`](../../api/#attachTo) 将包装器的元素连接起来。
+
+#### 同一事件上的多个修饰符
+
+假设你有一个非常详细和复杂的表单，具有特殊的交互处理。我们该如何测试呢？
+
+```html
+<input @keydown.meta.c.exact.prevent="captureCopy" v-model="input" />
+```
+
+假设我们有一个输入框，当用户按下 `cmd` + `c` 时处理，并希望拦截并阻止其复制。测试这非常简单，只需将事件从组件复制到 `trigger()` 方法中。
+
+```js
+test('handles complex events', async () => {
+  const wrapper = mount(Component)
+
+  await wrapper.find(input).trigger('keydown.meta.c.exact.prevent')
+
+  // 运行你的断言
+})
+```
+
+Vue Test Utils 会读取事件并将适当的属性应用于事件对象。在这种情况下，它将匹配如下内容：
+
+```js
+{
+  // ... 其他属性
+  "key": "c",
+  "metaKey": true
+}
+```
+
+#### 向事件添加额外数据
+
+假设你的代码需要从 `event` 对象中获取一些信息。你可以通过将额外数据作为第二个参数来测试这种情况。
+
+```vue
+<template>
+  <form>
+    <input type="text" v-model="value" @blur="handleBlur" />
+    <button>Submit</button>
+  </form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    handleBlur(event) {
+      if (event.relatedTarget.tagName === 'BUTTON') {
+        this.$emit('focus-lost')
+      }
+    }
+  }
+}
+</script>
+```
+
+```js
+import Form from './Form.vue'
+
+test('emits an event only if you lose focus to a button', () => {
+  const wrapper = mount(Form)
+
+  const componentToGetFocus = wrapper.find('button')
+
+  wrapper.find('input').trigger('blur', {
+    relatedTarget: componentToGetFocus.element
+  })
+
+  expect(wrapper.emitted('focus-lost')).toBeTruthy()
+})
+```
+
+在这里，我们假设代码在 `event` 对象内部检查 `relatedTarget` 是否为按钮。我们可以简单地传递对该元素的引用，模拟用户在 `input` 中输入内容后点击 `button` 的情况。
+
+## 与 Vue 组件输入交互
+
+输入不仅仅是普通元素。我们经常使用像输入一样的 Vue 组件。它们可以以易于使用的格式添加标记、样式和许多功能。
+
+测试使用这些输入的表单起初可能会让人感到棘手，但遵循一些简单的规则后，它很快就变得轻松。
+
+以下是一个包装 `label` 和 `input` 元素的组件：
+
+```vue
+<template>
+  <label>
+    {{ label }}
+    <input
+      type="text"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'CustomInput',
+
+  props: ['modelValue', 'label']
+}
+</script>
+```
+
+这个 Vue 组件也会回显用户输入。使用它的方法如下：
+
+```html
+<custom-input v-model="input" label="Text Input" class="text-input" />
+```
+
+与普通元素一样，这些 Vue 驱动的输入通常内部都有一个真实的 `button` 或 `input`。你可以轻松找到该元素并对其进行操作：
+
+```js
+test('fills in the form', async () => {
+  const wrapper = mount(CustomInput)
+
+  await wrapper.find('.text-input input').setValue('text')
+
+  // 继续进行断言或操作，例如提交表单、断言 DOM 等…
+})
+```
+
+### 测试复杂输入组件
+
+如果你的输入组件不那么简单怎么办？你可能正在使用 UI 库，例如 Vuetify。如果你依赖内部标记以找到正确的元素，那么如果外部库更改其内部结构，你的测试可能会失败。
+
+在这种情况下，你可以直接使用组件实例和 `setValue` 设置值。
+
+假设我们有一个使用 Vuetify 文本区域的表单：
+
+```vue
+<template>
+  <form @submit.prevent="handleSubmit">
+    <v-textarea v-model="description" ref="description" />
+    <button type="submit">Send</button>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'CustomTextarea',
+  data() {
+    return {
+      description: ''
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$emit('submitted', this.description)
+    }
+  }
+}
+</script>
+```
+
+我们可以使用 `findComponent` 找到组件实例，然后设置它的值。
+
+```js
+test('emits textarea value on submit', async () => {
+  const wrapper = mount(CustomTextarea)
+  const description = 'Some very long text...'
+
+  await wrapper.findComponent({ ref: 'description' }).setValue(description)
+
+  wrapper.find('form').trigger('submit')
+
+  expect(wrapper.emitted('submitted')[0][0]).toEqual(description)
+})
+```
+
+## 结论
+
+- 使用 `setValue` 设置 DOM 输入元素和 Vue 组件的值。
+- 使用 `trigger` 触发 DOM 事件，包括带有和不带修饰符的事件。
+- 使用第二个参数向 `trigger` 添加额外的事件数据。
+- 断言 DOM 发生了变化，并且发出了正确的事件。尽量不要对组件实例的数据进行断言。
diff --git a/docs/zh/guide/essentials/passing-data.md b/docs/zh/guide/essentials/passing-data.md
new file mode 100644
index 000000000..d5373c1d6
--- /dev/null
+++ b/docs/zh/guide/essentials/passing-data.md
@@ -0,0 +1,133 @@
+# 传递数据到组件
+
+Vue Test Utils 提供了几种方法来设置组件的数据和属性，以便你可以在不同场景下充分测试组件的行为。
+
+在本节中，我们将探讨 `data` 和 `props` 的挂载选项，以及 `VueWrapper.setProps()`，以动态更新组件接收的属性。
+
+## 密码组件
+
+我们将通过构建一个 `<Password>` 组件来演示上述功能。该组件验证密码是否符合某些标准，例如长度和复杂性。我们将从以下代码开始，并添加功能以及测试以确保这些功能正常工作：
+
+```js
+const Password = {
+  template: `
+    <div>
+      <input v-model="password">
+    </div>
+  `,
+  data() {
+    return {
+      password: ''
+    }
+  }
+}
+```
+
+我们将添加的第一个要求是最小长度。
+
+## 使用 `props` 设置最小长度
+
+我们希望在所有项目中重用此组件，而每个项目可能有不同的要求。因此，我们将把 `minLength` 作为一个 **prop** 传递给 `<Password>` 组件：
+
+如果 `password` 的长度小于 `minLength`，我们将显示一个错误。我们可以通过创建一个 `error` 计算属性，并使用 `v-if` 有条件地渲染它来实现：
+
+```js
+const Password = {
+  template: `
+    <div>
+      <input v-model="password">
+      <div v-if="error">{{ error }}</div>
+    </div>
+  `,
+  props: {
+    minLength: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      password: ''
+    }
+  },
+  computed: {
+    error() {
+      if (this.password.length < this.minLength) {
+        return `密码必须至少包含 ${this.minLength} 个字符.`
+      }
+      return
+    }
+  }
+}
+```
+
+为了测试这一点，我们需要设置 `minLength` 以及一个小于该数字的 `password`。我们可以使用 `data` 和 `props` 的挂载选项来实现。最后，我们将断言错误消息是否被渲染：
+
+```js
+test('renders an error if length is too short', () => {
+  const wrapper = mount(Password, {
+    props: {
+      minLength: 10
+    },
+    data() {
+      return {
+        password: 'short'
+      }
+    }
+  })
+
+  expect(wrapper.html()).toContain('密码必须至少包含 10 个字符')
+})
+```
+
+编写 `maxLength` 规则的测试留给读者作为练习！另一种实现方式是使用 `setValue` 更新输入为过短的密码。你可以在[测试表单](./forms)部分了解更多信息。
+
+## 使用 `setProps`
+
+有时你可能需要编写测试来验证属性更改的副作用。这个简单的 `<Show>` 组件在 `show` 属性为 `true` 时渲染一个问候语。
+
+```vue
+<template>
+  <div v-if="show">{{ greeting }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      greeting: 'Hello'
+    }
+  }
+}
+</script>
+```
+
+为了全面测试这一点，我们可能想要验证 `greeting` 是否默认渲染。我们可以使用 `setProps()` 更新 `show` 属性，这将导致 `greeting` 被隐藏：
+
+```js
+import { mount } from '@vue/test-utils'
+import Show from './Show.vue'
+
+test('renders a greeting when show is true', async () => {
+  const wrapper = mount(Show)
+  expect(wrapper.html()).toContain('Hello')
+
+  await wrapper.setProps({ show: false })
+
+  expect(wrapper.html()).not.toContain('Hello')
+})
+```
+
+我们在调用 `setProps()` 时也使用了 `await` 关键字，以确保在断言运行之前 DOM 已被更新。
+
+## 结论
+
+- 使用 `props` 和 `data` 的挂载选项预设组件的状态。
+- 使用 `setProps()` 在测试期间更新属性。
+- 在 `setProps()` 前使用 await 关键字，以确保 Vue 在测试继续之前会更新 DOM。
+- 直接与组件交互可以提供更大的覆盖率。考虑结合使用 `setValue` 或 `trigger` 以及 `data` 来确保一切正常工作。
diff --git a/docs/zh/guide/extending-vtu/community-learning.md b/docs/zh/guide/extending-vtu/community-learning.md
new file mode 100644
index 000000000..7c093159b
--- /dev/null
+++ b/docs/zh/guide/extending-vtu/community-learning.md
@@ -0,0 +1,8 @@
+# 社区与学习资源
+
+- [Vue 3 Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/v3/)。在线指南。
+- [Become a Ninja with Vue 3](https://books.ninja-squad.com/vue)。电子书和在线课程。
+- [Vue.js 3：The Composition API](https://vuejs-course.com/composition-api)。在线课程 (包括测试模块)。
+- [Testing Vue 3 apps with Vue Test Utils](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA)。视频播放列表。
+- [Testing Vue.js Components](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth)。在线课程。
+- [Front-end Testing and a tale of three users](https://afontcu.dev/frontend-testing-code-consumers/)。博客文章。
diff --git a/docs/zh/guide/extending-vtu/plugins.md b/docs/zh/guide/extending-vtu/plugins.md
new file mode 100644
index 000000000..dda7e2bca
--- /dev/null
+++ b/docs/zh/guide/extending-vtu/plugins.md
@@ -0,0 +1,183 @@
+# 插件
+
+插件为 Vue Test Utils 的 API 添加了全局功能。这是扩展 Vue Test Utils API 的官方方式，可以添加自定义逻辑、方法或功能。
+
+插件的使用场景：
+
+1. 为现有的公共方法创建别名
+2. 将匹配器附加到 Wrapper 实例
+3. 将功能附加到 Wrapper
+
+## Wrapper 插件
+
+### 使用插件
+
+通过调用 `config.plugins.VueWrapper.install()` 方法来安装插件。这必须在调用 `mount` 之前完成。
+
+`install()` 方法将接收一个 `WrapperAPI` 实例，该实例包含该实例的公共和私有属性。
+
+```js
+// setup.js file
+import { config } from '@vue/test-utils'
+
+// 本地定义的插件，见“编写插件”
+import MyPlugin from './myPlugin'
+
+// 将插件安装到 VueWrapper
+config.plugins.VueWrapper.install(MyPlugin)
+```
+
+你可以选择性地传入一些选项：
+
+```js
+config.plugins.VueWrapper.install(MyPlugin, { someOption: true })
+```
+
+你的插件应该只安装一次。如果你使用 Jest，这应该在你的 Jest 配置的 `setupFiles` 或 `setupFilesAfterEnv` 文件中。
+
+某些插件在导入时会自动调用 `config.plugins.VueWrapper.install()`。如果它们同时扩展多个接口，这是常见的情况。请遵循你正在安装的插件的说明。
+
+查看 [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) 或 [awesome-vue](https://github.com/vuejs/awesome-vue#test) 获取社区贡献的插件和库的集合。
+
+### 编写插件
+
+Vue Test Utils 插件只是一个函数，该函数接收挂载的 `VueWrapper` 或 `DOMWrapper` 实例，并可以对其进行修改。
+
+#### 基本插件
+
+以下是一个简单的插件，用于为 `wrapper.element` 创建一个方便的别名 `wrapper.$el`。
+
+```js
+// setup.js
+import { config } from '@vue/test-utils'
+
+const myAliasPlugin = (wrapper) => {
+  return {
+    $el: wrapper.element // 简单别名
+  }
+}
+
+// 在你要扩展的类型上调用 install
+// 你可以为 config.plugins 中的任何值编写插件
+config.plugins.VueWrapper.install(myAliasPlugin)
+```
+
+在你的测试中，你将能够在 `mount` 之后使用你的插件。
+
+// component.spec.js
+
+```js
+// component.spec.js
+const wrapper = mount({ template: `<h1>🔌 Plugin</h1>` })
+console.log(wrapper.$el.innerHTML) // 🔌 Plugin
+```
+
+#### 数据测试 ID 插件
+
+下面的插件为 `VueWrapper` 实例添加了一个 `findByTestId` 方法。这鼓励使用依赖于 Vue 组件上的测试专用属性的选择器策略。
+
+用法：
+
+`MyComponent.vue`:
+
+```vue
+<template>
+  <MyForm class="form-container" data-testid="form">
+    <MyInput data-testid="name-input" v-model="name" />
+  </MyForm>
+</template>
+```
+
+`MyComponent.spec.js`:
+
+```js
+const wrapper = mount(MyComponent)
+wrapper.findByTestId('name-input') // returns a VueWrapper or DOMWrapper
+```
+
+插件的实现：
+
+```js
+import { config, DOMWrapper } from '@vue/test-utils'
+
+const DataTestIdPlugin = (wrapper) => {
+  function findByTestId(selector) {
+    const dataSelector = `[data-testid='${selector}']`
+    const element = wrapper.element.querySelector(dataSelector)
+    return new DOMWrapper(element)
+  }
+
+  return {
+    findByTestId
+  }
+}
+
+config.plugins.VueWrapper.install(DataTestIdPlugin)
+```
+
+## Stubs 插件
+
+`config.plugins.createStubs` 允许覆盖 VTU 提供的默认桩创建。
+
+一些使用场景包括：
+
+- 你想在桩中添加更多逻辑 (例如命名插槽)
+- 你想为多个组件使用不同的桩 (例如从库中桩化组件)
+
+### 用法
+
+```typescript
+config.plugins.createStubs = ({ name, component }) => {
+  return defineComponent({
+    render: () => h(`custom-${name}-stub`)
+  })
+}
+```
+
+每当 VTU 生成一个桩时，这个函数都会被调用，无论是通过以下方式：
+
+```typescript
+const wrapper = mount(Component, {
+  global: {
+    stubs: {
+      ChildComponent: true
+    }
+  }
+})
+```
+
+还是
+
+```typescript
+const wrapper = shallowMount(Component)
+```
+
+但当你显式设置桩时，它将不会被调用：
+
+```typescript
+const wrapper = mount(Component, {
+  global: {
+    stubs: {
+      ChildComponent: { template: '<child-stub/>' }
+    }
+  }
+})
+```
+
+## 使用 TypeScript 的插件
+
+要使用自定义的 Wrapper 插件与 [TypeScript](https://www.typescriptlang.org/) 一起使用，你必须声明你的自定义 wrapper 函数。因此，添加一个名为 `vue-test-utils.d.ts` 的文件，内容如下：
+
+```typescript
+import { DOMWrapper } from '@vue/test-utils'
+
+declare module '@vue/test-utils' {
+  interface VueWrapper {
+    findByTestId(testId: string): DOMWrapper[]
+  }
+}
+```
+
+## 推广你的插件
+
+如果你缺少某些功能，可以考虑编写插件来扩展 Vue Test Utils，并提交以在 [Vue Community Guide](https://vue-community.org/guide/ecosystem/testing.html) 或 [awesome-vue](https://github.com/vuejs/awesome-vue#test) 中推广。
diff --git a/docs/zh/guide/faq/index.md b/docs/zh/guide/faq/index.md
new file mode 100644
index 000000000..b43ecd2d8
--- /dev/null
+++ b/docs/zh/guide/faq/index.md
@@ -0,0 +1,32 @@
+# 常见问题
+
+[[toc]]
+
+## 使用 Vitest 模拟日期和定时器
+
+Vue 的调度器依赖于系统时间。在调用 `vi.setSystemTime` 之后再挂载组件，因为 Vue 依赖于其副作用。在调用 `vi.setSystemTime` 之前挂载组件可能会导致响应性中断。
+
+请参见 [vuejs/test-utils#2074](https://github.com/vuejs/test-utils/issues/2074)。
+
+## Vue warn: Failed setting prop
+
+```
+[Vue warn]: Failed setting prop "prefix" on <component-stub>: value foo is invalid.
+TypeError: Cannot set property prefix of #<Element> which has only a getter
+```
+
+如果你使用 `shallowMount` 或 `stubs`，并且使用了与 [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) 共享的属性名称，将会显示此警告。
+
+与 `Element` 共享的常见属性名称：
+
+- `attributes`
+- `children`
+- `prefix`
+
+请参见：https://developer.mozilla.org/en-US/docs/Web/API/Element
+
+**可能的解决方案**
+
+1. 使用 `mount` 而不是 `shallowMount` 来渲染而不使用桩
+2. 通过模拟 `console.warn` 来忽略警告
+3. 重命名 prop，以避免与 `Element` 属性冲突
diff --git a/docs/zh/guide/index.md b/docs/zh/guide/index.md
new file mode 100644
index 000000000..8f1d116d8
--- /dev/null
+++ b/docs/zh/guide/index.md
@@ -0,0 +1,59 @@
+# 开始
+
+欢迎使用 Vue Test Utils，这是 Vue.js 的官方测试工具库！
+
+这是 Vue Test Utils v2 的文档，适用于 Vue 3。
+
+简而言之：
+
+- [Vue Test Utils 1](https://github.com/vuejs/vue-test-utils/) 适用于 [Vue 2](https://github.com/vuejs/vue/)。
+- [Vue Test Utils 2](https://github.com/vuejs/test-utils/) 使用于 [Vue 3](https://github.com/vuejs/core/)。
+
+## 什么是 Vue Test Utils？
+
+Vue Test Utils (VTU) 是一组实用函数，旨在简化对 Vue.js 组件的测试。它提供了一些方法来以独立的方式挂载和与 Vue 组件进行交互。
+
+让我们看一个例子：
+
+```js
+import { mount } from '@vue/test-utils'
+
+// 要测试的组件
+const MessageComponent = {
+  template: '<p>{{ msg }}</p>',
+  props: ['msg']
+}
+
+test('displays message', () => {
+  const wrapper = mount(MessageComponent, {
+    props: {
+      msg: 'Hello world'
+    }
+  })
+
+  // 断言组件的渲染文本
+  expect(wrapper.text()).toContain('Hello world')
+})
+```
+
+Vue Test Utils 通常与测试运行器一起使用。流行的测试运行器包括：
+
+- [Vitest](https://vitest.dev/)。基于终端，具有实验性的浏览器 UI。
+- [Cypress](https://cypress.io/)。基于浏览器，支持 Vite、webpack。
+- [Playwright](https://playwright.dev/docs/test-components) (实验性) 基于浏览器，支持 Vite。
+- [WebdriverIO](https://webdriver.io/docs/component-testing/vue)。基于浏览器，支持 Vite、Webpack，跨浏览器支持。
+
+Vue Test Utils 是一个简单且不拘泥于特定风格的库的库。如果你希望使用更具功能性、易用性和明确意见的工具，可以考虑 [Cypress 组件测试](https://docs.cypress.io/guides/component-testing/overview)，它具有热重载开发环境，或者 [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/)，它在进行断言时强调可访问性选择器 (Accessibility)。这两种工具在底层都使用 Vue Test Utils，并暴露相同的 API。
+
+## 接下来做什么？
+
+要查看 Vue Test Utils 的实际应用，请[查阅快速上手](../guide/essentials/a-crash-course.md)，我们将使用测试优先的方法构建一个简单的待办事项应用。
+
+文档分为两个主要部分：
+
+- **基础知识**，涵盖你在测试 Vue 组件时可能遇到的常见用例。
+- **深入学习 Vue Test Utils**，探索库的其他高级功能。
+
+你还可以探索完整的 [API](../api/)。
+
+或者，如果你更喜欢通过视频学习，这里有[一系列讲座可供观看](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA)。
diff --git a/docs/zh/index.md b/docs/zh/index.md
new file mode 100644
index 000000000..b7fa4b7d2
--- /dev/null
+++ b/docs/zh/index.md
@@ -0,0 +1,17 @@
+---
+layout: home
+
+title: Vue Test Utils
+titleTemplate: Vue Test Utils for Vue.js 3
+
+hero:
+  name: Vue Test Utils
+  text: Vue.js 3 测试工具
+  tagline: Vue.js 3 官方测试套件工具
+  image:
+    src: /logo.svg
+    alt: Vue Test Utils
+  actions:
+    - theme: brand
+      text: 开始 →
+      link: /zh/guide/
diff --git a/docs/zh/installation/index.md b/docs/zh/installation/index.md
new file mode 100644
index 000000000..0ab635dba
--- /dev/null
+++ b/docs/zh/installation/index.md
@@ -0,0 +1,20 @@
+# 安装
+
+```bash
+npm install --save-dev @vue/test-utils
+
+# or
+yarn add --dev @vue/test-utils
+```
+
+## 用法
+
+Vue Test Utils 是与框架无关的 - 你可以与任何你喜欢的测试运行器一起使用。最简单的尝试方式是使用 [Jest](https://jestjs.io/)，这是一个流行的测试运行器。
+
+要在 Jest 中加载 `.vue` 文件，你需要 `vue-jest`。`vue-jest` v5 是支持 Vue 3 的版本。它仍处于 alpha 阶段，就像 Vue.js 3 生态系统的其他部分一样，所以如果你发现错误，请在[这里](https://github.com/vuejs/vue-jest/)报告，并说明你正在使用 `vue-jest` v5。
+
+你可以通过 `vue-jest@next` 安装它。然后，你需要使用 Jest 的 [transform](https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object) 选项进行配置。
+
+如果你不想自己配置，可以在[这里](https://github.com/lmiller1990/vtu-next-demo)获取一个设置好的最小化仓库。
+
+继续阅读以了解更多关于 Vue Test Utils 的信息。
diff --git a/docs/zh/migration/index.md b/docs/zh/migration/index.md
new file mode 100644
index 000000000..800333641
--- /dev/null
+++ b/docs/zh/migration/index.md
@@ -0,0 +1,393 @@
+# 从 Vue Test Utils v1 迁移
+
+对 VTU v1 到 VTU v2 的更改进行回顾，并提供一些代码片段以展示所需的修改。如果你遇到未在此处记录的错误或行为差异，请[提交问题](https://github.com/vuejs/test-utils/issues/new)。
+
+## 更改
+
+### `propsData` 现在是 `props`
+
+在 VTU v1 中，你使用 `propsData` 挂载选项传递 props。这令人困惑，因为你在 Vue 组件的 `props` 选项中声明 props。现在你可以使用 `props` 挂载选项传递 `props`。为了向后兼容，`propsData` 仍然被支持。
+
+**之前**：
+
+```js
+const App = {
+  props: ['foo']
+}
+
+const wrapper = mount(App, {
+  propsData: {
+    foo: 'bar'
+  }
+}
+```
+
+**之后**：
+
+```js
+const App = {
+  props: ['foo']
+}
+
+const wrapper = mount(App, {
+  props: {
+    foo: 'bar'
+  }
+}
+```
+
+### 不再需要 `createLocalVue`
+
+在 Vue 2 中，插件通常会修改全局 Vue 实例并将各种方法附加到原型上。从 Vue 3 开始，这种情况不再存在 - 你使用 `createApp` 创建新的 Vue 应用，而不是 `new Vue`，并使用 `createApp(App).use(/* ... */)` 安装插件。
+
+为了避免在 Vue Test Utils v1 中污染全局 Vue 实例，我们提供了 `createLocalVue` 函数和 `localVue` 挂载选项。这使你可以为每个测试拥有一个独立的 Vue 实例，避免跨测试污染。在 Vue 3 中，这不再是问题，因为插件、混入等不会修改全局 Vue 实例。
+
+在大多数情况下，你之前使用 `createLocalVue` 和 `localVue` 挂载选项来安装插件、混入或指令，现在可以使用 [`global` 挂载选项](/api/#global)。以下是一个使用 `localVue` 的组件和测试示例，以及它现在的样子 (使用 `global.plugins`，因为 Vuex 是一个插件)：
+
+**之前**：
+
+```js
+import Vuex from 'vuex'
+import { createLocalVue, mount } from '@vue/test-utils'
+
+const App = {
+  computed: {
+    count() {
+      return this.$state.count
+    }
+  }
+}
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+const store = new Vuex.Store({
+  state: {
+    return { count: 1 }
+  }
+})
+
+const wrapper = mount(App, {
+  store
+  localVue
+})
+```
+
+**之后**：
+
+```js
+import { createStore } from 'vuex'
+import { mount } from '@vue/test-utils'
+
+const App = {
+  computed: {
+    count() {
+      return this.$state.count
+    }
+  }
+}
+
+const store = createStore({
+  state() {
+    return { count: 1 }
+  }
+})
+
+const wrapper = mount(App, {
+  global: {
+    plugins: [store]
+  }
+})
+```
+
+### `mocks` 和 `stubs` 现在在 `global` 中
+
+`mocks` 和 `stubs` 应用于所有组件，而不仅仅是你传递给 `mount` 的组件。为了反映这一点，`mocks` 和 `stubs` 现在在新的 `global` 挂载选项中：
+
+**之前**：
+
+```js
+const $route = {
+  params: {
+    id: '1'
+  }
+}
+
+const wrapper = mount(App, {
+  stubs: {
+    Foo: true
+  },
+  mocks: {
+    $route
+  }
+}
+```
+
+**之后**：
+
+```js
+const $route = {
+  params: {
+    id: '1'
+  }
+}
+
+const wrapper = mount(App, {
+  global: {
+    stubs: {
+      Foo: true
+    },
+    mocks: {
+      $route
+    }
+  }
+}
+```
+
+### `shallowMount` 和 `renderStubDefaultSlot`
+
+`shallowMount` 旨在存根任何自定义组件。虽然在 Vue Test Utils v1 中是这样的，但存根组件仍会渲染其默认的 `<slot />`。虽然这并非预期的行为，但一些用户对此功能表示喜欢。在 v2 中，这一行为已被修正 - **桩组件的插槽内容不再渲染**。
+
+给定以下代码：
+
+```js
+import { shallowMount } from '@vue/test-utils'
+
+const Foo = {
+  template: `<div><slot /></div>`
+}
+
+const App = {
+  components: { Foo },
+  template: `
+    <div>
+      <Foo>
+        Foo Slot
+      </Foo>
+    </div>
+  `
+}
+```
+
+**之前**：
+
+```js
+describe('App', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(App)
+    console.log(wrapper.html())
+    // renders:
+    // <div>
+    //   <foo-stub>
+    //     Foo Slot
+    //   </foo-stub>
+    // </div>
+  })
+})
+```
+
+**之后**：
+
+```js
+describe('App', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(App)
+    console.log(wrapper.html())
+    // renders:
+    // <div>
+    //   <foo-stub>
+    //   </foo-stub>
+    // </div>
+  })
+})
+```
+
+你可以通过以下方式启用旧行为：
+
+```js
+import { config } from '@vue/test-utils'
+
+config.global.renderStubDefaultSlot = true
+```
+
+### `destroy` 现在是 `unmount` 以匹配 Vue 3
+
+Vue 3 将 `vm.$destroy` 重命名为 `vm.$unmount`。Vue Test Utils 也随之更改；`wrapper.destroy()` 现在是 `wrapper.unmount()`。
+
+### `scopedSlots` 现在与 `slots` 合并
+
+Vue 3 将 `slot` 和 `scoped-slot` 语法统一为单一语法 `v-slot`，你可以在[文档](https://v3.vuejs.org/guide/migration/slots-unification.html#overview)中阅读相关内容。由于 `slot` 和 `scoped-slot` 现在合并，因此 `scopedSlots` 挂载选项现在已弃用 - 只需使用 `slots` 挂载选项即可。
+
+### `slots` 的作用域现在作为 `params` 暴露
+
+当使用字符串模板作为插槽内容时，如果没有使用 `<template #slot-name="scopeVar">` 标签显式定义，插槽作用域在插槽评估时作为 `params` 对象可用。
+
+```diff
+shallowMount(Component, {
+-  scopedSlots: {
++  slots: {
+-    default: '<p>{{props.index}},{{props.text}}</p>'
++    default: '<p>{{params.index}},{{params.text}}</p>'
+  }
+})
+```
+
+### `findAll().at()` 被移除
+
+`findAll()` 现在返回一个 DOMWrappers 数组。
+
+**之前：**
+
+```js
+wrapper.findAll('[data-test="token"]').at(0)
+```
+
+**之后：**
+
+```js
+wrapper.findAll('[data-test="token"]')[0]
+```
+
+### `createWrapper()` 被移除
+
+`createWrapper()` 现在是一个内部函数，无法再被导入。如果你需要访问一个不是 Vue 组件的 DOM 元素的包装器，可以使用 `new DOMWrapper()` 构造函数。
+
+**之前：**
+
+```js
+import { createWrapper } from "@vue/test-utils";
+
+describe('App', () => {
+  it('renders', () => {
+    const body = createWrapper(document.body);
+    expect(body.exists()).toBe(true);
+  })
+
+```
+
+**之后：**
+
+```js
+import { DOMWrapper } from "@vue/test-utils";
+
+describe('App', () => {
+  it('renders', () => {
+    const body = new DOMWrapper(document.body);
+    expect(body.exists()).toBe(true);
+  })
+```
+
+### 不再支持 `ref` 选择器在 `findAllComponents` 中
+
+`findAllComponents` 不再支持 `ref` 语法。你可以设置 `data-test` 属性并更新选择器：
+
+`Component.vue`:
+
+```diff
+<template>
+-  <FooComponent v-for="number in [1, 2, 3]" :key="number" ref="number">
++  <FooComponent v-for="number in [1, 2, 3]" :key="number" data-test="number">
+    {{ number }}
+  </FooComponent>
+</template>
+```
+
+`Component.spec.js`:
+
+```diff
+- wrapper.findAllComponents({ ref: 'number' })
++ wrapper.findAllComponents('[data-test="number"]')
+```
+
+## 测试运行器升级注意事项
+
+> Vue Test Utils 是框架无关的 - 你可以与任何你喜欢的测试运行器一起使用。
+
+这句话是 `@vue/test-utils` 的核心。但我们确实意识到，在某些情况下，将代码库及其相应的测试套件迁移到 `vue@3` 可能是一项相当大的工作。
+
+本节试图整理出社区在进行迁移时发现的一些常见问题，以及更新其基础测试运行栈到更现代版本时遇到的问题。这些与 `@vue/test-utils` 无关，但我们希望它能帮助你完成这一重要的迁移步骤。
+
+### `@vue/vue3-jest` + `jest@^28`
+
+如果你决定借此机会将测试运行器工具升级到更现代的版本，请注意以下几点。
+
+#### `ReferenceError: Vue is not defined` [vue-jest#479](https://github.com/vuejs/vue-jest/issues/479)
+
+当使用 `jest-environment-jsdom` 包时，它默认从 `package.json` [`browser` entry](https://jestjs.io/docs/configuration#testenvironmentoptions-object) 加载库。你可以覆盖它以使用 `node` 导入，从而修复此错误：
+
+```js
+// jest.config.js
+module.exports = {
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons']
+  }
+}
+```
+
+<br/>
+
+#### 快照现在包含注释节点
+
+如果你使用快照测试并且注释节点泄漏到你的快照中，请注意 `comments` 现在始终[保留](https://vuejs.org/api/application.html#app-config-compileroptions-comments)，并仅在生产中删除。你可以通过调整 `app.config.compilerOptions` 来覆盖此行为，以便在快照中也删除它们：
+
+- 通过 `vue-jest`[配置](https://github.com/vuejs/vue-jest#compiler-options-in-vue-3)。
+
+  ```js
+  // jest.config.js
+  module.exports = {
+    globals: {
+      'vue-jest': {
+        compilerOptions: {
+          comments: false
+        }
+      }
+    }
+  }
+  ```
+
+- 通过 `@vue/test-utils` [`mountingOptions.global.config`](https://test-utils.vuejs.org/api/#global) 全局或逐个测试基础。
+
+## 与 v1 的比较
+
+这是一个针对来自 VTU 1 用户的表格，其比较了两者的 API。
+
+### 基础 API
+
+| API               | 备注                        |
+| ----------------- | --------------------------- |
+| enableAutoDestroy | 被 `enableAutoUnmount` 替代 |
+
+### 挂载选项
+
+| 选项             | 备注                                                                                |
+| ---------------- | ----------------------------------------------------------------------------------- |
+| mocks            | 嵌套在 `global` 中                                                                  |
+| propsData        | 现在称为 `props`                                                                    |
+| provide          | 嵌套在 `global` 中                                                                  |
+| mixins           | 嵌套在 `global` 中                                                                  |
+| plugins          | 嵌套在 `global` 中                                                                  |
+| component        | 嵌套在 `global` 中                                                                  |
+| directives       | 嵌套在 `global` 中                                                                  |
+| attachToDocument | 重命名为 `attachTo`. 参见[此处](https://github.com/vuejs/vue-test-utils/pull/1492) |
+| scopedSlots      | 被移除, ScopedSlots 与 Vue 3 的 `slots` 合并                                        |
+| context          | 被移除, 与 Vue 2 不同，已不再有意义                                                 |
+| localVue         | 被移除, 不再需要 - 在 Vue 3 中没有全局 Vue 实例可供修改                             |
+| listeners        | 被移除, 在 Vue 3 中不再存在                                                         |
+| parentComponent  | 被移除                                                                              |
+
+### Wrapper API (mount)
+
+| 方法           | 备注                                                                              |
+| -------------- | --------------------------------------------------------------------------------- |
+| find           | 仅支持 `querySelector` 语法。使用 `findComponent(Comp)` 查找 Vue 组件             |
+| setValue       | 适用于选择框、复选框、单选按钮、输入框、文本区域。返回 `nextTick`                 |
+| trigger        | 返回 `nextTick`。你可以执行 `await wrapper.find('button').trigger('click')`       |
+| destroy        | 重命名为 `unmount` 以匹配 Vue 3 生命周期钩子名称。                                |
+| contains       | 被移除，使用 `find`                                                               |
+| emittedByOrder | 被移除，使用 `emitted`                                                            |
+| setSelected    | 被移除，现在是 `setValue` 的一部分                                                |
+| setChecked     | 被移除，现在是 `setValue` 的一部分                                                |
+| is             | 被移除                                                                            |
+| isEmpty        | 被移除， 使用匹配器[参考](https://github.com/testing-library/jest-dom#tobeempty) |
+| isVueInstance  | 被移除                                                                            |
+| name           | 被移除                                                                            |
+| setMethods     | 被移除                                                                            |
diff --git a/package.json b/package.json
index 594b29bd3..c75f3910f 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "unplugin-vue-components": "0.27.4",
     "vite": "6.0.0",
     "vitepress": "1.5.0",
-    "vitepress-translation-helper": "0.2.1",
+    "vitepress-translation-helper": "0.2.2",
     "vitest": "2.1.5",
     "vue": "3.5.13",
     "vue-class-component": "8.0.0-rc.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8c13427a..c6401b794 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,8 +106,8 @@ importers:
         specifier: 1.5.0
         version: 1.5.0(@algolia/client-search@4.19.1)(@types/node@22.9.1)(postcss@8.4.49)(search-insights@2.7.0)(typescript@5.6.3)
       vitepress-translation-helper:
-        specifier: 0.2.1
-        version: 0.2.1(vitepress@1.5.0(@algolia/client-search@4.19.1)(@types/node@22.9.1)(postcss@8.4.49)(search-insights@2.7.0)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))
+        specifier: 0.2.2
+        version: 0.2.2(vitepress@1.5.0(@algolia/client-search@4.19.1)(@types/node@22.9.1)(postcss@8.4.49)(search-insights@2.7.0)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3))
       vitest:
         specifier: 2.1.5
         version: 2.1.5(@types/node@22.9.1)(jsdom@25.0.1)
@@ -2592,8 +2592,8 @@ packages:
       yaml:
         optional: true
 
-  vitepress-translation-helper@0.2.1:
-    resolution: {integrity: sha512-zYjakGIdVDonT1P85OkeQcdE6e8vdmKiVclHB7DGcTzFUwb2D0w+hcC31AGneB5wa5IiqEoipycSTYNKM0YKJg==}
+  vitepress-translation-helper@0.2.2:
+    resolution: {integrity: sha512-xqE4p1iUmsADKyA8W/02POtEwL0ZMcY2Ogj4Shuh70392UslB5JhrgCdF1j61NIQhgy/wgAGhn33QZdksN6IqQ==}
     hasBin: true
     peerDependencies:
       vitepress: ^1.0.0
@@ -5226,7 +5226,7 @@ snapshots:
       fsevents: 2.3.3
       yaml: 2.5.0
 
-  vitepress-translation-helper@0.2.1(vitepress@1.5.0(@algolia/client-search@4.19.1)(@types/node@22.9.1)(postcss@8.4.49)(search-insights@2.7.0)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3)):
+  vitepress-translation-helper@0.2.2(vitepress@1.5.0(@algolia/client-search@4.19.1)(@types/node@22.9.1)(postcss@8.4.49)(search-insights@2.7.0)(typescript@5.6.3))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       minimist: 1.2.8
       simple-git: 3.23.0