Vue Test Utils

https://test-utils.vuejs.org/
Admin
Vue Test Utils is the official testing utility library for Vue.js 3 that provides utility functions...
Tokens:40,762
Snippets:447
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Full Teleport Test Setup

Source: https://test-utils.vuejs.org/guide/advanced/teleport.html

This example demonstrates a complete test case for a teleported component, including setting up the teleport target in `beforeEach` and cleaning up in `afterEach`.

```typescript
import { mount } from '@vue/test-utils'
import Navbar from './Navbar.vue'
import Signup from './Signup.vue'

beforeEach(() => {
  // create teleport target
  const el = document.createElement('div')
  el.id = 'modal'
  document.body.appendChild(el)
})

afterEach(() => {
  // clean up
  document.body.innerHTML = ''
})

test('teleport', async () => {
  const wrapper = mount(Navbar)

  const signup = wrapper.getComponent(Signup)
  await signup.get('input').setValue('valid_username')
  await signup.get('form').trigger('submit.prevent')

  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
})
```

--------------------------------

### Component with data and setup

Source: https://test-utils.vuejs.org/api

Component structure demonstrating both Options API data and Composition API setup.

```vue
<template>
  <div>Size: {{ size }} {{ unit }}</div>
</template>

<script>
export default {
  setup() {
    return {
      size: ref(0)
    }
  },
  data() {
    return {
      unit: 'cm'
    }
  }
}
</script>
```

--------------------------------

### Find all components example

Source: https://test-utils.vuejs.org/api

Example usage of findAllComponents to retrieve multiple component instances.

```vue
<template>
  <FooComponent v-for="number in [1, 2, 3]" :key="number" data-test="number">
    {{ number }}
  </FooComponent>
</template>
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

test('findAllComponents', () => {
  const wrapper = mount(Component)

  // Returns an array of VueWrapper
  wrapper.findAllComponents('[data-test="number"]')
})
```

--------------------------------

### Testing Asynchronous Setup with Suspense

Source: https://test-utils.vuejs.org/guide/advanced/async-suspense.html

Shows how to test a component with an asynchronous `setup` function. The component must be mounted within a `Suspense` component, and `flushPromises` is used to wait for the asynchronous operations within `setup` to complete.

```javascript
const Async = defineComponent({
  async setup() {
    // await something
  }
})

test('Async component', async () => {
  const TestComponent = defineComponent({
    components: { Async },
    template: '<Suspense><Async/></Suspense>'
  })

  const wrapper = mount(TestComponent)
  await flushPromises()
  // ...
})
```

--------------------------------

### Define Components for Stubbing Example

Source: https://test-utils.vuejs.org/guide/advanced/stubs-shallow-mount

Defines the `FetchDataFromApi` and `App` components. `FetchDataFromApi` makes an API call, and `App` renders it. This setup is used to demonstrate stubbing.

```javascript
const FetchDataFromApi = {
  name: 'FetchDataFromApi',
  template: '
    <div>{{ result }}</div>
  ',
  async mounted() {
    const res = await axios.get('/api/info')
    this.result = res.data
  },
  data() {
    return {
      result: ''
    }
  }
}

const App = {
  components: {
    FetchDataFromApi
  },
  template: '
    <h1>Welcome to Vue.js 3</h1>
    <fetch-data-from-api />
  '
}
```

--------------------------------

### Install a Vue Test Utils Plugin

Source: https://test-utils.vuejs.org/guide/extending-vtu/plugins.html

Install a plugin by calling `config.plugins.VueWrapper.install()`. This should be done before mounting components. You can optionally pass options to the plugin.

```javascript
import { config } from '@vue/test-utils'

// locally defined plugin, see "Writing a Plugin"
import MyPlugin from './myPlugin'

// Install a plugin onto VueWrapper
config.plugins.VueWrapper.install(MyPlugin)
```

```javascript
config.plugins.VueWrapper.install(MyPlugin, { someOption: true })
```

--------------------------------

### global.provide

Source: https://test-utils.vuejs.org/api

Provides data to be received in a setup function via inject.

```APIDOC
## global.provide

### Description
Provides data to be received in a `setup` function via `inject`. Supports standard keys or ES6 Symbols.

### Signature
`provide?: Record<any, any>`
```

--------------------------------

### Install Vue Test Utils

Source: https://test-utils.vuejs.org/installation

Commands to install the package using different package managers.

```shell
npm install --save-dev @vue/test-utils
```

```shell
yarn add --dev @vue/test-utils
```

```shell
deno install --dev @vue/test-utils
```

--------------------------------

### Install Vitest

Source: https://test-utils.vuejs.org/installation

Command to install Vitest as a development dependency.

```shell
npm install --save-dev vitest
```

--------------------------------

### Providing Keyed `useStore` using `global.plugins`

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Install the Vuex store as a plugin with its injection key using the `global.plugins` mounting option.

```javascript
// app.spec.js
import { createStore } from 'vuex'
import { key } from './store'

const store = createStore({
  /* ... */
})

const wrapper = mount(App, {
  global: {
    // to pass options to plugins, use the array syntax.
    plugins: [[store, key]]
  }
})
```

--------------------------------

### Register global components

Source: https://test-utils.vuejs.org/api

Example of registering a component globally for a test.

```vue
<template>
  <div>
    <global-component />
  </div>
</template>

<script>
import GlobalComponent from '@/components/GlobalComponent'

export default {
  components: {
    GlobalComponent
  }
}
</script>
```

```vue
<template>
  <div class="global-component">My Global Component</div>
</template>
```

```js
import { mount } from '@vue/test-utils'
import GlobalComponent from '@/components/GlobalComponent'
import Component from './Component.vue'

test('global.components', () => {
  const wrapper = mount(Component, {
    global: {
      components: {
        GlobalComponent
      }
    }
  })

  expect(wrapper.find('.global-component').exists()).toBe(true)
})
```

--------------------------------

### Mount component with props

Source: https://test-utils.vuejs.org/api

Example of passing props to a component during mount.

```vue
<template>
  <span>Count: {{ count }}</span>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true
    }
  }
}
</script>
```

```js
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

test('props', () => {
  const wrapper = mount(Component, {
    props: {
      count: 5
    }
  })

  expect(wrapper.html()).toContain('Count: 5')
})
```

--------------------------------

### text Component Example

Source: https://test-utils.vuejs.org/api

A simple component displaying text content.

```vue
<template>
  <p>Hello world</p>
</template>
```

--------------------------------

### global.plugins

Source: https://test-utils.vuejs.org/api

Installs plugins on the mounted component. Accepts an array of plugins or tuples containing a plugin and its options.

```APIDOC
## global.plugins

### Description
Installs plugins on the mounted component. You can pass a single plugin or an array containing the plugin and its arguments.

### Signature
`plugins?: (Plugin | [Plugin, ...any[]])[]`
```

--------------------------------

### Configure global provide

Source: https://test-utils.vuejs.org/api

Provides data to be received in a setup function via inject. Supports dynamic keys using ES6 Symbols.

```typescript
provide?: Record<any, any>
```

```vue
<template>
  <div>Theme is {{ theme }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const theme = inject('Theme')
    return {
      theme
    }
  }
}
</script>
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

test('global.provide', () => {
  const wrapper = mount(Component, {
    global: {
      provide: {
        Theme: 'dark'
      }
    }
  })

  console.log(wrapper.html()) //=> <div>Theme is dark</div>
})
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

const ThemeSymbol = Symbol()

mount(Component, {
  global: {
    provide: {
      [ThemeSymbol]: 'value'
    }
  }
})
```

--------------------------------

### Mount component with slots

Source: https://test-utils.vuejs.org/api

Example of providing content for named and default slots.

```vue
<template>
  <slot name="first" />
  <slot />
  <slot name="second" />
</template>
```

```vue
<template>
  <div>Bar</div>
</template>
```

```js
import { h } from 'vue';
import { mount } from '@vue/test-utils'
import Component from './Component.vue'
import Bar from './Bar.vue'

test('renders slots content', () => {
  const wrapper = mount(Component, {
    slots: {
      default: 'Default',
      first: h('h1', {}, 'Named Slot'),
      second: Bar
    }
  })

  expect(wrapper.html()).toBe('<h1>Named Slot</h1>Default<div>Bar</div>')
})
```

--------------------------------

### Testing Initial Navigation with `isReady`

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Ensures the initial navigation has completed by pushing a route and awaiting `router.isReady()`. This resolves the 'Unexpected error when starting the router' warning.

```javascript
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '@/router'

const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

test('routing', async () => {
  router.push('/')

  // After this line, router is ready
  await router.isReady()

  const wrapper = mount(App, {
    global: {
      plugins: [router]
    }
  })
  expect(wrapper.html()).toContain('Welcome to the blogging app')
})
```

--------------------------------

### Mounting Navbar Component (Initial)

Source: https://test-utils.vuejs.org/guide/advanced/teleport.html

A basic test setup to mount the Navbar component. This will likely result in a warning about the teleport target not being found.

```typescript
import { mount } from '@vue/test-utils'
import Navbar from './Navbar.vue'
import Signup from './Signup.vue'

test('emits a signup event when valid', async () => {
  const wrapper = mount(Navbar)
})
```

--------------------------------

### Asserting Element Presence with get()

Source: https://test-utils.vuejs.org/guide/essentials/conditional-rendering.html

Tests the presence of a profile link using `wrapper.get()` and asserts its text content. `get()` throws an error if the element is not found.

```javascript
test('renders a profile link', () => {
  const wrapper = mount(Nav)

  // Here we are implicitly asserting that the
  // element #profile exists.
  const profileLink = wrapper.get('#profile')

  expect(profileLink.text()).toEqual('My Profile')
})
```

--------------------------------

### Mount Component with Real Vuex Store

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Mounts a Vue component and installs a Vuex store using `global.plugins` for integration testing.

```js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state: any) {
      state.count += 1
    }
  }
})

test('vuex', async () => {
  const wrapper = mount(App, {
    global: {
      plugins: [store]
    }
  })

  await wrapper.find('button').trigger('click')

  expect(wrapper.html()).toContain('Count: 1')
})
```

--------------------------------

### Define global plugins

Source: https://test-utils.vuejs.org/api

Installs plugins on the mounted component. Use an array to pass options to a plugin.

```typescript
plugins?: (Plugin | [Plugin, ...any[]])[]
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

import myPlugin from '@/plugins/myPlugin'

test('global.plugins', () => {
  mount(Component, {
    global: {
      plugins: [myPlugin]
    }
  })
})
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

test('global.plugins with options', () => {
  mount(Component, {
    global: {
      plugins: [Plugin, [PluginWithOptions, 'argument 1', 'another argument']]
    }
  })
})
```

--------------------------------

### Component using Composition API with Vue Router

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Demonstrates how to use `useRouter` and `useRoute` within the `setup` function of a Vue component. This pattern is useful for accessing router functionalities like navigation and route parameters in a Composition API context.

```javascript
import { useRouter, useRoute } from 'vue-router'

const Component = {
  template: `<button @click="redirect">Click to Edit</button>`,
  props: ['isAuthenticated'],
  setup(props) {
    const router = useRouter()
    const route = useRoute()

    const redirect = () => {
      if (props.isAuthenticated) {
        router.push(`/posts/${route.params.id}/edit`)
      } else {
        router.push('/404')
      }
    }

    return {
      redirect
    }
  }
}
```

--------------------------------

### unmount Component Example

Source: https://test-utils.vuejs.org/api

A component that logs a message when unmounted.

```vue
<script>
export default {
  unmounted() {
    console.log('unmounted!')
  }
}
</script>
```

--------------------------------

### Define component for props testing

Source: https://test-utils.vuejs.org/api

Example component definition used for testing prop retrieval.

```javascript
export default {
  name: 'Component',
  props: {
    truthy: Boolean,
    object: Object,
    string: String
  }
}
```

--------------------------------

### Mount and Test a Vue Component

Source: https://test-utils.vuejs.org/guide

Use `mount` to render a Vue component and interact with its output. Assert the rendered text using `wrapper.text()`. This example requires importing `mount` from '@vue/test-utils'.

```javascript
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
}

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world')
})
```

--------------------------------

### Initial Test Without Vue Router Plugin

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

A minimal test that mounts the App component. This test will fail and show warnings because Vue Router is not installed.

```javascript
import { mount } from '@vue/test-utils'

test('routing', () => {
  const wrapper = mount(App)
  expect(wrapper.html()).toContain('Welcome to the blogging app')
})
```

--------------------------------

### Show Component (Composition API)

Source: https://test-utils.vuejs.org/guide/essentials/passing-data.html

A simple Vue component using the Composition API (`<script setup>`) that conditionally renders a greeting based on the `show` prop.

```vue
<!-- Show.vue -->
<script setup>
import { ref } from 'vue'

const { show = true } = defineProps(['show'])
const greeting = ref('Hello')
</script>

<template>
  <div v-if="show">{{ greeting }}</div>
</template>
```

--------------------------------

### setValue Component Example

Source: https://test-utils.vuejs.org/api

A Vue component demonstrating inputs, checkboxes, and multi-select elements.

```vue
<template>
  <input type="text" v-model="text" />
  <p>Text: {{ text }}</p>

  <input type="checkbox" v-model="checked" />
  <div v-if="checked">The input has been checked!</div>

  <select v-model="multiselectValue" multiple>
    <option value="value1"></option>
    <option value="value2"></option>
    <option value="value3"></option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      checked: false,
      multiselectValue: []
    }
  }
}
</script>
```

--------------------------------

### Mounting App with Vue Router Plugin

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Installs Vue Router as a plugin using the `global.plugins` option in `mount` to resolve 'router-link' and 'router-view' warnings.

```javascript
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '@/router' // This import should point to your routes file declared above

const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

test('routing', () => {
  const wrapper = mount(App, {
    global: {
      plugins: [router]
    }
  })
  expect(wrapper.html()).toContain('Welcome to the blogging app')
})
```

--------------------------------

### get(selector)

Source: https://test-utils.vuejs.org/api

Finds a DOM element and returns a DOMWrapper. Throws an error if the element is not found.

```APIDOC
## get(selector)

### Description
Gets an element and returns a `DOMWrapper` if found. Otherwise it throws an error. It is similar to `find`, but `get` throws an error if an element is not found.

### Signature
`get<K extends keyof HTMLElementTagNameMap>(selector: K): Omit<DOMWrapper<HTMLElementTagNameMap[K]>, 'exists'>`
`get<K extends keyof SVGElementTagNameMap>(selector: K): Omit<DOMWrapper<SVGElementTagNameMap[K]>, 'exists'>`
`get<T extends Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>`
`get(selector: string): Omit<DOMWrapper<Element>, 'exists'>`
```

--------------------------------

### Define Complex Components for Shallow Mount Example

Source: https://test-utils.vuejs.org/guide/advanced/stubs-shallow-mount

Defines a `ComplexComponent` that includes multiple child components (`ComplexA`, `ComplexB`, `ComplexC`). This is used to demonstrate stubbing all child components.

```javascript
const ComplexComponent = {
  components: { ComplexA, ComplexB, ComplexC },
  template: '
    <h1>Welcome to Vue.js 3</h1>
    <ComplexA />
    <ComplexB />
    <ComplexC />
  '
}
```

--------------------------------

### Vue Component Example: Counter

Source: https://test-utils.vuejs.org/guide/essentials/easy-to-test.html

A basic Vue component with a counter that increments on button click.

```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<template>
  <p class="paragraph">Times clicked: {{ count }}</p>
  <button @click="increment">increment</button>
</template>
```

--------------------------------

### App Component Using Editor

Source: https://test-utils.vuejs.org/guide/advanced/v-model.html

An example of an App component that uses the Editor component with v-model.

```javascript
const App = {
  components: {
    Editor
  },
  template: `<editor v-model="text" label="test" />`,
  data() {
    return {
      text: 'test'
    }
  }
}
```

--------------------------------

### Get HTML String

Source: https://test-utils.vuejs.org/api

Returns the rendered HTML of an element. By default, the output is formatted; use raw: true for unformatted output.

```typescript
html(): string
html(options?: { raw?: boolean }): string
```

```vue
<template>
  <div>
    <p>Hello world</p>
  </div>
</template>
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

test('html', () => {
  const wrapper = mount(Component)

  expect(wrapper.html()).toBe(
    '<div>\n' +
    '  <p>Hello world</p>\n' +
    '</div>'
  )

  expect(wrapper.html({ raw: true })).toBe('<div><p>Hello world</p></div>')
})
```

--------------------------------

### Use Custom Button Component in App

Source: https://test-utils.vuejs.org/guide/advanced/stubs-shallow-mount

This example shows how the CustomButton component might be used within an App component, conditionally rendering content based on a prop.

```javascript
const App = {
  props: ['authenticated'],
  components: { CustomButton },
  template: `
    <custom-button>
      <div v-if="authenticated">Log out</div>
      <div v-else>Log in</div>
    </custom-button>
  `
}
```

--------------------------------

### Testing Counter Component (Implementation Details)

Source: https://test-utils.vuejs.org/guide/essentials/easy-to-test.html

An example test that updates the component's internal data and relies on CSS class names, which can lead to false positives.

```javascript
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

test('counter text updates', async () => {
  const wrapper = mount(Counter)
  const paragraph = wrapper.find('.paragraph')

  expect(paragraph.text()).toBe('Times clicked: 0')

  await wrapper.setData({ count: 2 })

  expect(paragraph.text()).toBe('Times clicked: 2')
})
```

--------------------------------

### Replace createLocalVue with global Mounting Option

Source: https://test-utils.vuejs.org/migration

The `createLocalVue` function and `localVue` mounting option are no longer needed in v2 due to changes in Vue 3's plugin system. Use the `global` mounting option, specifically `global.plugins`, to install plugins.

```javascript
import Vuex from 'vuex'
import { createLocalVue, mount } from '@vue/test-utils'

const App = {
  computed: {
    count() {
      return this.$state.count
    }
  }
}

const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store({
  state: {
    return { count: 1 }
  }
})

const wrapper = mount(App, {
  store
  localVue
})
```

```javascript
import { createStore } from 'vuex'
import { mount } from '@vue/test-utils'

const App = {
  computed: {
    count() {
      return this.$state.count
    }
  }
}

const store = createStore({
  state() {
    return { count: 1 }
  }
})

const wrapper = mount(App, {
  global: {
    plugins: [store]
  }
})
```

--------------------------------

### Test complex input components using findComponent and setValue

Source: https://test-utils.vuejs.org/guide/essentials/forms

For complex input components, potentially from UI libraries, use `findComponent` to get the component instance and `setValue` to directly set its value. This avoids brittle tests dependent on internal markup.

```vue
<!-- CustomTextarea.vue -->
<script setup>
import { ref } from 'vue'

const description = ref('')
const emit = defineEmits(['submitted'])

const handleSubmit = () => {
  emit('submitted', description.value)
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <v-textarea v-model="description" ref="description" />
    <button type="submit">Send</button>
  </form>
</template>
```

```javascript
test('emits textarea value on submit', async () => {
  const wrapper = mount(CustomTextarea)
  const description = 'Some very long text...'

  await wrapper.findComponent({ ref: 'description' }).setValue(description)

  wrapper.find('form').trigger('submit')

  expect(wrapper.emitted('submitted')[0][0]).toEqual(description)
})
```

--------------------------------

### Using `useStore` with an Injection Key

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Demonstrates how to use `useStore` with a unique injection key when setting up the Vue app and store.

```javascript
import { createStore } from 'vuex'
import { createApp } from 'vue'

// create a globally unique symbol for the injection key
const key = Symbol()

const App = {
  setup() {
    // use unique key to access store
    const store = useStore(key)
  }
}

const store = createStore({
  /* ... */
})
const app = createApp({
  /* ... */
})

// specify key as second argument when calling app.use(store)
```

--------------------------------

### Creating a Vue Router Instance

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Sets up routes and creates a Vue Router instance with web history. Exports routes separately for testability.

```javascript
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: {
      template: 'Welcome to the blogging app'
    }
  },
  {
    path: '/posts',
    component: Posts
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

export { routes }

export default router
```

--------------------------------

### Interacting with a Teleported Component

Source: https://test-utils.vuejs.org/guide/advanced/teleport.html

After getting the component wrapper using `getComponent`, you can use standard wrapper methods like `get` and `trigger` to interact with its elements and test emitted events.

```typescript
test('teleport', async () => {
  const wrapper = mount(Navbar)

  const signup = wrapper.getComponent(Signup)
  await signup.get('input').setValue('valid_username')
  await signup.get('form').trigger('submit.prevent')

  expect(signup.emitted().signup[0]).toEqual(['valid_username'])
})
```

--------------------------------

### trigger Component Example

Source: https://test-utils.vuejs.org/api

A component with a button that increments a counter.

```vue
<template>
  <span>Count: {{ count }}</span>
  <button @click="count++">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>
```

--------------------------------

### Mount with Props and Plugins

Source: https://test-utils.vuejs.org/api

Configuring component props and global plugins during the mount process.

```javascript
const wrapper = mount(Component, {
  props: {
    msg: 'world'
  },
  global: {
    plugins: [vuex]
  }
})
```

--------------------------------

### Providing Keyed `useStore` using `global.provide`

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Inject the Vuex store using its specific injection key via the `global.provide` mounting option.

```javascript
// app.spec.js
import { createStore } from 'vuex'
import { key } from './store'

const store = createStore({
  /* ... */
})

const wrapper = mount(App, {
  global: {
    provide: {
      [key]: store
    }
  }
})
```

--------------------------------

### mount(Component, options?)

Source: https://test-utils.vuejs.org/api

Creates a Wrapper that contains the mounted and rendered Vue component to test. It creates a Vue 3 app that holds and renders the component, returning a wrapper to act and assert against the component.

```APIDOC
## mount(Component, options?)

### Description
Creates a Wrapper that contains the mounted and rendered Vue component to test. Note that when mocking dates/timers with Vitest, this must be called after `vi.setSystemTime`.

### Signature
`function mount(Component, options?: MountingOptions): VueWrapper`

### Parameters
- **Component** (Object) - Required - The Vue component to mount.
- **options** (MountingOptions) - Optional - Configuration object for the component state.

### MountingOptions
- **attachTo** (Element | string) - Optional - Specify the node to mount the component on.
- **attrs** (Record<string, unknown>) - Optional - Sets HTML attributes to the component.
- **data** (Function) - Optional - Overrides a component's default data.
- **props** (Object) - Optional - Sets component props.
- **slots** (Object) - Optional - Defines component slots.
- **global** (GlobalMountOptions) - Optional - Configures the Vue 3 app instance.
- **shallow** (boolean) - Optional - Whether to shallow mount the component.
```

--------------------------------

### Using a Real Router with Composition API in Tests

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Demonstrates how to set up and use a real Vue Router instance within tests for components using the Composition API. This involves creating a router with `createRouter` and `createWebHistory`, and providing it to the component via `global.plugins`.

```javascript
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '@/router'

let router

beforeEach(async () => {
  router = createRouter({
    history: createWebHistory(),
    routes: routes
  })

  router.push('/')
  await router.isReady()
})

test('allows authenticated user to edit a post', async () => {
  const wrapper = mount(Component, {
    props: {
      isAuthenticated: true
    },
    global: {
      plugins: [router]
    }
  })

  const push = jest.spyOn(router, 'push')
  await wrapper.find('button').trigger('click')

  expect(push).toHaveBeenCalledTimes(1)
  expect(push).toHaveBeenCalledWith('/posts/1/edit')
})
```

--------------------------------

### Get DOM Element

Source: https://test-utils.vuejs.org/api

Retrieves a DOM element as a DOMWrapper. Throws an error if the element is not found.

```typescript
get<K extends keyof HTMLElementTagNameMap>(selector: K): Omit<DOMWrapper<HTMLElementTagNameMap[K]>, 'exists'>
get<K extends keyof SVGElementTagNameMap>(selector: K): Omit<DOMWrapper<SVGElementTagNameMap[K]>, 'exists'>
get<T extends Element>(selector: string): Omit<DOMWrapper<T>, 'exists'>
get(selector: string): Omit<DOMWrapper<Element>, 'exists'>
```

```vue
<template>
  <span>Span</span>
</template>
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

test('get', () => {
  const wrapper = mount(Component)

  wrapper.get('span') //=> found; returns DOMWrapper

  expect(() => wrapper.get('.not-there')).toThrowError()
})
```

--------------------------------

### Test Password Component with Mounting Options

Source: https://test-utils.vuejs.org/guide/essentials/passing-data.html

Tests the Password component by setting the `minLength` prop and initial `password` data using mounting options. Asserts that the correct error message is rendered.

```javascript
test('renders an error if length is too short', () => {
  const wrapper = mount(Password, {
    props: {
      minLength: 10
    },
    data() {
      return {
        password: 'short'
      }
    }
  })

  expect(wrapper.html()).toContain('Password must be at least 10 characters')
})
```

--------------------------------

### Test component rendering with mount

Source: https://test-utils.vuejs.org/guide/essentials/a-crash-course.html

A test case demonstrating how to mount a component and assert its rendered text content using a data-test selector.

```javascript
import { mount } from '@vue/test-utils'
import TodoApp from './TodoApp.vue'

test('renders a todo', () => {
  const wrapper = mount(TodoApp)

  const todo = wrapper.get('[data-test="todo"]')

  expect(todo.text()).toBe('Learn Vue.js 3')
})
```

--------------------------------

### Get Vue Component Instance

Source: https://test-utils.vuejs.org/api

Retrieves a Vue component instance as a VueWrapper. Throws an error if the component is not found.

```typescript
getComponent<T extends ComponentPublicInstance>(selector: new () => T): Omit<VueWrapper<T>, 'exists'>
getComponent<T extends ComponentPublicInstance>(selector: { name: string } | { ref: string } | string): Omit<VueWrapper<T>, 'exists'>
getComponent<T extends ComponentPublicInstance>(selector: any): Omit<VueWrapper<T>, 'exists'>
```

```vue
<template>
  <div class="foo">Foo</div>
</template>

<script>
export default {
  name: 'Foo'
}
</script>
```

```vue
<template>
  <Foo />
</template>

<script>
import Foo from '@/Foo'

export default {
  components: { Foo }
}
</script>
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

import Foo from '@/Foo.vue'

test('getComponent', () => {
  const wrapper = mount(Component)

  wrapper.getComponent({ name: 'foo' }) // returns a VueWrapper
  wrapper.getComponent(Foo) // returns a VueWrapper

  expect(() => wrapper.getComponent('.not-there')).toThrowError()
})
```

--------------------------------

### Counter Component Example

Source: https://test-utils.vuejs.org/guide/essentials/event-handling

A simple Vue component that increments a count and emits an 'increment' event with the new count value.

```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)
const emit = defineEmits(['increment'])

const handleClick = () => {
  count.value += 1
  emit('increment', count.value)
}
</script>

<template>
  <button @click="handleClick">Increment</button>
</template>
```

--------------------------------

### Find elements with find()

Source: https://test-utils.vuejs.org/api

Finds an element and returns a DOMWrapper. Use find when asserting an element does not exist, and get when asserting it does.

```typescript
find<K extends keyof HTMLElementTagNameMap>(selector: K): DOMWrapper<HTMLElementTagNameMap[K]>
find<K extends keyof SVGElementTagNameMap>(selector: K): DOMWrapper<SVGElementTagNameMap[K]>
find<T extends Element>(selector: string): DOMWrapper<T>
find(selector: string): DOMWrapper<Element>
find<T extends Node = Node>(selector: string | RefSelector): DOMWrapper<T>;
```

```vue
<template>
  <span>Span</span>
  <span data-test="span">Span</span>
  <span ref="span">Span</span>
</template>
```

```javascript
import { mount } from '@vue/test-utils'
import Component from './Component.vue'

test('find', () => {
  const wrapper = mount(Component)

  wrapper.find('span') //=> found; returns DOMWrapper
  wrapper.find('[data-test="span"]') //=> found; returns DOMWrapper
  wrapper.find({ ref: 'span' }) //=> found; returns DOMWrapper
  wrapper.find('p') //=> nothing found; returns ErrorWrapper
})
```

--------------------------------

### Mount a Component

Source: https://test-utils.vuejs.org/api

Basic usage of the mount function to render a component and assert its output.

```javascript
import { mount } from '@vue/test-utils'

const Component = {
  template: '<div>Hello world</div>'
}

test('mounts a component', () => {
  const wrapper = mount(Component, {})

  expect(wrapper.html()).toContain('Hello world')
})
```

--------------------------------

### vm

Source: https://test-utils.vuejs.org/api

Access the Vue app instance from a VueWrapper.

```APIDOC
## vm

### Signature
`vm: ComponentPublicInstance`

### Description
The `Vue` app instance. You can access all of the instance methods and instance properties. Note that `vm` is only available on a `VueWrapper`.
```

--------------------------------

### Presetting Vuex Store State for Tests

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Create a wrapper function around `createStore` to easily set initial state for testing mutations.

```javascript
const createVuexStore = initialState =>
  createStore({
    state: {
      count: 0,
      ...initialState
    },
    mutations: {
      increment(state, value = 1) {
        state.count += value
      }
    }
  })

test('increment mutation without passing a value', () => {
  const store = createVuexStore({ count: 20 })
  store.commit('increment')
  expect(store.state.count).toBe(21)
})

test('increment mutation with a value', () => {
  const store = createVuexStore({ count: -10 })
  store.commit('increment', 15)
  expect(store.state.count).toBe(5)
})
```

--------------------------------

### Providing Unkeyed `useStore` via Global Provide

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Inject the Vuex store into the component using the `global.provide` mounting option when `useStore` is used without an injection key.

```javascript
import { createStore } from 'vuex'

const store = createStore({
  // ...
})

const wrapper = mount(App, {
  global: {
    provide: {
      store: store
    }
  }
})
```

--------------------------------

### Mount Component with Mock Vuex Store

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Mounts a Vue component and provides a mock Vuex store using `global.mocks` for unit testing.

```js
test('vuex using a mock store', async () => {
  const $store = {
    state: {
      count: 25
    },
    commit: jest.fn()
  }

  const wrapper = mount(App, {
    global: {
      mocks: {
        $store
      }
    }
  })

  expect(wrapper.html()).toContain('Count: 25')
  await wrapper.find('button').trigger('click')
  expect($store.commit).toHaveBeenCalled()
})
```

--------------------------------

### Test Show Component with `setProps`

Source: https://test-utils.vuejs.org/guide/essentials/passing-data.html

Tests the Show component by mounting it, asserting the initial state, and then using `setProps` to change the `show` prop to `false`. It awaits the DOM update before asserting the greeting is no longer rendered.

```javascript
import { mount } from '@vue/test-utils'
import Show from './Show.vue'

test('renders a greeting when show is true', async () => {
  const wrapper = mount(Show)
  expect(wrapper.html()).toContain('Hello')

  await wrapper.setProps({ show: false })

  expect(wrapper.html()).not.toContain('Hello')
})
```

--------------------------------

### Creating a New Router Instance Per Test

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

To avoid issues with shared state between tests, create a new router instance before each test using `beforeEach`. This ensures a clean state for every test.

```javascript
import { mount, flushPromises } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '@/router'

let router
beforeEach(async () => {
  router = createRouter({
    history: createWebHistory(),
    routes: routes
  })
})

test('routing', async () => {
  router.push('/')
  await router.isReady()

  const wrapper = mount(App, {
    global: {
      plugins: [router]
    }
  })
  expect(wrapper.html()).toContain('Welcome to the blogging app')

  await wrapper.find('a').trigger('click')
  await flushPromises()
  expect(wrapper.html()).toContain('Testing Vue Router')
})
```

--------------------------------

### config.global

Source: https://test-utils.vuejs.org/api

Configures global mounting options for the entire test suite, which are used by default every time a component is mounted.

```APIDOC
## config.global

### Description
Configure mounting options for your entire test suite. These will be used by default every time you `mount` a component. You can override these defaults on a per-test basis.

### Type
`GlobalMountOptions`
- **plugins** (Array) - Optional - Plugins to be used.
- **config** (Object) - Optional - Partial AppConfig.
- **mixins** (Array) - Optional - Component mixins.
- **mocks** (Object) - Optional - Global mocks for components.
- **provide** (Object) - Optional - Global provide options.
- **components** (Object) - Optional - Global components.
- **directives** (Object) - Optional - Global directives.
- **stubs** (Object|Array) - Optional - Global stubs.
- **renderStubDefaultSlot** (boolean) - Optional - Whether to render default slots for stubs.
```

--------------------------------

### Create a Vuex Store

Source: https://test-utils.vuejs.org/guide/advanced/vuex

Defines a simple Vuex store with a state and a mutation.

```js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state: any) {
      state.count += 1
    }
  }
})
```

--------------------------------

### setData(data: Record<string, any>)

Source: https://test-utils.vuejs.org/api

Updates component internal data, whether defined in options API data or composition API setup. Note that this does not allow setting new properties that are not defined in the component.

```APIDOC
## setData(data: Record<string, any>)

### Description
Updates component internal data, whether defined in options API data or composition API setup. You should use await when you call setData to ensure that Vue updates the DOM before you make an assertion.

### Signature
`setData(data: Record<string, any>): Promise<void>`
```

--------------------------------

### Testing Navigation and Content Update

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Tests clicking a link to navigate to a new route and verifies the updated content. Requires awaiting `router.isReady()` for asynchronous routing.

```javascript
import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '@/router'

const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

test('routing', async () => {
  router.push('/')
  await router.isReady()

  const wrapper = mount(App, {
    global: {
      plugins: [router]
    }
  })
  expect(wrapper.html()).toContain('Welcome to the blogging app')

  await wrapper.find('a').trigger('click')
  expect(wrapper.html()).toContain('Testing Vue Router')
})
```

--------------------------------

### Configure global application settings

Source: https://test-utils.vuejs.org/api

Defines the signature for partial application configuration.

```ts
config?: Partial<Omit<AppConfig, 'isNativeTag'>>
```

--------------------------------

### Forcing `VueWrapper` return type with `findComponent`

Source: https://test-utils.vuejs.org/guide/advanced/component-instance.html

Demonstrates how to explicitly get a `VueWrapper` when using `findComponent` with a CSS selector by providing the component type. This is necessary for functional components to avoid receiving a `WrapperLike` type.

```typescript
wrapper.findComponent('.foo') // returns WrapperLike
wrapper.findComponent<typeof FooComponent>('.foo') // returns VueWrapper
wrapper.findComponent<DefineComponent>('.foo') // returns VueWrapper
```

--------------------------------

### Basic App Structure with Vue Router Components

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Defines the main App component with a router-link and router-view, and a Posts component to display a list of posts.

```javascript
const App = {
  template: `
    <router-link to="/posts">Go to posts</router-link>
    <router-view />
  `
}

const Posts = {
  template: `
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.name }}
      </li>
    </ul>
  `,
  data() {
    return {
      posts: [{ id: 1, name: 'Testing Vue Router' }]
    }
  }
}
```

--------------------------------

### Advanced slot content rendering with various types

Source: https://test-utils.vuejs.org/guide/advanced/slots.html

Demonstrates passing different types of content to slots, including imported SFCs, render functions, objects with templates, and simple strings.

```javascript
import { h } from 'vue'
import Header from './Header.vue'

test('layout full page layout', () => {
  const wrapper = mount(Layout, {
    slots: {
      header: Header,
      main: h('div', 'Main Content'),
      sidebar: { template: '<div>Sidebar</div>' },
      footer: '<div>Footer</div>'
    }
  })

  expect(wrapper.html()).toContain('<div>Header</div>')
  expect(wrapper.html()).toContain('<div>Main Content</div>')
  expect(wrapper.html()).toContain('<div>Footer</div>')
})
```

--------------------------------

### Define Components for Shallow Mount with Exception

Source: https://test-utils.vuejs.org/guide/advanced/stubs-shallow-mount

Defines `ComplexA` and `ComplexComponent` to demonstrate stubbing all children except a specific one. `ComplexA` is intended to be rendered, while `ComplexB` and `ComplexC` will be stubbed.

```javascript
const ComplexA = {
  template: '<h2>Hello from real component!</h2>'
}

const ComplexComponent = {
  components: { ComplexA, ComplexB, ComplexC },
  template: '
    <h1>Welcome to Vue.js 3</h1>
    <ComplexA />
    <ComplexB />
    <ComplexC />
  '
}
```

--------------------------------

### Shallow Mount with Exception for Stubbing

Source: https://test-utils.vuejs.org/guide/advanced/stubs-shallow-mount

Tests shallow mounting while opting out of stubbing `ComplexA` by setting `stubs: { ComplexA: false }`. This renders `ComplexA` normally while stubbing other child components.

```javascript
test('shallow allows opt-out of stubbing specific component', () => {
  const wrapper = mount(ComplexComponent, {
    shallow: true,
    global: {
      stubs: { ComplexA: false }
    }
  })

  console.log(wrapper.html())
  /*
    <h1>Welcome to Vue.js 3</h1>
    <h2>Hello from real component!</h2>
    <complex-b-stub></complex-b-stub>
    <complex-c-stub></complex-c-stub>
  */
})
```

--------------------------------

### Component template for props testing

Source: https://test-utils.vuejs.org/api

Vue template demonstrating component usage with props.

```vue
<template>
  <Component truthy :object="{}" string="string" />
</template>

<script>
import Component from '@/Component'

export default {
  components: { Component }
}
</script>
```

--------------------------------

### Mounting App with Real Router

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

Mount your Vue application with a real router instance for testing. Ensure the router is properly configured and passed as a plugin.

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '@/router'

const router = createRouter({
  history: createWebHistory(),
  routes: routes
})

test('routing', async () => {
  router.push('/')
  await router.isReady()

  const wrapper = mount(App, {
    global: {
      plugins: [router]
    }
  })
  expect(wrapper.html()).toContain('Welcome to the blogging app')

  await wrapper.find('a').trigger('click')
  await flushPromises()
  expect(wrapper.html()).toContain('Testing Vue Router')
})
```

--------------------------------

### global.components

Source: https://test-utils.vuejs.org/api

Registers components globally to the mounted component.

```APIDOC
## global.components

### Description
Registers components globally to the mounted component.

### Signature
`components?: Record<string, Component | object>`
```

--------------------------------

### Setting up Teleport Target in DOM

Source: https://test-utils.vuejs.org/guide/advanced/teleport.html

Before mounting components that use Teleport, create the target DOM element (e.g., '#modal') and append it to the document body. Clean up the DOM after each test.

```typescript
import { mount } from '@vue/test-utils'
import Navbar from './Navbar.vue'
import Signup from './Signup.vue'

beforeEach(() => {
  // create teleport target
  const el = document.createElement('div')
  el.id = 'modal'
  document.body.appendChild(el)
})

afterEach(() => {
  // clean up
  document.body.innerHTML = ''
})

test('teleport', async () => {
  const wrapper = mount(Navbar)
})
```

--------------------------------

### Move mocks and stubs to global Mounting Option

Source: https://test-utils.vuejs.org/migration

In v2, `mocks` and `stubs` are now part of the `global` mounting option, affecting all components rather than just the one passed to `mount`.

```javascript
const $route = {
  params: {
    id: '1'
  }
}

const wrapper = mount(App, {
  stubs: {
    Foo: true
  },
  mocks: {
    $route
  }
}
```

```javascript
const $route = {
  params: {
    id: '1'
  }
}

const wrapper = mount(App, {
  global: {
    stubs: {
      Foo: true
    },
    mocks: {
      $route
    }
  }
}
```

--------------------------------

### html(options?)

Source: https://test-utils.vuejs.org/api

Returns the HTML string representation of the wrapper.

```APIDOC
## html(options?)

### Description
Returns the HTML of an element. By default the output is formatted with `js-beautify`. Use `raw: true` option to receive the unformatted html string.

### Signature
`html(): string`
`html(options?: { raw?: boolean }): string`
```
Tokens:
Raw