How do I disable vue.js transitions for tests?

I essentially change all my transition and transition-groups into a div with render functions when env is testing.

if (process.env.NODE_ENV === 'testing') {  const div = {    functional: true,    render: (h, { data, children }) => h('div', data, children),  }  Vue.component('transition', div)  Vue.component('transition-group', div)}

I ran into this problem with <transition-group>. My solution was to replace it during tests using the following code.

Vue.component('transition-group', {    props: ['tag'],    render(createElement) {        return createElement(this.tag || this.$vnode.data.tag || 'span', this.$slots.default);    },});

This is the bare minimum for turning <transition-group> into a mirror of <slot> with an optional dynamically defined tag.

I'll probably need to do the same thing with <transition>. If so, it may be even simpler, since <transition> has no tag prop.

You can set a variable on Vue to indicate testing, and set transition hooks to abort if you are testing.

For my example, you can control the value of the testing variable with a checkbox. The first test result indicates the state before anything happens, so it will just be the same as the third test result of the previous run. Other than that, you can flip the testing switch and get expected results every time.

I've revised my code to isolate the fadeTransition as a separate component with a slot, but I have not found a way to eliminate the added markup in the template for it.

new Vue({  el: '#app',  template: `    <span>      <input type="checkbox" v-model="Vue.testing"> Testing<br>      <button @click="test()">Run test</button>      <fade-transition>        <p id="transition" v-show="show">Hello, world!</p>      </fade-transition>    </span>  `,  components: {    fadeTransition: {      template: `      <transition name="fade"        @enter="killTransition"        @leave="killTransition"      ><slot></slot>      </transition>      `,      methods: {        killTransition(el, done) {          if (Vue.testing) done();        }      }    }  },  data() {    return {      show: false,      testing: true    };  },  methods: {    test() {      const p = document.querySelector('#transition');      let display = getComputedStyle(p).display;      console.log('1. Display should be "none", it is:', display);      this.show = true;      this.$nextTick(() => {        display = getComputedStyle(p).display;        console.log('2. Display should be "block", it is:', display);        this.show = false;        this.$nextTick(() => {          display = getComputedStyle(p).display;          console.log('3. Display should be "none", it is:', display);        });      });    }  }});

.fade-enter-active,.fade-leave-active {  transition: opacity .5s;}.fade-enter,.fade-leave-to {  opacity: 0}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script><div id="app"></div>