时间戳

首页 > 解决方案 > 在 react-testing-library 中，渲染应该只被调用一次吗？

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

问题描述

我正在学习使用 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 设计的使用方式吗？只渲染一次？或者这是由主题提供者引起的？我需要主题提供程序或测试错误，因为组件无法访问它们。

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

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

标签： reactjsjestjsstyled-componentsreact-testing-library

解决方案

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

afterEach(cleanup)

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

有关更多信息，请参阅版本。

编辑：更新以反映约翰在评论中的更正。

推荐阅读