How to test Vue 2 css class styles using vitest and vue test utils

Question

I'm writing a component library that uses SCSS modules (<component>.module.scss) for styling. I want to set up my tests to also test if all the styles are applied correctly. Right now I'm only able to test if classes are applied correctly, but not what the CSS rules of those classes are.

Take this simple test for example:

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

It will create this snapshot:

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

The class .ms-Link could specify any rules, and the test can't really test if the link is rendered correctly... Fluent UI (React) uses CSS-in-JS and is able to print the styles applied by the classes, see https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap#L280

Is there a way to test for CSS class styles using Vitest, @vue/test-utils and Vue2? I already tried using getComputedStyle, like so: expect(getComputedStyle(component.element).color).toBe('...') but getComputedStyle would never return the styles applied to the element.

This question may be related How to add styles to jest snapshot while testing vue component?

Answer 1

getComputedStyle() not working in vitest has now been confirmed as a bug and a fix is currently underway.

Please note that you might additionally need to set vitest's css option to true in order for your CSS files to be processed.

What I cannot rule out is that SCSS might cause additional complications compared to plain CSS.