Skip to content


In general, you may want to test the resulting DOM after a transition, and this is why Vue Test Utils mocks <transition> and <transition-group> by default.

Following is a simple component that toggles a content wrapped in a fading transition:

  <button @click="show = !show">Toggle</button>

  <transition name="fade">
    <p v-if="show">hello</p>

import { ref } from 'vue'

export default {
  setup() {
    const show = ref(false)

    return {

<style lang="css">
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;

.fade-enter-from, .fade-leave-to {
  opacity: 0;

Since Vue Test Utils stubs built-in transitions, you can test the component above as you'd test any other component:

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

test('works with transitions', async () => {
  const wrapper = mount(Component)


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

  // After clicking the button, the <p> element exists and is visible

Partial support

The Vue Test Utils built-in transition stub is simple and doesn't cover all of of Vue's Transition features. For instance javascript hooks are not supported. This limitation could potentially lead to Vue warnings.


Potential solutions:

  • You can turn off the auto stubbing by setting global stubs transition to false
  • You can create your own transition stub that can handle these hooks if necessary.
  • You can spy the warning in the test to silence it.

Released under the MIT License.