Блог

Я использую react-testing-library в своем приложении. Обычно, чтобы проверить, находится ли ввод в форме, мы используем getByLabelText . Например:

 getByLabelText(/name/i)
 

Но что, если у моего ввода нет метки? Это связано с дизайном (пользовательским интерфейсом), поэтому у меня не может быть метки для ввода. Как я могу проверить, существует ли этот ввод в форме?

Вы можете использовать следующее для настройки поля ввода текста.

 getByRole('textbox', {name: /name/i})
 

Дополнительная информация https://testing-library.com/docs/queries/about#priority

Вы также можете добавить aria-label к своему вводу:

 <TextField inputProps={{'aria-label': "example" }} />
 

а затем в вашем тесте:

 expect(screen.getByRole("textbox", { name: "example"})).toBeInTheDocument();
 

Вы можете добавить идентификатор теста к вводу, который будет использоваться исключительно для целей тестирования.

 <input data-testid="your-id" />
 

И в вашем тесте вы бы выполнили a query , а не get as get , что приведет к провалу теста, если элемент вообще не существует.

 expect(queryByTestId('your-id')).toBeInTheDocument()
 

Или вы можете выполнить поиск по отображаемому значению, чтобы найти входное значение

 expect(queryByDisplayValue('input-value')).toBeInTheDocument()
 

Если вы не знаете ожидаемый текст в своем вводе, вы можете добавить «data-testid» к своему вводу и найти его таким образом:

 <input data-testid="my-input"/>

const myInput = getByTestId('my-input');