Блог

Главная - Вопросы по программированию - Как дождаться изменения отключенного состояния кнопки в библиотеке тестирования?

Как дождаться изменения отключенного состояния кнопки в библиотеке тестирования?

#reactjs #testing #react-testing-library

#reactjs #тестирование #react-testing-library

Вопрос:

У меня есть компонент React с полем ввода и кнопкой, отключенной в самом начале. Состояние этой кнопки (отключено) изменяется, если ввод, предоставляемый пользователем в поле ввода, проверяется API, который вызывается после ввода чего-либо в поле ввода.

Я тестирую, предоставляя допустимый ввод, но для этого нужно дождаться завершения вызова API, поэтому в основном я хочу проверить, включена ли кнопка при предоставлении допустимого ввода или нет в моем тесте.

Я делаю это следующим кодом:

 userEvent.type(getByRole("textbox"), "HELLO");
await waitFor(() => expect(getByTestId("my-btn")).not.toBeDisabled());

Но он не работает даже с допустимым вводом

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

1. Как вы предоставляете допустимый ввод? Не могли бы вы добавить полный код вашего теста?

2. Как вы разрешаете HTTP-запрос?

Ответ №1:

Вы можете увеличить время waitFor ожидания, как описано в документе:

 await waitFor(() => expect(getByTestId("my-btn")).not.toBeDisabled(), {
  timeout: 5000,
});

После 5000 вам, вероятно, потребуется также увеличить время ожидания шутки.

Ответ №2:

Для меня ожидание исчезновения отключенного состояния не работает. Обычно я жду, пока в DOM произойдет что-то еще.

Возможно, используя ввод, который вы ввели…

 userEvent.type(getByRole("textbox"), "HELLO");

expect(await expect(screen.getByDisplayValue('HELLO')).toBeInTheDocument()); 

expect(getByTestId("my-btn")).not.toBeDisabled()

Кроме того, поскольку вы ожидаете ответа API, вы можете захотеть имитировать ответ этого вызова на что-то, что удалит ваше отключенное состояние.