vue.js - SFC 样式未应用于测试库

Question

我正在向我们的 vue 代码库添加单元测试，发现很难测试元素的可见性。

我照常渲染组件，并按照测试库文档示例中的建议进行渲染，但样式未应用于 DOM 调试(使用 screen.debug)。有什么线索吗？

例子:

组件内部

<template>
  <span class="error-message>content here</span>
</template>
<style lang="scss" scoped>
.error-message {
  display: none
}

在(失败的)测试文件中:

render(Component);
expect(screen.getByText(/content here/i)).not.toBeVisible();
screen.debug();

测试失败，因为元素是可见的。调试按预期打印 DOM，但我们通常在浏览器检查中看到的 data-v-* 类除外。

Answer 1

我最终改变了断言的方式。据我所知，通过 error-message 类应用的样式不会被 jest-dom 看到，因为它不会注入(inject)测试环境中的 DOM header 。所以我所做的就是断言元素中的类名。