在 react-testing-library 中渲染应该只被调用一次吗？

Question

我正在学习使用 react-testing-library，我有 2 个调用 render 的测试，但问题是第二个测试失败了，无论我的测试顺序如何。

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

主题提供者来自 'styled-components'。如果我将渲染行移动到描述块中，以便只调用一次而不是在每个测试块中调用，则两个测试都通过。

这是 RTL 设计使用的方式吗？只渲染一次？或者这是由主题提供者引起的？我需要主题提供者或测试错误，因为组件无法访问它们。

如果调用 render 两次我得到的错误是

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`)).

Answer 1

如果你在v9.0之前使用@testing-library/react，解决方法是添加

afterEach(cleanup)

在 describe 块中。从 v9 开始，每次测试后都会自动进行清理。清理是清除渲染之间的虚拟 DOM。如果您在 v9 或更高版本中发现该问题，那么这不是您要找的答案。

有关详细信息，请参阅 releases。

编辑：已更新以反映 John 在评论中的更正。

在 react-testing-library 中渲染应该只被调用一次吗？

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

reactjs

jestjs

styled-components

react-testing-library