Transitions

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:

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

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

<script>
import { ref } from 'vue'

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

    return {
      show
    }
  }
}
</script>

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

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

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)

  expect(wrapper.find('hello').exists()).toBe(false)

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

  // After clicking the button, the <p> element exists and is visible
  expect(wrapper.get('p').text()).toEqual('hello')
})

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.

TIP

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.