2

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?

2
  • I'm encountering the exact same problem and would love to know why this is and how to solve it. Commented Mar 28, 2024 at 13:10
  • In the end some components and tests moved around and while I couldn't get it to work on one component (even with the attachTo), it did work on the component we had in the end. We did need to use the attachTo, as mentioned in the docs as a warning, or else we would see this exact same effect again. Commented Mar 28, 2024 at 14:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.