Let a (mocked) transition finish asap inside v-menu in a vuetify unit test

Question

v-menu uses a transition internally to show the given Element when the activator is triggered. We simply want to test if the menu element is shown after the activator hit it.

In our setup we have a component test using Vue Test Utils and do:

const wrapper = createWrapper(...)
expect(wrapper.contains('.my-class')).toBe(false) // the Element is not there in the beginning

clickTheTriggerElement(wrapper) // trigger v-menu to show
await wrapper.vm.$nextTick()

expect(wrapper.find('.my-class').isVisible()).toBe(true) // fails

This fails because the transition used by v-menu is not finished yet. (It would after a setTimeout(...), thou but this is less acceptable).

Vue Test Utils describes this as a common issue and provides a solution that seems to work for plain vue.js Transitions. (They use a mock for Transition to render immediately.) Unfortunately this doesn't seem to work with internal transitions of vuetify.

How would you handle that?

Answer 1

I wrote unit-test for v-list inside v-menu and I didn't mock transitions. This is my code:

     //ACTION
        const button = wrapper.find('.theme-picker');
    
        await button.trigger('click');
    
        const topic = wrapper.find('.v-list-item');
    
        await topic.trigger('click');
    
        const result = wrapper.vm.$router;
    
        //ASSERT
        expect(result).toContainEqual(expected);

If you have some async behaviour which you can't 'reach' you can use:

    test('description', (done) => {
        wrapper.vm.$nextTick(() => {
          expect(result).toBe(expected);
          done();
        });
    });

It work for Jest and Mocha. Test will wait until async code finish. May be it will help someone.

Answer 2

I don't think it's the transitions that are causing the problem here. You should be able to disable transitions completely with the following code:

import { config } from '@vue/test-utils';
config.stubs.transition = false;

I tried this, and it did not help my situation. What I ended up doing was stub out VMenu entirely. I created a component stub somewhere only accessible to tests, e.g. tests/unit/__stubs__/VMenuStub.vue

<template>
  <div class="v-menu-stub">
    <slot
      name="activator"
      :on="{
        click: toggleValue,
      }"
    ></slot>
    <slot v-if="value"></slot>
  </div>
</template>

<script lang="ts">
/**
 * VMenuStub - used to stub out v-menu
 *  as a workaround for issues dealing with v-menu directly in a unit test
 *  example usage: use the "stubs" option for mount
 *  componentWrapper = mount(component, {
 *    ... other options, like localVue, vuetify ...
 *    stubs: {
 *      'v-menu': VMenuStub,
 *    },
 *  };
 */
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  props: {
    value: {
      type: Boolean,
      required: true,
    },
  },
  setup(props, context) {
    function toggleValue() {
      context.emit('input', !props.value);
    }
    return {
      toggleValue,
    };
  },
});
</script>

I can use this stub like so:

import VMenuStub from '../../__stubs__/VMenuStub';

it('test', () => {
  componentWrapper = mount(component, {
    ... other options, like localVue, vuetify ...
    stubs: {
      'v-menu': VMenuStub,
    },
  };
});

once the stub is added, whichever button I have set up to trigger menu open/close will work as expected.

given my component to test has a menu with activator slot:

  <v-menu
   v-model="menu"
  >
    <template #activator="{ on, attrs }">
      <v-btn v-bind="attrs" v-on="on">
        ClickMe
      </v-btn>
    </template>

I can open the menu by triggering click via trigger('click') or vm.$emit('click')

it('test', () => {
  componentWrapper = mount(component, {
    ... other options, like localVue, vuetify ...
    stubs: {
      'v-menu': VMenuStub,
    },
  };
  const menuButton = componentWrapper.findAll('.v-btn').filter(i => i.text().includes('ClickMe')).at(0);
  // either of these will work
  await menuButton.trigger('click');
  // OR
  await menuButton.vm.$emit('click');
  // and I can verify
  expect(componentWrapper.vm.menu).toEqual(true);
});