Vue3 Vitest中isVisible()方法缓存异常问题求助

问题核心是Vue Test Utils的find()方法会缓存首次查找的DOM元素引用，当组件状态更新导致DOM变化后，缓存的元素并没有同步更新，后续调用isVisible()还是基于旧的DOM节点判断，所以出现返回初始值的情况。

解决方法：每次断言前重新查找DOM元素 #

不要复用之前find()的结果，每次需要判断可见性时，都重新调用wrapper.find()获取最新的DOM元素引用。

修改后的测试代码：

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
    window.dispatchEvent(new MouseEvent('mousedown'));
    await wrapper.vm.$nextTick();

    // 第二次重新查找元素并断言
    expect(wrapper.find('[data-test=context-menu]').isVisible()).toBe(false);
});

额外优化点 #

• 移除冗余的await wrapper.trigger('mousedown')，因为已经通过window.dispatchEvent触发了全局mousedown事件，重复触发可能干扰测试逻辑。
• 去掉不必要的setTimeout，$nextTick()已经足够等待DOM更新完成。

为什么getComputedStyle能正常工作？ #

因为document.getComputedStyle()是直接从当前DOM树中获取元素的样式，不会依赖Vue Test Utils的缓存，所以能正确反映元素的最新状态。

内容的提问来源于stack exchange，提问作者SvT