From floating-ui-vue
Guides @vue/test-utils v2.4.6 usage for Vue component testing, including API reference, breaking changes, migration from v1, debugging, and best practices.
npx claudepluginhub skilld-dev/vue-ecosystem-skills --plugin floating-ui-vueThis skill uses the workspace's default tool permissions.
**Version:** 2.4.6
references/discussions/_INDEX.mdreferences/discussions/discussion-1728.mdreferences/discussions/discussion-1749.mdreferences/discussions/discussion-1752.mdreferences/discussions/discussion-1758.mdreferences/discussions/discussion-1831.mdreferences/discussions/discussion-1850.mdreferences/discussions/discussion-1876.mdreferences/discussions/discussion-1904.mdreferences/discussions/discussion-1913.mdreferences/discussions/discussion-1969.mdreferences/discussions/discussion-2002.mdreferences/discussions/discussion-2164.mdreferences/discussions/discussion-2208.mdreferences/discussions/discussion-2215.mdreferences/discussions/discussion-2223.mdreferences/discussions/discussion-2226.mdreferences/discussions/discussion-2521.mdreferences/discussions/discussion-2606.mdreferences/discussions/discussion-2630.mdProvides Vue.js testing best practices using Vitest and Vue Test Utils for unit/component tests, Playwright for E2E. Covers mocking, async setup, Pinia, snapshots, and common gotchas.
Provides Vue.js testing best practices using Vitest, Vue Test Utils, and Playwright for E2E. Covers component testing, mocking, async setups, Pinia stores, and common pitfalls.
Guides usage, debugging, best practices, and API changes for @vueuse/components renderless Vue components. Use when importing @vueuse/components.
Share bugs, ideas, or general feedback.
@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: 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
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)
vName naming convention (e.g., vTooltip: true) in the global.stubs mounting option source