vue-test-utils-skilld by harlan-zw/vue-ecosystem-skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill vue-test-utils-skilld@vue/test-utils版本: 2.4.6 依赖: js-beautify@^1.14.9, vue-component-type-helpers@^2.0.0 标签: latest: 2.4.6, 2.0.0-alpha.0: 2.0.0-alpha.0, 2.0.0-alpha.1: 2.0.0-alpha.1, 2.0.0-alpha.2: 2.0.0-alpha.2, 2.0.0-alpha.3: 2.0.0-alpha.3, 2.0.0-alpha.4: 2.0.0-alpha.4, next: 2.4.0-alpha.2, 2.0.0-alpha.8: 2.0.0-alpha.8, 2.0.0-beta.1: 2.0.0-beta.1, 2.0.0-beta.2: 2.0.0-beta.2, 2.0.0-beta.3: 2.0.0-beta.3, 2.0.0-beta.4: 2.0.0-beta.4, 2.0.0-beta.5: 2.0.0-beta.5, 2.0.0-beta.7: 2.0.0-beta.7, 2.0.0-beta.8: 2.0.0-beta.8, 2.0.0-beta.9: 2.0.0-beta.9, 2.0.0-beta.10: 2.0.0-beta.10, 2.0.0-beta.12: 2.0.0-beta.12, 2.0.0-beta.13: 2.0.0-beta.13, 2.0.0-rc.0: 2.0.0-rc.0, 2.0.0-rc.1: 2.0.0-rc.1, 2.0.0-rc.2: 2.0.0-rc.2, 2.0.0-rc.3: 2.0.0-rc.3, 2.0.0-rc.4: 2.0.0-rc.4, 2.0.0-rc.5: 2.0.0-rc.5, 2.0.0-rc.6: 2.0.0-rc.6, 2.0.0-rc.7: 2.0.0-rc.7, 2.0.0-rc.8: 2.0.0-rc.8, 2.0.0-rc.9: 2.0.0-rc.9, 2.0.0-rc.10: 2.0.0-rc.10, 2.0.0-rc.11: 2.0.0-rc.11, 2.0.0-rc.12: 2.0.0-rc.12, 2.0.0-rc.14: 2.0.0-rc.14, 2.0.0-rc.16: 2.0.0-rc.16, 2.0.0-rc.18: 2.0.0-rc.18, legacy: 1.3.6, 2.4.0-alpha.0: 2.4.0-alpha.0, v2.4.0-alpha.2: 2.4.0-alpha.2
参考: 文档 — API 参考,指南 • GitHub Issues — 错误、解决方法、边界情况 • GitHub Discussions — 问答、模式、示例 • 版本发布 — 更新日志、破坏性变更、新 API
本节记录了特定版本的 API 变更 — 请优先关注近期的主要/次要版本发布。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
破坏性变更: 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 已移除
始终对返回 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 的异步操作,例如模拟的 API 调用(axios)或 Vue 无法跟踪的外部基于 Promise 的逻辑 来源
在你的测试设置中启用 enableAutoUnmount(afterEach),以便在每次测试后自动清理包装器,防止状态污染和内存泄漏 来源
import { enableAutoUnmount } from '@vue/test-utils' import { afterEach } from 'vitest'
enableAutoUnmount(afterEach)
在测试中,将使用 async setup() 的组件包装在 <Suspense> 组件内,以正确处理它们的异步初始化 来源
在使用 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)来存根自定义指令 来源
每周安装量
68
代码仓库
GitHub 星标数
147
首次出现
2026年2月19日
安全审计
安装于
github-copilot51
opencode46
gemini-cli46
claude-code46
codex46
kimi-cli45
@vue/test-utilsVersion: 2.4.6 Deps: js-beautify@^1.14.9, vue-component-type-helpers@^2.0.0 Tags: latest: 2.4.6, 2.0.0-alpha.0: 2.0.0-alpha.0, 2.0.0-alpha.1: 2.0.0-alpha.1, 2.0.0-alpha.2: 2.0.0-alpha.2, 2.0.0-alpha.3: 2.0.0-alpha.3, 2.0.0-alpha.4: 2.0.0-alpha.4, next: 2.4.0-alpha.2, 2.0.0-alpha.8: 2.0.0-alpha.8, 2.0.0-beta.1: 2.0.0-beta.1, 2.0.0-beta.2: 2.0.0-beta.2, 2.0.0-beta.3: 2.0.0-beta.3, 2.0.0-beta.4: 2.0.0-beta.4, 2.0.0-beta.5: 2.0.0-beta.5, 2.0.0-beta.7: 2.0.0-beta.7, 2.0.0-beta.8: 2.0.0-beta.8, 2.0.0-beta.9: 2.0.0-beta.9, 2.0.0-beta.10: 2.0.0-beta.10, 2.0.0-beta.12: 2.0.0-beta.12, 2.0.0-beta.13: 2.0.0-beta.13, 2.0.0-rc.0: 2.0.0-rc.0, 2.0.0-rc.1: 2.0.0-rc.1, 2.0.0-rc.2: 2.0.0-rc.2, 2.0.0-rc.3: 2.0.0-rc.3, 2.0.0-rc.4: 2.0.0-rc.4, 2.0.0-rc.5: 2.0.0-rc.5, 2.0.0-rc.6: 2.0.0-rc.6, 2.0.0-rc.7: 2.0.0-rc.7, 2.0.0-rc.8: 2.0.0-rc.8, 2.0.0-rc.9: 2.0.0-rc.9, 2.0.0-rc.10: 2.0.0-rc.10, 2.0.0-rc.11: 2.0.0-rc.11, 2.0.0-rc.12: 2.0.0-rc.12, 2.0.0-rc.14: 2.0.0-rc.14, 2.0.0-rc.16: 2.0.0-rc.16, 2.0.0-rc.18: 2.0.0-rc.18, legacy: 1.3.6, 2.4.0-alpha.0: 2.4.0-alpha.0, v2.4.0-alpha.2: 2.4.0-alpha.2
References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs
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: — renamed to in v2 to match Vue 3 lifecycle naming
Also changed: setValue() and trigger() return nextTick · slots scope exposed as params in string templates · is, isEmpty, isVueInstance, name, setMethods, and contains removed
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 when you expect the element to exist — they throw immediately if not found, providing clearer test failures
Weekly Installs
68
Repository
GitHub Stars
147
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot51
opencode46
gemini-cli46
claude-code46
codex46
kimi-cli45
Vue 3 调试指南:解决响应式、计算属性与监听器常见错误
11,900 周安装
destroy()unmount()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
findComponent()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