Как тестировать стили в react?

Question

[eugenedrvnk]

Компонент принимает 2 пропса:
- borderColor, и если он передан - цвет бордера кнопки должен изменяться
- children

const Button = ({borderColor, children}) => {
  return (
    <button style={{borderColor: borderColor ? `border: 1px solid ${borderColor}` : null}}>
      {children}
    </button>
  )
}

C тестированием children в принципе всё понятно. Но как быть с тестами для borderColor? В доке react-testing-library не делается никакого акцента на тестировании стилей, и в других источниках я тоже подобного не встречал.
С моей же точки зрения, все пропсы принимаемые компонентом должны тестироваться т.к. в дальнейшм на них и строится всё взаимодействие. Или же у этого есть какие-то очевидные минусы в случае со стилями?

Answer 1

[standbyoneself]

В jest-dom есть toHaveStyle matcher.

По поводу тестирования всех пропсов: вы выбрали не ту библиотеку. React Testing Library больше про тестирование логики с точки зрения пользователя, то есть опуская детали реализации.

Для модульного тестирования компонентов React больше подходит enzyme.