Как тестировать изменения маршрута с помощью NextJS, Vitest и React Testing Library

Question

Как лучше всего протестировать маршрутизацию в приложении NextJS? Я использую его как генератор статических сайтов и на самом деле не использую возможности рендеринга на стороне сервера. Как протестировать маршрутизацию для всего приложения? Например, допустим, мой сайт начинается на маршруте /first-routeи я запускаю событие, которое меняет маршрут на /second-route. Как мне это проверить? Я пытаюсь использовать библиотеку тестирования Vitest и React. Я был бы очень признателен за любое руководство!

Answer 1

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

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

Но если вы просто хотите проверить, что что- то происходит при изменении пути, у меня были хорошие результаты с next-router-mock . В их документах доступно множество вариантов, но простой пример может выглядеть так:

      import mockRouter from "next-router-mock";
describe('tests', () => {
  it('changes the url', () => {
    mockRouter.setCurrentUrl("/pizza");
  })
})