Как протестировать стили классов Vue 2 css с помощью утилит vitest и vue test

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) использует CSS-in-JS и может печатать стили, применяемые классами, см. https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Link/__snapshots__/Link.test.tsx.snap#L280

Есть ли способ проверить стили классов CSS с помощью Vitest, @vue/test-utilsа Вью2? Я уже пытался использовать , например: expect(getComputedStyle(component.element).color).toBe('...')но getComputedStyleникогда не вернет стили, примененные к элементу.

Этот вопрос может быть связан с тем, как добавить стили в снимок шутки при тестировании компонента vue?

Answer 1

getComputedStyle()не работает в vitest теперь подтверждено как ошибка, и в настоящее время идет исправление .

Обратите внимание, что вам может дополнительно потребоваться установить cssзначение true, чтобы файлы CSS обрабатывались.

Чего я не могу исключить, так это того, что SCSS может вызвать дополнительные сложности по сравнению с простым CSS.