vuejs/ vue-test-utils-next
About the developer
183 Stars 
46 Forks 
683 Commits 
24 Opened issues 
Description
The next iteration of Vue Test Utils, targeting Vue 3
Services available
Contributors list
vue-test-utils-next
The next iteration of Vue Test Utils. It targets Vue 3.
Installation and Usage
- yarn:
yarn add @vue/[email protected] --dev
- npm:
npm install @vue/[email protected] --save-dev
Get started with the documentation.
Coming from Vue 2 + Vue Test Utils?
We are working on some documentation to help people migrate.
At this point you will have better luck trying this out with a brand new Vue 3 app, as opposed to upgrading an existing Vue 2 app. Feedback and bug reports are welcome!
Working with .vue
files
vue-jestfor loading
.vuefiles into Jest. The
nextbranch contains support for Vue 3. Install it with
yarn add [email protected]. It lacks support for some things, namely JSX.
If you don't want to configure things, you can download a repository with Vue 3,
@vue/[email protected],
[email protected]and TypeScript configured here.
Documentation
See the docs.
Development
It's a pretty small codebase at the moment. Get started by running
yarn install. You can run the tests with
yarn test. That's it!
There is still some work left to do. See issues for some basic TODOs, or the table at the bottom of this page.
Contributing
We plan on moving to RC sooner than later. If you want to add a feature, have a hack or ping someone in Discord to chat, or check out the issues and project board.
There's also some work left to do in docs.
Comparison with Vue Test Utils beta (targeting Vue 2)
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)
Mounting Options
| option | status | notes | | ---------------- | ------ | ----------------------------------------------------------------------------------- | | data | ✅ | | slots | ✅ | has not been tested vigorously. Please try it out. | | 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
slotsin Vue 3 | | context | ⚰️ | different from Vue 2, does not make sense anymore. | | localVue | ⚰️ | may not make sense anymore since we do not mutate the global Vue instance in Vue 3. | | listeners | ⚰️ | no longer exists in Vue 3 | | parentComponent | ⚰️ |
Wrapper API (mount)
| method | status | notes | | -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------- | | attributes | ✅ | | classes | ✅ | | exists | ✅ | | find | ✅ | only
querySelectorsyntax is supported.
find(Comp)under discussion here | | emitted | ✅ | | findAll | ✅ | see above.
.vmis 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 unmountto 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 | ⚰️ |