Как протестировать стили и медиазапросы, отображаемые компонентом React с помощью Jest и / или Enzyme

Question

Я использую styled-components для разработки инфраструктуры, которая будет использоваться моей компанией для внутренних целей.Нам нужно создать новые адаптивные компоненты, и когда я тестирую это в браузере, я вижу, как визуализируемый компонент меняет свой цвет фона при изменении размера окна.Я пытаюсь достичь того же самого программно и проверить функциональность с помощью Jest и / или Enzyme, но пока не добился успеха.Кто-нибудь знает?

Это код для компонента:

const Component = styled.div`
    height: 200px;
    width: 200px;

    background-color: purple;

    @media (max-width: ${DESKTOP}px) {
        background-color: purple;
    }

    @media (max-width: ${TABLET}px) {
        background-color: yellow;
    }

    @media (max-width: ${MOBILE}px) {
        background-color: red;
    }
`

Я написал следующие тесты, используя toHaveStyleRule из пакета jest-styled-components.Тесты проходят, потому что они эффективно проверяют, что «background-color» является «красным» для медиа-запроса MOBILE и так далее.

expect(<Component />).toHaveStyleRule(
    { 'background-color': 'red' },
    { media: `(max-width: ${MOBILE}px)` }
)

expect(<Component />).toHaveStyleRule(
    { 'background-color': 'yellow' },
    { media: `(max-width: ${TABLET}px)` }
)

expect(<Component />).toHaveStyleRule(
    { 'background-color': 'blue' },
    { media: `(max-width: ${DESKTOP}px)` }
)

Однако тесты не пройдут, если я изменю размер окна, выполнив window.resizeTo(250, 250), потому что я ожидаю, что компонент будет выглядеть красным, а вместо этого 'background-color' всегда будет выглядеть 'фиолетовым'

Для изменения размера окна я использую и пробовал этот фрагмент с JSDOM: https://gist.github.com/javierarques/d95948ac7e9ddc8097612866ecc63a4b

Есть какие-нибудь подсказки?Заранее спасибо!

Answer 1

Я смог воссоздать это локально, но я понял, что прошли первые 2 expect с, а последний - нет.Это произошло потому, что в блоке медиазапроса DESKTOP для background-color установлено значение "фиолетовый", а для expect - "синий".

    background-color: purple;

    @media (max-width: ${DESKTOP}px) {
        background-color: purple;
    }

expect(<Component />).toHaveStyleRule(
    { 'background-color': 'blue' },
    { media: `(max-width: ${DESKTOP}px)` }
)

Дайте мне знать, если этоне проблема, которую вы на самом деле видите.