Блог

Главная - Вопросы по программированию - Как протестировать полевой компонент из React Redux с помощью библиотеки тестирования React?

Как протестировать полевой компонент из React Redux с помощью библиотеки тестирования React?

#reactjs #react-redux #field #react-testing-library #react-forms

Вопрос:

Это моя область:

 <Field
 name="postcode"
 label="Postcode"
 nonReduxFormInputProps={{ id: 'postcode' }}
 component={TextInput}
 />

В моем тесте я делал это до сих пор, и это проходит, но я думаю, что это неправильно, потому что для имени «почтовый индекс» в коде начинается со строчной буквы, но в моем тесте он проходит только в том случае, если имя с большой буквы «Р». Я также не знаю, как бы я проверил ярлык, нерЕдуксФормИнпутПропы и компонент.

 describe('postcode field', () => {
  it('should render a Field component with correct props', () => {
    render(<TestForm />);
    expect(screen.getByRole('textbox', { name: 'Postcode' })).toBeInTheDocument();

Ответ №1:

{ name: 'Postcode' } Запрос соответствует атрибуту метки, а не атрибуту имени. Вот что говорит доктор:

Вы можете запросить возвращаемые элементы по их доступному имени. Доступное имя для простых случаев равно, например, метке элемента формы, или текстовому содержимому кнопки, или значению атрибута aria-label.

Вы можете ознакомиться с подробностями здесь: https://testing-library.com/docs/queries/byrole

Комментарии:

1. Ах так, для имени=»почтовый индекс», что бы я тогда использовал?

2. Основная идея библиотеки тестирования заключается в тестировании с «точки зрения пользователя», а это означает, что запрос должен использовать атрибуты «доступные пользователю». label доступен пользователю, но name не доступен. Вот что они говорят ( testing-library.com/docs/queries/about ): «С помощью опции name вы можете фильтровать возвращаемые элементы по их доступному имени. Это должно быть вашим главным предпочтением практически во всем».

3. ах, значит, нет необходимости все проверять в полевых условиях? Я переношу тесты с энзима, и оригинальные тесты включены : ожидайте(postcodeField.prop(«имя»)). Равным(«почтовый индекс»); ожидайте(postcodeField.prop(«метка»)). Тобетрути();

4. Я считаю, что философия тестирования библиотек отличается от ферментативной. «Тестовый интерфейс (то есть пользователь), а не реализация (компонента)»

Метки: