How to test for elements within a transition

Is there any way to test the rendering of an element that is contained in a transition?

<template>
  <transition name="fade" mode="out-in">
    <h1 v-if="showHeading">Herro<h1>
  </transition>
</template>


<script>
export default {
  data () {
    return {
      showHeading: false
    };
  }
};
</script>


<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
</style>

The following test will fail on the above component unless I remove the transition.

it('renders an h1 when showHeading is true', () => {
  wrapper.setData({ showHeading: true });
  expect(wrapper.find('h1').length).to.equal(1);
});

Thanks a lot for avoriaz, by the way. I’ve been using it for the past couple days, and I love it.

[jackysee]

Got it, have to use Vue.nextTick here.

  it('renders an h1 when show is true', (done) => {
    let wrapper = mount(Transition, { propsData: { show: true } });
    expect(wrapper.find('h1').length).to.equal(1);
    wrapper.setProps({ show: false });
    Vue.nextTick(() => {
      expect(wrapper.find('h1').length).to.equal(0);
      done();
    });
  });

[jackysee]

I’m using karma, but I cannot get the transition to work in unit test. Anything I miss?

vue file:

<template>
  <transition name="fade" mode="out-in">
    <h1 v-if="show">hello</h1>
  </transition>
</template>

<script>
export default {
  props: ['show']
};
</script>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity .5s }
.fade-enter, .fade-leave-to { opacity: 0 }
</style>

Test

  it('renders an h1 when show is true', () => {
    let wrapper = mount(Transition, { propsData: { show: true } });
    expect(wrapper.find('h1').length).to.equal(1);
    wrapper.setProps({ show: false });
    expect(wrapper.find('h1').length).to.equal(0);
  });

Here the 2nd expect would fail.