使用Vue+testing-library时，如何确认元素被v-show隐藏？

当使用v-show时，元素仍存在于DOM中仅通过display: none隐藏，直接检查style.display确实不够健壮——毕竟影响元素可见性的因素不止这一个（比如父元素隐藏、visibility: hidden、opacity: 0等）。

更可靠的方式是使用Testing Library配套的jest-dom匹配器中的toBeVisible()，它会从用户视角出发，综合判断元素是否真正可见：

const element = screen.queryByTestId("my-element");
expect(element).not.toBeVisible();

为什么这更优？ #

• 它覆盖了所有影响可见性的场景，不仅仅是display属性，比如父元素被隐藏时，子元素即使display: block也会被判定为不可见，完全贴合用户实际的视觉体验。
• 符合Testing Library的核心原则：测试用户能感知到的行为，而非底层DOM实现细节。

注意：需要确保你的测试环境已经安装并引入了@testing-library/jest-dom（大多数Vue测试模板默认会配置）。

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