Make a reusable test with React Testing Library

#webdev #react #beginners

It can happen to have very similar tests across our suites. In one of my recent examples, I had to test if the UI of the footer of the pages in the application was correctly rendered, depending on a prop change.

The footer consists only of a box with inside an SVG icon and a text. But those are white when we have a dark background, and dark gray when the background is white.

The logic is already in place, and the simple test steps would be:

render the page (component)
get the elements to check
check that the elements have the correct style.

The next -and boring- step would be placing this test inside each page test suite, and check for the color individually.

Instead, we can make a reusable test, like a normal function.
We can put it in some shared.js file so it can be picked up anytime.

import { screen, waitFor } from '@testing-library/react'

const testPageFooterWithColor = (renderPage, expectedColor) => {
  test('it checks that the footer is present and has the correct color', async () => {
    renderPage()

    const footerText = screen.getByText('our footer text')

    await waitFor(() => {
      expect(footerText).toBeInTheDocument()
    })

    expect(footerText).toHaveStyle({ color: expectedColor })
  })
}

export { testPageFooterWithColor }

Then we can import it in our suites:

  const renderCustomPage = () => {
    render(
      <CustomPage />,
      { wrapper: MemoryRouter },
    )
  }

  describe('our test suite', () => {
    ...our tests

    testPageFooterWithColor(renderCustomPage, 'white')
  })