如何使用vitest和Vue-test-utils测试Vue2css类样式

Question

我正在编写一个使用SCSS模块(<component>.module.scss(进行样式设置的组件库。我想将我的测试设置为同时测试是否正确应用了所有样式。现在我只能测试类是否正确应用，但不能测试这些类的CSS规则是什么。

以这个简单的测试为例：

describe('Link', () => {
it('renders disabled Link correctly', () => {
const component = mount(Link, {
propsData: {
href: '#',
disabled: true,
},
})
expect(component.element).toMatchSnapshot()
})
})

它将创建这个快照：

exports[`Link > renders disabled Link correctly 1`] = `
<a
class="ms-Link ms-Link--disabled"
/>
`;

类.ms-Link可以指定任何规则，如果链接呈现正确，测试就不能真正测试。。。Fluent UI(React(在JS中使用CSS，并能够打印类应用的样式，请参阅https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap#L280

有没有一种方法可以使用Vitest、@vue/test-utils和Vue2测试CSS类样式？我已经尝试过使用getComputedStyle，比如：expect(getComputedStyle(component.element).color).toBe('...')，但getComputedStyle永远不会返回应用于元素的样式。

这个问题可能与测试vue组件时如何向jest快照添加样式有关？

Answer 1

getComputedStyle()在vitest中不工作现已被确认为一个错误，目前正在进行修复。

请注意，您可能还需要将vitest的css选项设置为true，以便处理您的CSS文件。

我不能排除的是，与普通CSS相比，SCSS可能会导致额外的并发症。