vue-test-utils-skilld

Name: vue-test-utils-skilld
Author: skilld-dev

173stars8forks

How to install vue-test-utils-skilld?

skilld-dev/vue-ecosystem-skills/vue-test-utils-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vue-test-utils-skilld

Installs into the current project.

Summary

ALWAYS use when writing code importing \"@vue/test-utils\". Consult for debugging, best practices, or modifying @vue/test-utils, vue/test-utils, vue test-utils, vue test utils, test-utils, test utils.

Files · 1

View on GitHub

SKILL.md

1	# vuejs/test-utils `@vue/test-utils@2.4.10`
2	Tags: 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
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `propsData` — v2 renamed to `props` for consistency with component definitions [source](./references/docs/migration/index.md)
10
11	- BREAKING: `createLocalVue` — removed in v2, use the `global` mounting option to install plugins, mixins, or directives [source](./references/docs/migration/index.md)
12
13	- BREAKING: `mocks` and `stubs` — moved into the `global` mounting option in v2 as they apply to all components [source](./references/docs/migration/index.md)
14
15	- BREAKING: `destroy()` — renamed to `unmount()` in v2 to match Vue 3 lifecycle naming [source](./references/docs/migration/index.md)
16
17	- BREAKING: `findAll().at()` — removed in v2; `findAll()` now returns a standard array of wrappers [source](./references/docs/migration/index.md)
18
19	- BREAKING: `createWrapper()` — removed in v2, use the `new DOMWrapper()` constructor for non-component elements [source](./references/docs/migration/index.md)
20
21	- BREAKING: `shallowMount` — v2 no longer renders default slot content for stubbed components by default [source](./references/docs/migration/index.md)
22
23	- BREAKING: `find()` — now only supports `querySelector` syntax; use `findComponent()` to locate Vue components [source](./references/docs/migration/index.md)
24
25	- BREAKING: `setSelected` and `setChecked` — removed in v2, functionality merged into `setValue()` [source](./references/docs/migration/index.md)
26
27	- BREAKING: `attachToDocument` — renamed to `attachTo` in v2 [source](./references/docs/migration/index.md)
28
29	- BREAKING: `emittedByOrder` — removed in v2, use `emitted()` instead [source](./references/docs/migration/index.md)
30
31	- NEW: `renderToString()` — added in v2.3.0 to support SSR testing [source](./references/releases/v2.3.0.md)
32
33	- NEW: `enableAutoUnmount()` / `disableAutoUnmount()` — replaces `enableAutoDestroy` in v2 [source](./references/docs/migration/index.md)
34
35	- DEPRECATED: `scopedSlots` — removed in v2 and merged into the `slots` mounting option [source](./references/docs/migration/index.md)
36
37	Also changed: `setValue()` and `trigger()` return `nextTick` · `slots` scope exposed as `params` in string templates · `is`, `isEmpty`, `isVueInstance`, `name`, `setMethods`, and `contains` removed
38
39	## Best Practices
40
41	- Always `await` methods that return `nextTick` (`trigger`, `setValue`, `setProps`, `setData`) to ensure DOM updates are processed before running assertions [source](./references/docs/guide/advanced/async-suspense.md)
42
43	```ts
44	// Preferred
45	await wrapper.find('button').trigger('click')
46	expect(wrapper.text()).toContain('Count: 1')
47
48	// Avoid — assertion runs before DOM update
49	wrapper.find('button').trigger('click')
50	expect(wrapper.text()).toContain('Count: 1')
51	```
52
53	- 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](./references/docs/api/index.md)
54
55	- 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](./references/docs/guide/advanced/async-suspense.md)
56
57	- Enable `enableAutoUnmount(afterEach)` in your test setup to automatically clean up wrappers after every test, preventing state pollution and memory leaks [source](./references/docs/api/index.md)
58
59	```ts
60	import { enableAutoUnmount } from '@vue/test-utils'
61	import { afterEach } from 'vitest'
62
63	enableAutoUnmount(afterEach)
64	```
65
66	- Wrap components with `async setup()` in a `<Suspense>` component within your test to correctly handle their asynchronous initialization [source](./references/docs/guide/advanced/async-suspense.md)
67
68	- Enable `config.global.renderStubDefaultSlot = true` when using `shallow` mounting to ensure content within default slots is rendered for verification [source](./references/docs/guide/advanced/stubs-shallow-mount.md)
69
70	- Prefer `mount()` with specific `global.stubs` over `shallow: true` to keep tests more production-like while still isolating specific complex child components [source](./references/docs/guide/advanced/stubs-shallow-mount.md)
71
72	- Use `global.provide` to pass data to components using `inject`, ensuring the component tree's dependency injection works as it does in production [source](./references/docs/guide/advanced/reusability-composition.md)
73
74	- Test complex composables by mounting a minimal

People who liked this also viewed

6 picks

Type

vue-test-utils-skilld

173stars8forks

View on GitHub

How to install vue-test-utils-skilld?

skilld-dev/vue-ecosystem-skills/vue-test-utils-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vue-test-utils-skilld

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# vuejs/test-utils `@vue/test-utils@2.4.10`
2	Tags: 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
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `propsData` — v2 renamed to `props` for consistency with component definitions [source](./references/docs/migration/index.md)
10
11	- BREAKING: `createLocalVue` — removed in v2, use the `global` mounting option to install plugins, mixins, or directives [source](./references/docs/migration/index.md)
12
13	- BREAKING: `mocks` and `stubs` — moved into the `global` mounting option in v2 as they apply to all components [source](./references/docs/migration/index.md)
14
15	- BREAKING: `destroy()` — renamed to `unmount()` in v2 to match Vue 3 lifecycle naming [source](./references/docs/migration/index.md)
16
17	- BREAKING: `findAll().at()` — removed in v2; `findAll()` now returns a standard array of wrappers [source](./references/docs/migration/index.md)
18
19	- BREAKING: `createWrapper()` — removed in v2, use the `new DOMWrapper()` constructor for non-component elements [source](./references/docs/migration/index.md)
20
21	- BREAKING: `shallowMount` — v2 no longer renders default slot content for stubbed components by default [source](./references/docs/migration/index.md)
22
23	- BREAKING: `find()` — now only supports `querySelector` syntax; use `findComponent()` to locate Vue components [source](./references/docs/migration/index.md)
24
25	- BREAKING: `setSelected` and `setChecked` — removed in v2, functionality merged into `setValue()` [source](./references/docs/migration/index.md)
26
27	- BREAKING: `attachToDocument` — renamed to `attachTo` in v2 [source](./references/docs/migration/index.md)
28
29	- BREAKING: `emittedByOrder` — removed in v2, use `emitted()` instead [source](./references/docs/migration/index.md)
30
31	- NEW: `renderToString()` — added in v2.3.0 to support SSR testing [source](./references/releases/v2.3.0.md)
32
33	- NEW: `enableAutoUnmount()` / `disableAutoUnmount()` — replaces `enableAutoDestroy` in v2 [source](./references/docs/migration/index.md)
34
35	- DEPRECATED: `scopedSlots` — removed in v2 and merged into the `slots` mounting option [source](./references/docs/migration/index.md)
36
37	Also changed: `setValue()` and `trigger()` return `nextTick` · `slots` scope exposed as `params` in string templates · `is`, `isEmpty`, `isVueInstance`, `name`, `setMethods`, and `contains` removed
38
39	## Best Practices
40
41	- Always `await` methods that return `nextTick` (`trigger`, `setValue`, `setProps`, `setData`) to ensure DOM updates are processed before running assertions [source](./references/docs/guide/advanced/async-suspense.md)
42
43	```ts
44	// Preferred
45	await wrapper.find('button').trigger('click')
46	expect(wrapper.text()).toContain('Count: 1')
47
48	// Avoid — assertion runs before DOM update
49	wrapper.find('button').trigger('click')
50	expect(wrapper.text()).toContain('Count: 1')
51	```
52
53	- 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](./references/docs/api/index.md)
54
55	- 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](./references/docs/guide/advanced/async-suspense.md)
56
57	- Enable `enableAutoUnmount(afterEach)` in your test setup to automatically clean up wrappers after every test, preventing state pollution and memory leaks [source](./references/docs/api/index.md)
58
59	```ts
60	import { enableAutoUnmount } from '@vue/test-utils'
61	import { afterEach } from 'vitest'
62
63	enableAutoUnmount(afterEach)
64	```
65
66	- Wrap components with `async setup()` in a `<Suspense>` component within your test to correctly handle their asynchronous initialization [source](./references/docs/guide/advanced/async-suspense.md)
67
68	- Enable `config.global.renderStubDefaultSlot = true` when using `shallow` mounting to ensure content within default slots is rendered for verification [source](./references/docs/guide/advanced/stubs-shallow-mount.md)
69
70	- Prefer `mount()` with specific `global.stubs` over `shallow: true` to keep tests more production-like while still isolating specific complex child components [source](./references/docs/guide/advanced/stubs-shallow-mount.md)
71
72	- Use `global.provide` to pass data to components using `inject`, ensuring the component tree's dependency injection works as it does in production [source](./references/docs/guide/advanced/reusability-composition.md)
73
74	- Test complex composables by mounting a minimal

People who liked this also viewed

6 picks

Type