Testing visuals with React Testing Library

[pcattori]

I'm sold on using RTL for testing functional parts of my React app (e.g. if I click this button, make sure my list of books is updated to include another book).

How would you suggest to test the visuals? E.g. is the button visible?

Complexity that I see:

• display: none
• visibility: hidden
• 0 area (width: 0 and height: 0)
• overflow: hidden and this is positioned absolutely outside of the parent
• another component is covering/overlapping it
• text on the button is now the same color as the background, making it less usable to the user
• ...

I could use expect(...).toHaveStyle(...) from RTL.

I'm not convinced that such writing such visual tests is worth it or that I would know what specific styles to test for.

Curious if you have advice on how to test or if its not worth testing such things.

[pcattori]

From your livestream about Epic React: sounds like you are a proponent of visual regression testing for this sort of thing. I believe you mentioned Applitools specifically

[kentcdodds]

Yup! That's right :)