vue-test-utils-skilld

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

vuejs/test-utils

@vue/test-utils

vuejs/test-utils

@vue/test-utils

Version: 2.4.6 (May 2024) Deps: js-beautify@^1.14.9, vue-component-type-helpers@^2.0.0 Tags: latest: 2.4.6 (May 2024), 2.0.0-alpha.0: 2.0.0-alpha.0 (Apr 2020), 2.0.0-alpha.1: 2.0.0-alpha.1 (Apr 2020), 2.0.0-alpha.2: 2.0.0-alpha.2 (Apr 2020), 2.0.0-alpha.3: 2.0.0-alpha.3 (Apr 2020), 2.0.0-alpha.4: 2.0.0-alpha.4 (May 2020), next: 2.4.0-alpha.2 (Jun 2023), 2.0.0-alpha.8: 2.0.0-alpha.8 (Jul 2020), 2.0.0-beta.1: 2.0.0-beta.1 (Aug 2020), 2.0.0-beta.2: 2.0.0-beta.2 (Aug 2020), 2.0.0-beta.3: 2.0.0-beta.3 (Aug 2020), 2.0.0-beta.4: 2.0.0-beta.4 (Sep 2020), 2.0.0-beta.5: 2.0.0-beta.5 (Sep 2020), 2.0.0-beta.7: 2.0.0-beta.7 (Oct 2020), 2.0.0-beta.8: 2.0.0-beta.8 (Nov 2020), 2.0.0-beta.9: 2.0.0-beta.9 (Nov 2020), 2.0.0-beta.10: 2.0.0-beta.10 (Nov 2020), 2.0.0-beta.12: 2.0.0-beta.12 (Dec 2020), 2.0.0-beta.13: 2.0.0-beta.13 (Dec 2020), 2.0.0-rc.0: 2.0.0-rc.0 (Jan 2021), 2.0.0-rc.1: 2.0.0-rc.1 (Feb 2021), 2.0.0-rc.2: 2.0.0-rc.2 (Feb 2021), 2.0.0-rc.3: 2.0.0-rc.3 (Mar 2021), 2.0.0-rc.4: 2.0.0-rc.4 (Mar 2021), 2.0.0-rc.5: 2.0.0-rc.5 (Apr 2021), 2.0.0-rc.6: 2.0.0-rc.6 (Apr 2021), 2.0.0-rc.7: 2.0.0-rc.7 (Jun 2021), 2.0.0-rc.8: 2.0.0-rc.8 (Jun 2021), 2.0.0-rc.9: 2.0.0-rc.9 (Jun 2021), 2.0.0-rc.10: 2.0.0-rc.10 (Jul 2021), 2.0.0-rc.11: 2.0.0-rc.11 (Jul 2021), 2.0.0-rc.12: 2.0.0-rc.12 (Jul 2021), 2.0.0-rc.14: 2.0.0-rc.14 (Sep 2021), 2.0.0-rc.16: 2.0.0-rc.16 (Oct 2021), 2.0.0-rc.18: 2.0.0-rc.18 (Dec 2021), legacy: 1.3.6 (Jun 2023), 2.4.0-alpha.0: 2.4.0-alpha.0 (Apr 2023), v2.4.0-alpha.2: 2.4.0-alpha.2 (Jun 2023)

References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • Releases — changelog, breaking changes, new APIs

**版本：**2.4.6（2024年5月） **依赖：**js-beautify@^1.14.9, vue-component-type-helpers@^2.0.0 **版本标签：**latest: 2.4.6（2024年5月）, 2.0.0-alpha.0: 2.0.0-alpha.0（2020年4月）, 2.0.0-alpha.1: 2.0.0-alpha.1（2020年4月）, 2.0.0-alpha.2: 2.0.0-alpha.2（2020年4月）, 2.0.0-alpha.3: 2.0.0-alpha.3（2020年4月）, 2.0.0-alpha.4: 2.0.0-alpha.4（2020年5月）, next: 2.4.0-alpha.2（2023年6月）, 2.0.0-alpha.8: 2.0.0-alpha.8（2020年7月）, 2.0.0-beta.1: 2.0.0-beta.1（2020年8月）, 2.0.0-beta.2: 2.0.0-beta.2（2020年8月）, 2.0.0-beta.3: 2.0.0-beta.3（2020年8月）, 2.0.0-beta.4: 2.0.0-beta.4（2020年9月）, 2.0.0-beta.5: 2.0.0-beta.5（2020年9月）, 2.0.0-beta.7: 2.0.0-beta.7（2020年10月）, 2.0.0-beta.8: 2.0.0-beta.8（2020年11月）, 2.0.0-beta.9: 2.0.0-beta.9（2020年11月）, 2.0.0-beta.10: 2.0.0-beta.10（2020年11月）, 2.0.0-beta.12: 2.0.0-beta.12（2020年12月）, 2.0.0-beta.13: 2.0.0-beta.13（2020年12月）, 2.0.0-rc.0: 2.0.0-rc.0（2021年1月）, 2.0.0-rc.1: 2.0.0-rc.1（2021年2月）, 2.0.0-rc.2: 2.0.0-rc.2（2021年2月）, 2.0.0-rc.3: 2.0.0-rc.3（2021年3月）, 2.0.0-rc.4: 2.0.0-rc.4（2021年3月）, 2.0.0-rc.5: 2.0.0-rc.5（2021年4月）, 2.0.0-rc.6: 2.0.0-rc.6（2021年4月）, 2.0.0-rc.7: 2.0.0-rc.7（2021年6月）, 2.0.0-rc.8: 2.0.0-rc.8（2021年6月）, 2.0.0-rc.9: 2.0.0-rc.9（2021年6月）, 2.0.0-rc.10: 2.0.0-rc.10（2021年7月）, 2.0.0-rc.11: 2.0.0-rc.11（2021年7月）, 2.0.0-rc.12: 2.0.0-rc.12（2021年7月）, 2.0.0-rc.14: 2.0.0-rc.14（2021年9月）, 2.0.0-rc.16: 2.0.0-rc.16（2021年10月）, 2.0.0-rc.18: 2.0.0-rc.18（2021年12月）, legacy: 1.3.6（2023年6月）, 2.4.0-alpha.0: 2.4.0-alpha.0（2023年4月）, v2.4.0-alpha.2: 2.4.0-alpha.2（2023年6月）

参考链接：文档 — API参考、指南 • GitHub问题 — 问题、解决方案、边缘情况 • 版本发布 — 更新日志、破坏性变更、新API

API Changes

API变更

This section documents version-specific API changes — prioritize recent major/minor releases.

BREAKING:
```
propsData
```
— v2 renamed to
```
props
```
for consistency with component definitions source
BREAKING:
```
createLocalVue
```
— removed in v2, use the
```
global
```
mounting option to install plugins, mixins, or directives source
BREAKING:
```
mocks
```
and
```
stubs
```
— moved into the
```
global
```
mounting option in v2 as they apply to all components source
BREAKING:
```
destroy()
```
— renamed to
```
unmount()
```
in v2 to match Vue 3 lifecycle naming source
BREAKING:
```
findAll().at()
```
— removed in v2;
```
findAll()
```
now returns a standard array of wrappers source
BREAKING:
```
createWrapper()
```
— removed in v2, use the
```
new DOMWrapper()
```
constructor for non-component elements source
BREAKING:
```
shallowMount
```
— v2 no longer renders default slot content for stubbed components by default source
BREAKING:
```
find()
```
— now only supports
```
querySelector
```
syntax; use
```
findComponent()
```
to locate Vue components source
BREAKING:
```
setSelected
```
and
```
setChecked
```
— removed in v2, functionality merged into
```
setValue()
```
source
BREAKING:
```
attachToDocument
```
— renamed to
```
attachTo
```
in v2 source
BREAKING:
```
emittedByOrder
```
— removed in v2, use
```
emitted()
```
instead source
NEW:
```
renderToString()
```
— added in v2.3.0 to support SSR testing source

NEW:

enableAutoUnmount()

disableAutoUnmount()

— replaces

enableAutoDestroy

in v2 source

DEPRECATED:
```
scopedSlots
```
— removed in v2 and merged into the
```
slots
```
mounting option source

Also changed:

setValue()

and

trigger()

return

nextTick

slots

scope exposed as

params

in string templates ·

is

isEmpty

isVueInstance

name

setMethods

, and

contains

removed

本节记录特定版本的API变更 — 优先关注近期的主要/次要版本更新。

破坏性变更：
```
propsData
```
— v2版本中更名为
```
props
```
，与组件定义保持一致来源
破坏性变更：
```
createLocalVue
```
— v2版本中已移除，使用
```
global
```
挂载选项来安装插件、混入或指令来源
破坏性变更：
```
mocks
```
和
```
stubs
```
— v2版本中移至
```
global
```
挂载选项，因为它们适用于所有组件来源
破坏性变更：
```
destroy()
```
— v2版本中更名为
```
unmount()
```
，以匹配Vue 3的生命周期命名来源
破坏性变更：
```
findAll().at()
```
— v2版本中已移除；
```
findAll()
```
现在返回标准的包装器数组来源
破坏性变更：
```
createWrapper()
```
— v2版本中已移除，对非组件元素使用
```
new DOMWrapper()
```
构造函数来源
破坏性变更：
```
shallowMount
```
— v2版本中默认不再渲染存根组件的默认插槽内容来源
破坏性变更：
```
find()
```
— 现在仅支持
```
querySelector
```
语法；使用
```
findComponent()
```
来定位Vue组件来源
破坏性变更：
```
setSelected
```
和
```
setChecked
```
— v2版本中已移除，功能合并到
```
setValue()
```
中来源
破坏性变更：
```
attachToDocument
```
— v2版本中更名为
```
attachTo
```
来源
破坏性变更：
```
emittedByOrder
```
— v2版本中已移除，使用
```
emitted()
```
替代来源
新增：
```
renderToString()
```
— v2.3.0版本中添加，以支持SSR测试来源

新增：

enableAutoUnmount()

disableAutoUnmount()

— v2版本中替代

enableAutoDestroy

来源

已废弃：
```
scopedSlots
```
— v2版本中已移除并合并到
```
slots
```
挂载选项中来源

其他变更：

setValue()

和

trigger()

nextTick

slots

作用域在字符串模板中以

params

暴露 ·

is

、

isEmpty

、

isVueInstance

、

name

、

setMethods

和

contains

已移除

Best Practices

最佳实践

Always
```
await
```
methods that return
```
nextTick
```
(
```
trigger
```
,
```
setValue
```
,
```
setProps
```
,
```
setData
```
) to ensure DOM updates are processed before running assertions source

// Preferred
await wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('Count: 1')

// Avoid — assertion runs before DOM update
wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('Count: 1')

Prefer
```
get()
```
and
```
getComponent()
```
over
```
find()
```
and
```
findComponent()
```
when you expect the element to exist — they throw immediately if not found, providing clearer test failures source
Use
```
flushPromises()
```
to resolve non-Vue asynchronous operations such as mocked API calls (axios) or external promise-based logic that Vue doesn't track source
Enable
```
enableAutoUnmount(afterEach)
```
in your test setup to automatically clean up wrappers after every test, preventing state pollution and memory leaks source

import { enableAutoUnmount } from '@vue/test-utils'
import { afterEach } from 'vitest'

enableAutoUnmount(afterEach)

Wrap components with
```
async setup()
```
in a
```
<Suspense>
```
component within your test to correctly handle their asynchronous initialization source
Enable
```
config.global.renderStubDefaultSlot = true
```
when using
```
shallow
```
mounting to ensure content within default slots is rendered for verification source
Prefer
```
mount()
```
with specific
```
global.stubs
```
over
```
shallow: true
```
to keep tests more production-like while still isolating specific complex child components source
Use
```
global.provide
```
to pass data to components using
```
inject
```
, ensuring the component tree's dependency injection works as it does in production source
Test complex composables by mounting a minimal
```
TestComponent
```
that calls the composable, allowing you to verify internal state via
```
wrapper.vm
```
source

const TestComponent = defineComponent({
  setup() {
    return { ...useMyComposable() }
  }
})
const wrapper = mount(TestComponent)
expect(wrapper.vm.someValue).toBe(true)

Stub custom directives using the
```
vName
```
naming convention (e.g.,
```
vTooltip: true
```
) in the
```
global.stubs
```
mounting option source

对于返回
```
nextTick
```
的方法（
```
trigger
```
、
```
setValue
```
、
```
setProps
```
、
```
setData
```
），始终使用
```
await
```
，以确保在运行断言前处理完DOM更新来源

// 推荐写法
await wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('Count: 1')

// 不推荐 — 断言在DOM更新前执行
wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('Count: 1')

当你确定元素存在时，优先使用
```
get()
```
和
```
getComponent()
```
而非
```
find()
```
和
```
findComponent()
```
— 如果未找到元素，它们会立即抛出错误，提供更清晰的测试失败信息来源
使用
```
flushPromises()
```
来解析Vue未跟踪的非Vue异步操作，例如模拟API调用（axios）或基于外部Promise的逻辑来源
在测试设置中启用
```
enableAutoUnmount(afterEach)
```
，以在每次测试后自动清理包装器，防止状态污染和内存泄漏来源

import { enableAutoUnmount } from '@vue/test-utils'
import { afterEach } from 'vitest'

enableAutoUnmount(afterEach)

在测试中使用
```
<Suspense>
```
组件包裹带有
```
async setup()
```
的组件，以正确处理其异步初始化来源
当使用
```
shallow
```
挂载时，启用
```
config.global.renderStubDefaultSlot = true
```
，以确保默认插槽内的内容被渲染以便验证来源
优先使用带有特定
```
global.stubs
```
的
```
mount()
```
而非
```
shallow: true
```
，使测试更贴近生产环境，同时仍能隔离特定复杂子组件来源
使用
```
global.provide
```
向使用
```
inject
```
的组件传递数据，确保组件树的依赖注入与生产环境一致来源
通过挂载调用该组合式函数的最小
```
TestComponent
```
来测试复杂的组合式函数，允许你通过
```
wrapper.vm
```
验证内部状态来源

const TestComponent = defineComponent({
  setup() {
    return { ...useMyComposable() }
  }
})
const wrapper = mount(TestComponent)
expect(wrapper.vm.someValue).toBe(true)

在
```
global.stubs
```
挂载选项中使用
```
vName
```
命名约定（例如
```
vTooltip: true
```
）来存根自定义指令来源