MenuButton behavior in component testing using vitest

[smarlhens]

Hi there 👋🏻 ,

First of all, I'm not sure this is the right place to post this kind of subject, please come back to me if I need to open an issue somewhere else.

I'm currently working on a Vue 3 + Vite + vitest + @vue/test-utils project.
I'm currently trying to open my menu in my component test using the MenuButton and expecting that menu item text appear on the DOM.

Menu.vue

<template>
  <div class="w-56 text-right fixed top-16">
    <Menu as="div" class="relative inline-block text-left">
      <div>
        <MenuButton
          data-testid="menu-button"
          class="
            inline-flex
            justify-center
            w-full
            px-4
            py-2
            text-sm
            font-medium
            text-white
            bg-black
            rounded-md
            bg-opacity-20
            hover:bg-opacity-30
            focus:outline-none
            focus-visible:ring-2
            focus-visible:ring-white
            focus-visible:ring-opacity-75
          "
        >
          Options
          <ChevronDownIcon
            class="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
            aria-hidden="true"
          />
        </MenuButton>
      </div>

      <transition
        enter-active-class="transition duration-100 ease-out"
        enter-from-class="transform scale-95 opacity-0"
        enter-to-class="transform scale-100 opacity-100"
        leave-active-class="transition duration-75 ease-in"
        leave-from-class="transform scale-100 opacity-100"
        leave-to-class="transform scale-95 opacity-0"
      >
        <MenuItems
          class="
            absolute
            right-0
            w-56
            mt-2
            origin-top-right
            bg-white
            divide-y divide-gray-100
            rounded-md
            shadow-lg
            ring-1 ring-black ring-opacity-5
            focus:outline-none
          "
        >
          <div class="px-1 py-1">
            <MenuItem
              v-for="(item, index) in navigationItems"
              :key="index"
              v-slot="{ active }"
            >
              <button
                :class="[
                  active ? 'bg-violet-500 text-white' : 'text-gray-900',
                  'group flex rounded-md items-center w-full px-2 py-2 text-sm',
                ]"
                :data-testid="'menu-item-' + index"
                @click="() => item.onClick()"
              >
                <Component
                  :is="item.icon"
                  :active="active"
                  class="w-5 h-5 mr-2 text-violet-400"
                  aria-hidden="true"
                />
                {{ item.label }}
              </button>
            </MenuItem>
          </div>
        </MenuItems>
      </transition>
    </Menu>
  </div>
</template>

<script setup lang="ts">
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
import { ChevronDownIcon } from '@heroicons/vue/solid';
type NavigationItem = {
  label: string;
  onClick: () => void;
  icon: unknown;
};
type MenuProps = {
  navigationItems: NavigationItem[];
};
defineProps<MenuProps>();
</script>

menu.test.ts

import { PencilIcon } from '@heroicons/vue/solid';
import { mount } from '@vue/test-utils';
import { vi, test } from 'vitest';
import Menu from '../src/components/Menu.vue';

test('mount component', async () => {
  expect(Menu).toBeTruthy();

  const navigationItems = [
    {
      label: 'Edit',
      icon: PencilIcon,
      onClick: () => vi.fn(),
    },
  ];

  const options = {
    props: {
      navigationItems,
    },
  };

  const wrapper = mount(Menu, options);
  const button = '[data-testid="menu-button"]';
  const menuItem = '[data-testid="menu-item-0"]';
  const spy = vi.spyOn(wrapper.vm.navigationItems[0], 'onClick');

  expect(wrapper.text()).toContain('Options');

  // should open menu
  await wrapper.get(button).trigger('click');

  // opened menu should contain menu item
  expect(wrapper.text()).toContain('Edit');

  await wrapper.get(menuItem).trigger('click');

  // should have been called on click
  expect(spy).toHaveBeenCalledTimes(1);

  vi.restoreAllMocks();
  wrapper.unmount();
});

I have created a stackblitz for issue reproduction.

PS: component testing using Popover & PopoverButton seem to work fine.

any help on this subject would be great 👍🏻

wish you all a great day 🌞

[smarlhens]

This discussion can be closed ✅

As a workaround I've used @testing-library/vue and which I do not get any error.

I guess the error is related to my test implementation, sorry for that 😞 .