Make a reusable test with React Testing Library

Photo by Sigmund on Unsplash

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')  })

Thank you for reading! Let's connect on Twitter or Mastodon!