DEV Community

Cover image for Testing the styles of DOM elements with React Testing Library
Alex
Alex

Posted on • Originally published at buaiscia.github.io

Testing the styles of DOM elements with React Testing Library

Photo by Robert Katzki on Unsplash

Sometimes -or often, depending on the case- we need to test some particular style that can change depending on some property.
The way this is implemented depends on the library we use for the styling.

Supposing that we have some text, inside a component, that depending on the prop it's white or black.
In the DOM, it will reflect this way. However, especially as it's not a fixed element, we should test how it behaves on different pages.

The test itself using React Testing Library is very simple because it checks directly the DOM:

  render(<MyComponent>)

  const text = screen.getByText('text in the page')
  expect(text).toBeInTheDocument()
  expect(text).toHaveStyle({ color: '#FFFFF'})
Enter fullscreen mode Exit fullscreen mode

The library converts the colour in hex code against RGB, so if they match, the test will pass; otherwise, it will return the returned RGB colour (i.e. 0,0,0) and the expected one (i.e. 255,255,255). With it, it's very easy to spot the mistake, or why a test is failing.

We can also test directly the prop that we're passing and the consequent change of colour in the component:

  const {rerender} = render(<MyComponent changingProp='white'>)

  expect(screen.getByText('text in the page')).toHaveStyle({ color: '#FFFFF'})

  rerender(<MyComponent changingProp='black'>)

  expect(screen.getByText('text in the page')).toHaveStyle({ color: '#00000'})
Enter fullscreen mode Exit fullscreen mode

You have to notice here that I had to call screen.getByText twice, because that function is returning immediately the DOM element. If I would set it as before in a variable, at the moment of checking 'text' the second time, it would have stored the previous DOM element and not the updated one.

Thank you for reading! Let's connect on Twitter

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more