React Testing Library #9 Тестирование Реакт Роутера (React Router Testing)

#YauhenK #webDev #ReactTestingLibrary #testing

Всех приветствую в курсе «React Testing Library».
В данном видеокурсе мы с вами рассмотрим тестирование React-компонентов с помощью библиотеки react-testing-library. Разберём её философию, плюсы и минусы. А так же основные отличия от Enzyme в подходе к тестированию.

✒ Репозиторий курса:

✒ Полный список готовых и планируемых курсов:

✒ Автор курса:

[АлексейКрипаков-хт]

Некоторые компоненты реализованы только в тестах. Можно было их вынести как отдельные компоненты и отобразить их не только в тестах но и в модуле App (для понимания темы)

[alexandrmerser]

it("should navigate to the contact page", () => {
// const history = createMemoryHistory();
// const { container, getByTestId } = render(
// <Router history={history}>
// <RouterComponent />
// </Router>
// );
const { container, getByTestId } = />);

screen.debug();
Doe");
});

этот тест некорректен, либо я что-то туплю.

В случае, если выведем содержимое контейнера console.log(container.innerHTML), то:
<nav data-testid="navbar"><a data-testid="home-link" href="/">Home</a><a data-testid="about-link" href="/about">About</a><a data-testid="contact-link" href="/contact/John Doe">Contact</a></nav><h1>404 Error</h1><div

Попробуйте вывести в screen.debug() разметку и увидите, что рендерится 404-я, не совсем понятно, как работает метод toMatch(), но очень похоже, что он просто ищет совпадение по строке а такое совпадение есть в ссылке навигации. Опять же, может я что-то делаю не так, но я склонировал Ваш репозиторий из ветки урока 9, и вижу, что это так работает. Однако, если рендер компонента выполнять через BrowserRouter, то все окей.

UPD: Я все перепроверил, и там действительно так происходит, поэтому тесты некорректны, как минимум в кейсе перехода на страницу Contact

Появился вопрос, почему не использовали BrowserRouter ? Попробовал с BrowserRouter и все довольно корректно отрабатывает