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?