There are times where an animation can only be achieved by a component always being rendered. This could drive important business logic, however there may not be an easy way to test this when paired with a CSS-in-JS library like Emotion. We'll use jest-emotion to add in new matchers to Jest and combined with react-testing-library we'll be able to test our components are rendering the correct styling.
In this lesson we'll explore how to get Emotion setup with create-react-app. Then dive into using
@emotion/styled to create styled React components. Finally we'll show how to structure styled components to allow you to use
transition to create animated hover effects.