SFC 样式未与测试库一起应用答案

【问题标题】：SFC styles not being applied with testing-librarySFC 样式未与测试库一起应用
【发布时间】：2021-06-06 16:33:27
【问题描述】：

我正在向我们的 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-* 类。

【问题讨论】：

它在wrapper.vm.$nextTick(() => { /* check here */ }) 中工作吗？必须等待包装器更新更改的数据/道具是很常见的。
它没有。问题是 jest-dom 不会仅根据类名正确地进行断言，因为样式没有被注入到测试环境中。我改变了方法并测试了类名。
至少在理论上，这是正确的方法。当您测试特定类是否将特定样式属性应用于元素时，您测试的是 DOM 库本身，而不是您的项目。但从你所说的来看，听起来你的测试环境没有解析（或没有得到所有）样式。

【解决方案1】：

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

【讨论】：