Search code examples
reactjsjestjsstyled-componentsreact-testing-library

In react-testing-library is render supossed to be called only once?


I'm learning to use react-testing-library and I have 2 tests that call render but the problem is is that the second test fails, no matter which order I have the tests.

describe('...', () => {
  test('Renders form', () => {
    const { queryByTestId } = render(<ThemeProvider theme={themeRed}>{comp}</ThemeProvider>)
    expect(queryByTestId('address-form')).not.toEqual(null)
  })

  test('GenderSelector exists and works as expected', () => {
    const { queryByTestId } = render(<ThemeProvider theme={themeRed}>{comp}</ThemeProvider>)
    const genderSelector = queryByTestId('address-gender')
    const genderCheckboxes = genderSelector.querySelectorAll('input')
    expect(genderSelector).not.toEqual(null)
    expect(genderCheckboxes).toHaveLength(2)
    expect(genderCheckboxes[0].checked).toEqual(true)
    expect(genderCheckboxes[1].checked).toEqual(false)

    fireEvent.click(genderCheckboxes[1])
    expect(genderCheckboxes[0].checked).toEqual(false)
    expect(genderCheckboxes[1].checked).toEqual(true)
  })
})

Theme provider is from 'styled-components'. If I move the render line into the describe block so that it is called only once instead of in each test block both tests pass.

Is this the way RTL is designed to be used? Just render once? Or is this caused by the theme provider? I need the theme provider or the tests error as the them can't be accessed by the components.

The error I get if calling render twice is

Found multiple elements by: [data-testid="address-gender"]

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Solution

  • If you're using @testing-library/react before v9.0, the solution is to add

    afterEach(cleanup)
    

    in the describe block. Since v9, cleanup happens automatically after each test. Cleanup is what clears the virtual DOM between renders. If you're seeing that problem with v9 or above, then this isn't the answer you're looking for.

    See releases for more info.

    EDIT: Updated to reflect John's correction in the comments.