Q:

How do I disable vue.js transitions for tests?

I have a vue.js component that uses the <transition> element to animate hide/show.
To speed up tests I would like to disable the animation. How can I do that?
* { transition: none !important } is suggested here: https://github.com/vuejs/vue/issues/463 but it doesnt's seem to make a difference.
I've created a fiddle here: https://jsfiddle.net/z11fe07p/2268/
Running the "test" the last output is "3. Display should be "none", it is: block". If I increase the timeout to 100, or remove the <transition> element, I get the expected output of "3. Display should be "none", it is: none"
So how can I disable the animation so that I can get rid of the setTimeout calls?
EDIT:
I tried removing all css styling, but still have the same problem. So the problem is triggered by simply just having the <transition> element.
EDIT 2:
Updated the fiddle to have no styling, just the <transition> element. Also included calls to $nextTick() to make sure that wasn't the reason it was behaving weirdly.
Change the call to wait100 to wait10 instead and you'll see the test start failing
https://jsfiddle.net/z11fe07p/2270/
EDIT 3:
Putting the example code here so it's easier for everyone to play around with :)

new Vue({
  el: '#app',
  template: `
    <span>
      <button @click="test()">Run test</button>
      <transition>
        <p v-show="show">Hello, world!</p>
      </transition>
    </span>
  `,
  data() {
    return {
      show: false,
    };
  },
  methods: {
    test() {
      const wait10 = _ => new Promise(resolve => setTimeout(resolve, 10));
      const wait100 = _ => new Promise(resolve => setTimeout(resolve, 100));
      const showParagraph = _ => this.show = true;
      const hideParagraph = _ => this.show = false;
      const p = document.querySelector('p');

      showParagraph();

      this.$nextTick()
        .then(wait10)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'block');
        })
        .then(hideParagraph)
        .then(this.$nextTick)
        .then(wait100)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'none');
        });
    }
  }
});

function assertEqual(a, b) { 
  if (a !== b) {
    console.error('Expected "' + a + '" to equal "' + b + '"');
  }
};
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"></div>

A:

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)
}

A:

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.

