Component testing utils for Vue 3.
- yarn:
yarn add @vue/test-utils --dev - npm:
npm install @vue/test-utils --save-dev
Get started with the documentation.
Check the migration guide. It's still a work in progress. If you find a problem or something that doesn't work that previously did in Vue Test Utils v1, please open an issue.
See the docs.
Get started by running yarn install. You can run the tests with yarn test. That's it!
This is table for those coming from VTU 1, comparing the two APIs. Some things are still a work in progress.
- ✅ - implemented
- ❌ - not yet implemented
- ⚰️ - will not be implemented (if you have a compelling use case, please open an issue)
| option | status | notes |
|---|---|---|
| data | ✅ | |
| slots | ✅ | |
| mocks | ✅ | nested in global |
| propsData | ✅ | now called props |
| provide | ✅ | nested in global |
| mixins | ✅ | (new!) nested in global |
| plugins | ✅ | (new!) nested in global |
| component | ✅ | (new!) nested in global |
| directives | ✅ | (new!) nested in global |
| stubs | ✅ | |
| attachToDocument | ✅ | renamed attachTo. See here |
| attrs | ✅ | |
| scopedSlots | ⚰️ | scopedSlots are merged with slots in Vue 3 |
| context | ⚰️ | different from Vue 2, does not make sense anymore. |
| localVue | ⚰️ | no longer required - Vue 3 there is no global Vue instance to mutate. |
| listeners | ⚰️ | no longer exists in Vue 3 |
| parentComponent | ⚰️ |
| method | status | notes |
|---|---|---|
| attributes | ✅ | |
| classes | ✅ | |
| exists | ✅ | |
| find | ✅ | only querySelector syntax is supported. find(Comp) under discussion here |
| emitted | ✅ | |
| findAll | ✅ | see above. .vm is different to Vue 2. We are exploring options. |
| get | ✅ | |
| html | ✅ | |
| setValue | ✅ | works for select, checkbox, radio button, input, textarea. Returns nextTick. |
| text | ✅ | |
| trigger | ✅ | returns nextTick. You can do await wrapper.find('button').trigger('click') |
| setProps | ✅ | |
| props | ✅ | |
| setData | ✅ | |
| destroy | ✅ | renamed to unmount to match Vue 3 lifecycle hook name. |
| props | ✅ | |
| isVisible | ✅ | |
| contains | ⚰️ | use find |
| emittedByOrder | ⚰️ | use emitted |
| setSelected | ⚰️ | now part of setValue |
| setChecked | ⚰️ | now part of setValue |
| is | ⚰️ | |
| isEmpty | ⚰️ | use matchers such as this |
| isVueInstance | ⚰️ | |
| name | ⚰️ | |
| setMethods | ⚰️ |