如何使用 Jest 和/或 Enzyme 測試由 React 組件呈現的樣式和媒體查詢

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;
    }
`

我使用jest-styled-components包中的toHaveStyleRule編寫了以下測試。 測試正在通過，因為它們有效地驗證了 MOBILE 媒體查詢的 'background-color' 為 'red'，等等。

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)調整窗口大小，則測試會失敗，因為我希望組件看起來是紅色的，而“背景色”似乎總是“紫色”

對於調整窗口大小，我使用並且我一直在用 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)` }
)

如果這不是您實際看到的問題，請告訴我。