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

Posted 2023-02-22

【中文标题】在 react-testing-library 中，渲染应该只调用一次吗？

【英文标题】：In react-testing-library is render supossed to be called only once?

【发布时间】：2020-05-20 05:23:16

【问题描述】：

我正在学习使用 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)
  )
)

主题提供程序来自“样式组件”。如果我将渲染线移动到描述块中，以便它只被调用一次，而不是在每个测试块中，两个测试都会通过。

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

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

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

【参考方案1】：

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

afterEach(cleanup)

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

请参阅releases 了解更多信息。

编辑：更新以反映 John 在 cmets 中的更正。

【讨论】：

此更改已发生在 v9.0