How to test styles files in react-testing library?

Tanvesh 0
Viewed 15

I just wanted to know how to test this file using react-testing-library. I am using React Testing Library for first time and it seems very confusing.

import styled from 'styled-components';

export const Salutation = styled.div`
  background: #f0f0f0;
  font-size: 14px;
  padding: 16px;
  color: black;

  a {
    color: blue;
    text-decoration: underline;
  }
`;

export const Container = styled.div`
  padding: 16px;
  text-align: center;
`;

export const Header = styled.h3`
  font-size: 1.15vw;
  font-weight: bold;
  padding-bottom: 16px;
`;

export const Label = styled.div`
  text-align: left;
  font-size: 0.9375vw;
`;
react-testing-library reactjs
1 Answers

Before you ask the question "how", we need to understand "what" would you want to test in your React component with regard to styling?

One of the goals for writing tests would be to ensure that the UI doesn't change unexpectedly in the future. In that context, you can consider writing Snapshot Tests which involve taking a reference screenshot of the UI and at later points of time, comparing new versions of screenshots to the reference. This also ensures that any changes to the styling haven't been done inadvertently as the test would break.

Priyankar Kumar0
Related