vue.js - 如何使用 vitest 和 vue test utils 测试 Vue 2 css 类样式

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"
/>
`;

类(class).ms-Link可以指定任何规则，并且测试无法真正测试链接是否正确呈现... Fluent UI (React) 使用 CSS-in-JS 并且能够打印由类，请参阅 https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap#L280

有没有办法使用 Vitest 测试 CSS 类样式，@vue/test-utils和Vue2？我已经尝试过使用 getComputedStyle ，像这样:expect(getComputedStyle(component.element).color).toBe('...')但是getComputedStyle永远不会返回应用于元素的样式。

这个问题可能与How to add styles to jest snapshot while testing vue component?有关

Answer 1

getCompulatedStyle() 无法在 vitest 中工作，现在已是 confirmed as a bug和一个fix is currently underway .

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

我不能排除的是，与普通 CSS 相比，SCSS 可能会导致额外的复杂性。