'How to test Vue 2 css class styles using vitest and vue test utils
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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
