How to test styles in react?

Question

React

The component accepts 2 props:
- borderColor, and if it is passed - the color of the button's border should change
- children

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

With testing children, in principle, everything is clear. But what about tests for borderColor? The react-testing-library doc does not have any emphasis on testing styles, and I have not seen this in other sources either.
From my point of view, all props accepted by the component should be tested. in the future, all interaction is built on them. Or does it have some obvious disadvantages in the case of styles?

Answer 1

jest-dom has a toHaveStyle matcher.
About testing all props: you chose the wrong library. The React Testing Library is more about testing logic from the user's point of view, i.e. omitting implementation details.
For unit testing React components, enzyme is more suitable.