Блог

У меня есть компонент, который выглядит так:

 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>
  )
}
 

Я бы хотел, чтобы мои тесты были настроены ниже, но, по-видимому, вы не можете тестировать вложенные компоненты и использовать только родительский компонент toHaveStyleRule . Поскольку этот стиль доступен ТОЛЬКО на мобильных устройствах, я не могу выполнить некоторые условия в компоненте react. То, что я вынужден делать, — это создавать отдельный компонент исключительно для тестирования. Я надеялся, что есть лучший способ сделать это.

 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)'
        }
      )
  })
})