Библиотека тестирования Jest и React не загружает окончательный DOM при загрузке страницы

#javascript #reactjs #unit-testing #jestjs #react-testing-library

#javascript #reactjs #модульное тестирование #jestjs шутки #реагировать-тестирование-библиотека #jestjs #react-testing-library

Вопрос:

Я пытаюсь протестировать свое приложение react, используя библиотеку тестирования Jest и React. В этом я хочу увидеть сообщение при полной загрузке страницы входа. При начальной загрузке на моей странице входа отображается сообщение «загрузка ..». После этого поля ввода загружаются медленно.

Я пытался найти текстовый элемент, когда DOM полностью загрузился. Используя это

 screen.findAllByText("Basic login page") ;
  

Но screen.debug загружает его только до «загрузки ..» только фаза.

 test("User should see login page", async () => {
        render(<></>, {route: "/login"});
        await screen.findAllByText("Basic login page") ;
        screen.debug();
    });
  

Есть ли выход для решения этой проблемы?

Спасибо.

Ответ №1:

Библиотека тестирования React предназначена для модульных тестов, поэтому вам необходимо настроить историю браузера в памяти и настроить ваш маршрутизатор.

Проверьте документы здесь:https://testing-library.com/docs/example-react-router

Вы бы хотели, чтобы ваш тест был чем-то вроде этого:

 import { createMemoryHistory } from 'history'

...

test('User should see login page', () => {
  const history = createMemoryHistory()
  history.push('/login')
  const { findByText } = render(
    <Router history={history}>
      <App />
    </Router>
  );
  expect(findByText('Basic login page')).toBeTruthy();
})