Hi!

You are right - Vue Test Utils stubs out <Transition> and <TransitionGroup> by default, because they have caused problems with the DOM not updating the past. This mostly isn't a problem, but can be for people relying on testing with transition hooks.

This change was made in #1411. You should be able to get them to trigger like this, I think: #1411 (comment)

If you can share your test, I might be able to suggest some strategies to test it, if that doesn't work.

Thanks for the response! I checked, and that solution does appear to fix most issues, but still doesn't fire any hooks. If this is simply isn't possible right now, totally fine. But if it is, I'd love to hear how :)

Here's the test suite:

/* eslint-disable no-unused-expressions, no-shadow, import/extensions */
/* global describe, it, expect */
import { mount } from '@vue/test-utils';
import defaultContext from '../../../../test/unit/util/context';
import LdsToast from '../LdsToast';

const suiteStubs = {
  transition: false,
};

describe('Component : Toast : LdsToast.vue', () => {
  describe('Default state', () => {
    const context = {
      ...defaultContext,
      propsData: {},
      stubs: {
        ...defaultContext.stubs,
        ...suiteStubs,
      }
    };

    const wrapper = mount(LdsToast, context);

    it('component LdsToast has been mounted', () => {
      expect(wrapper).toBeTruthy();
    });

    it('has a root element of kind "undefined", because it has not yet shown', () => {
      expect(wrapper.is('div')).toBe(undefined);
    });

    it('should match the snapshot where it is hidden', () => {
      expect(wrapper.html()).toMatchSnapshot();
    });

    it('should begin not showing, in efforts to trigger the transition', () => {
      expect(wrapper.vm.isShowing).toBe(false);
    });

    it('should show after 1 "window" tick', async () => {
      await wrapper.vm.windowNextTick();
      expect(wrapper.vm.isShowing).toBe(true);
    });

    it('should initialize the auto-dismissal', () => {
      expect(wrapper.vm.autoDismissalTimeout).toBeTruthy();
    });

    it('should match the snapshot where it is shown', () => {
      expect(wrapper.html()).toMatchSnapshot();
    });

    it('should have "offsetTop" as "0px" (no sticky)', () => {
      expect(wrapper.vm.offsetTop).toBe('0px');
    });

    it('should have "top" style set with proper offset', () => {
      expect(wrapper.vm.$el.style.top).toBe(wrapper.vm.offsetTop);
    });

    it('should be initialized with the proper theming classes', () => {
      expect(wrapper.classes('theme-informative')).toBe(true);
      expect(wrapper.classes('position-top')).toBe(true);
      expect(wrapper.classes('align-center')).toBe(true);
      expect(wrapper.classes('inline')).toBe(false);
      expect(wrapper.classes('light')).toBe(false);
    });

    // TODO test these once figured out
    // @see https://github.com/vuejs/vue-test-utils/issues/1603
    it('should have emitted transition event "show", to signal initializing show transition', () => {
      expect(wrapper.emitted('dismissed')).toBeTruthy()
    })
  });

  describe('Test auto-hide timeout', () => {
    const context = {
      ...defaultContext,
      propsData: {},
      stubs: {
        ...defaultContext.stubs,
        ...suiteStubs,
      }
    };

    const wrapper = mount(LdsToast, context);

    it('should not be hidden before the timeout', async () => {
      await new Promise(resolve => setTimeout(resolve, 4000));
      expect(wrapper.vm.isShowing).toBe(true);
    });

    it('should hide after the timeout', async () => {
      // 1000ms accommodates for previous test (just before timeout, by 1000ms)
      await new Promise(resolve => setTimeout(resolve, 1000));
      expect(wrapper.vm.isShowing).toBe(false);
    });
  });

  describe('Alternate props 1 (position/align/variant/light/inline)', () => {
    const context = {
      ...defaultContext,
      propsData: {
        position: 'bottom',
        align: 'left',
        variant: 'error',
        light: true,
        inline: true,
      },
      stubs: {
        ...defaultContext.stubs,
        ...suiteStubs,
      }
    };

    const wrapper = mount(LdsToast, context);

    it('should show after 1 "window" tick', async () => {
      await wrapper.vm.windowNextTick();
      expect(wrapper.vm.isShowing).toBe(true);
    });

    it('should match the snapshot', () => {
      expect(wrapper.html()).toMatchSnapshot();
    });

    it('should be initialized with the proper theming classes', () => {
      expect(wrapper.classes('theme-error')).toBe(true);
      expect(wrapper.classes('position-bottom')).toBe(true);
      expect(wrapper.classes('align-left')).toBe(true);
      expect(wrapper.classes('inline')).toBe(true);
      expect(wrapper.classes('light')).toBe(true);
    });

    it('should not initialize the auto-dismissal when it is "inline"', () => {
      expect(wrapper.vm.autoDismissalTimeout).toBe(undefined);
    });

    it('should have the icon "warning-filled-circle" for the variant "error', () => {
      expect(wrapper.vm.icon).toBe('warning-filled-circle');
    });
  });
});

'../../../../test/unit/util/context';

import { createLocalVue } from '@vue/test-utils';
import VueRouter from 'vue-router';
import LDS from '../../../src';
import { LdsButton, LdsButtonBase, LdsButtonLoading, LdsLink } from '../../../src/components';

const localVue = createLocalVue();
localVue.use(LDS);
localVue.use(VueRouter);

export default {
  localVue,
  stubs:{
    'lds-button': LdsButton,
    'lds-button-base': LdsButtonBase,
    'lds-button-loading': LdsButtonLoading,
    'lds-link': LdsLink,
  }
};

Oh!!! I just realized I was mucking around with that trying to get it to work, and I changed the emitter name.

So, transition: false does appear to work! 🎉

thanks so much :)

well, actually, it appears the @enter and @after-enter fire, but @dismiss and @after-dismiss are not firing.

from above, here's the updated test suite that is failing the dismiss/dismissed triggers:

  describe('Test auto-hide timeout and emitters', () => {
    const context = {
      ...defaultContext,
      propsData: {},
      stubs: {
        ...defaultContext.stubs,
        ...suiteStubs,
      }
    };

    const wrapper = mount(LdsToast, context);

    it('should have emitted transition event "show", to signal initializing show transition', async () => {
      await wrapper.vm.$nextTick();
      expect(wrapper.emitted('show')).toBeTruthy();
    });

    it('should have emitted transition event "shown", to signal it has shown (transition complete)', async () => {
      await new Promise(resolve => setTimeout(resolve, transitionLength)); // transition length
      expect(wrapper.emitted('shown')).toBeTruthy();
    });

    it('should not be hidden before the timeout', async () => {
      await new Promise(resolve => setTimeout(resolve, defaultAutoTimeoutLength - transitionLength - 1000));
      expect(wrapper.vm.isShowing).toBe(true);
    });

    it('should hide after the timeout', async () => {
      // 1000ms accommodates for previous test (just before timeout, by 1000ms)
      await new Promise(resolve => setTimeout(resolve, 1000));
      expect(wrapper.vm.isShowing).toBe(false);
    });

    it('should have emitted transition event "dismiss", to signal initializing dismiss transition', async () => {
      await new Promise(resolve => setTimeout(resolve, 2000));
      console.log(wrapper.emitted())
      expect(wrapper.emitted('dismiss')).toBeTruthy();
    });

    it('should have emitted transition event "dismissed", to signal it has dismissed (transition complete)', async () => {
      await new Promise(resolve => setTimeout(resolve, transitionLength)); // transition length
      expect(wrapper.emitted('dismissed')).toBeTruthy();
    });
  });

And the beginning of the component that fires these transitions:

  <transition
    name="toast"
    @enter="$emit('show')"
    @after-enter="$emit('shown')"
    @leave="$emit('dismiss')"
    @after-leave="$emit('dismissed')"
  >
    <div
      v-if="isShowing"
      class="lds-toast"
      :class="[
        `theme-${variant}`,
        `position-${position}`,
        `align-${align}`,
        { light, inline },
      ]"
      :style="{ top: offsetTop }"
    >
...

I have never tested those transition hooks. I don't see why they wouldn't trigger, though. Maybe you can wrap it in a setTimeout with a done callback for some initial debugging (maybe a race condition, test finishing before transition?)