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