Cypress visit does not work on Next js when change the page

Question

I have in my next application 2 pages: Login, Cars and Car that is returned by ID. Beeing on the Cars page i want to visit a specific car. The url looks like this: /cars for the car and /cars/car-id for the page that contains the car. Also when the user is redirected on car page there occurs an request that returns the data about the car. For this i used in cypres visit method:

cy.visit('http://localhost:3000/cars/1234') //to go to the car page by id (1234 is the car id)
cy.route('GET', 'fixture:car.json').as('getCar') // here i make the request
cy.wait('@getCar')

But doing this i get: CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'getCar'. No request ever occurred. , but if i click on a menu item to go to the car page all works: cy.get("a[href*=/car/1234]").click() all works. Why visit throws this error? And how to solve it in my case?

Answer 1

The route listener must be set before the visit.

Substituting cy.intercept() which replaces cy.route() after Cypress v6.

cy.intercept('GET', 'fixture:car.json').as('getCar') // here I listen for the request

cy.visit('http://localhost:3000/cars/1234') 

cy.wait('@getCar')