Vue3 Vitest isVisible() seems to be cached/stuck

74 Views Asked by At

I have a vue3 component which embodies a context menu. I have tested the component in the browser and it works fine. Also most situations work fine in vitest but when I use the .isVisible() check multiple times in one test it always returns the initial value.

This is my test:

it.only('becomes hidden when clicked outside', async () => {
    // Mount the component
    const wrapper = mount(ContextMenuSetup, {
        attachToDocument: window.document.body,
        props: {
            items,
        },
    });

    // Trigger right click on subject
    await wrapper.find('[data-test=context-menu-trigger]').trigger('contextmenu');
    expect(wrapper.find('[data-test=context-menu]').isVisible()).toBe(true);

    // Trigger a global click event on the wrapper's document
    window.dispatchEvent(new MouseEvent('mousedown'));
    await new Promise(resolve => setTimeout(resolve, 0)); // Introduce a small delay
    await wrapper.vm.$nextTick();

    await wrapper.trigger('mousedown');
    await wrapper.vm.$nextTick();

    // Assert that the context menu is not visible
    expect(wrapper.find('[data-test=context-menu]').isVisible()).toBe(false);
});

The last assertion fails. When I use document.getComputedStyle() it however is hidden. Also in the browser the code works and when the first assertion is removed the last assertion succeeds.

Is there a way to reset the .isVisible() check so the value will be refreshed?

0

There are 0 best solutions below