Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:

strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]
node-version: [12.x, 14.x, 15.x]

steps:
- uses: actions/checkout@v2
Expand Down
107 changes: 52 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ The next iteration of Vue Test Utils. It targets Vue 3.
- yarn: `yarn add @vue/test-utils@next --dev`
- npm: `npm install @vue/test-utils@next --save-dev`

Get started with the [documentation](https://vue-test-utils.vuejs.org/v2/).

## Coming from Vue 2 + Vue Test Utils?

We are working on [some documentation to help people migrate](https://vue-test-utils.vuejs.org/v2/guide/migration.html).
Expand All @@ -19,27 +21,23 @@ There is [`vue-jest`](https://github.com/vuejs/vue-jest) for loading `.vue` file

If you don't want to configure things, you can download a repository with Vue 3, `@vue/test-utils@next`, `vue-jest@next` and TypeScript configured [here](https://github.com/lmiller1990/vtu-next-demo).

## Docs
## What works?

Docs are located in [this repo](https://github.com/vuejs/vue-test-utils-next-docs). Read them [here](https://vue-test-utils.vuejs.org/v2/). They are in a separate repository because running Vuepress alongside a repo with Vue 3 causes conflicts - Vuepress expects to be running against Vue 2. This seems like the most simple solution for now.
See the [docs](https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html).

## 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.

## What works?

See the [docs](https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html).

## Contributing

This is still quite alpha, but 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](https://github.com/vuejs/vue-test-utils-next-docs/issues).

## Comparsion with Vue Test Utils beta (targeting Vue 2)
## 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.

Expand All @@ -49,54 +47,53 @@ This is table for those coming from VTU 1, comparing the two APIs. Some things a

### Mounting Options

| option | status | notes |
|---------|-------|------|
data | ✅
slots | ✅ | has not been tested vigorously. Please try it out.
mocks | ✅ | nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
propsData | ✅ | now called `props`
provide | ✅ | nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
mixins | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
plugins | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
component | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
directives | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
stubs | ✅
attachToDocument |✅| renamed `attachTo`. See [here](https://github.com/vuejs/vue-test-utils/pull/1492)
attrs | ✅
scopedSlots | ⚰️ | scopedSlots are merged with slots in 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 | ⚰️ |

| option | status | notes |
| ---------------- | ------ | ----------------------------------------------------------------------------------------- |
| data | ✅ |
| slots | ✅ | has not been tested vigorously. Please try it out. |
| mocks | ✅ | nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global) |
| propsData | ✅ | now called `props` |
| provide | ✅ | nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global) |
| mixins | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global) |
| plugins | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global) |
| component | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global) |
| directives | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global) |
| stubs | ✅ |
| attachToDocument | ✅ | renamed `attachTo`. See [here](https://github.com/vuejs/vue-test-utils/pull/1492) |
| attrs | ✅ |
| scopedSlots | ⚰️ | scopedSlots are merged with slots in 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 `querySelector` syntax is supported. `find(Comp)` under discussion [here](https://github.com/vuejs/vue-test-utils/issues/1498)
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](https://github.com/testing-library/jest-dom#tobeempty)
isVueInstance | ⚰️
name | ⚰️ |
setMethods | ⚰️ |
| method | status | notes |
| -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| attributes | ✅ |
| classes | ✅ |
| exists | ✅ |
| find | ✅ | only `querySelector` syntax is supported. `find(Comp)` under discussion [here](https://github.com/vuejs/vue-test-utils/issues/1498) |
| 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](https://github.com/testing-library/jest-dom#tobeempty) |
| isVueInstance | ⚰️ |
| name | ⚰️ |
| setMethods | ⚰️ |
116 changes: 116 additions & 0 deletions docs/.vitepress/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/** @typedef {import('vitepress').UserConfig} UserConfig */

/** @type {UserConfig} */
const config = {
// base: '/v2/',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pending to figure out where will docs get deployed

title: 'Vue Test Utils for Vue 3',
description: 'The documentation for the official Vue Test Utils',
locales: {
'/': {
lang: 'en-US',
title: 'Vue Test Utils (2.0.0-beta.14)'
}
},
head: [['link', { rel: 'icon', href: `/logo.png` }]],
themeConfig: {
repo: 'vuejs/vue-test-utils-next',
docsRepo: 'vuejs/vue-test-utils-next',
docsDir: 'docs',
docsBranch: 'master',
editLinks: true,
nav: [
{ text: 'Guide', link: '/introduction/' },
{ text: 'API Reference', link: '/api/' },
{ text: 'Migrating from Vue 2', link: '/migration/' },
{
text: 'Changelog',
link: 'https://github.com/vuejs/vue-test-utils-next/releases'
}
],
sidebar: [
{
text: 'Introduction',
link: '/introduction/'
},
{
text: 'Installation',
link: '/installation/'
},
{
text: 'Essentials',
collapsable: false,
children: [
{ text: 'A Crash Course', link: '/guide/essentials/a-crash-course' },
{
text: 'Conditional Rendering',
link: '/guide/essentials/conditional-rendering'
},
{
text: 'Testing Emitted Events',
link: '/guide/essentials/event-handling'
},
{ text: 'Testing Forms', link: '/guide/essentials/forms' },
{
text: 'Passing Data to Components',
link: '/guide/essentials/passing-data'
}
]
},
{
text: 'Vue Test Utils in depth',
collapsable: false,
children: [
{ text: 'Slots', link: '/guide/advanced/slots' },
{
text: 'Asynchronous Behavior',
link: '/guide/advanced/async-suspense'
},
{
text: 'Making HTTP Requests',
link: '/guide/advanced/http-requests'
},
{ text: 'Transitions', link: '/guide/advanced/transitions' },
{
text: 'Component Instance',
link: '/guide/advanced/component-instance'
},
{
text: 'Reusability and Composition',
link: '/guide/advanced/reusability-composition'
},
{ text: 'Testing Vuex', link: '/guide/advanced/vuex' },
{ text: 'Testing Vue Router', link: '/guide/advanced/vue-router' },
{
text: 'Third-party integration',
link: '/guide/advanced/third-party'
},
{
text: 'Stubs and Shallow Mount',
link: '/guide/advanced/stubs-shallow-mount'
}
]
},
{
text: 'Extending Vue Test Utils',
collapsable: false,
children: [
{ text: 'Plugins', link: '/guide/extending-vtu/plugins' },
{
text: 'Community and Learning',
link: '/guide/extending-vtu/community-learning'
}
]
},
{
text: 'Migrating from Vue 2',
link: '/migration/'
},
{
text: 'API Reference',
link: '/api/'
}
]
}
}

module.exports = config
Loading