javascript - Jest + Styled Components - 嵌套组件上的 .toHaveStyleRule

Question

我有一个看起来像这样的组件：

import React, { ReactElement, useState } from 'react'
import styled from 'styled-components'

export const ExpandedView = styled.div`
  @media (max-width: 768px) {
    display: ${({ isExpanded }) => (isExpanded ? 'block' : 'none')};
  }
`

const Card () => {
  const [isExpanded, setExpanded] = useState(false)
  return (
    <div>
      <button onClick={() => setExpanded(!isExpanded)} data-test="card-button">Open</button>
      <ExpandedView isExpanded={isExpanded} data-test="expanded-view">
        Expanded view content
      </ExpandedView>
    </div>
  )
}

我想在 上测试该display属性ExpandedView，但是如果我尝试进行如下测试：

describe('Card', () => {
  it('changes display', async () => {
    const wrapper = mount(<Card />)
    expect(wrapper.find('[data-test="expanded-view]')).toHaveStyleRule(
      'display',
      'none',
      {
        media: '(max-width: 768px)'
      }
    )
    wrapper
      .find('[data-test="card-button"]')
      .first()
      .childAt(0)
      .simulate('click')
    expect(wrapper.find('[data-test="expanded-view]')).toHaveStyleRule(
        'display',
        'block',
        {
          media: '(max-width: 768px)'
        }
      )
  })
})

我收到一个错误No style rules found on passed Component，经过研究，我找不到使用.toHaveStyleRule. 如果我取出expanded-view并制作 parent <ExpandedView>，这很好用。但是，我必须运行一个案例来测试点击状态，然后<ExpandedView>在更改isExpanded道具时测试样式是否正确。我宁愿在用户单击样式更改时进行测试 - 而不是进行多次测试。任何想法如何做到这一点？

标签： javascriptreactjsjestjsstyled-components