В реагирующей-тестирующей библиотеке рендер должен вызываться только один раз? - PullRequest
2 голосов
/ 04 февраля 2020

Я учусь использовать реагирующую библиотеку, и у меня есть 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`)).

1 Ответ

3 голосов
/ 26 марта 2020

Если вы используете @ testing-library / реагировать до v9.0, решение состоит в том, чтобы добавить

afterEach(cleanup)

в блок describe. Начиная с версии 9, очистка происходит автоматически после каждого теста. Очистка - это то, что очищает виртуальный DOM между рендерами. Если вы видите эту проблему с версией 9 или выше, то это не тот ответ, который вы ищете.

См. релизы для получения дополнительной информации.

РЕДАКТИРОВАТЬ : Обновлено, чтобы отразить исправление Джона в комментариях.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...