Lack of documentation on how you check if a Vue component redirect worked

[rezelute]

I have the following code which is calling a function inside the component i am testing

Top of the component test:

// Create a new router instance for each test
const mockRouter = createRouter({
   routes: getRoutes(),
   history: createMemoryHistory(),
});

Inside an IT:

// Call the handleNextRedirect method
cy.get("@vue").then((wrapper: any) => {
    const componentInstance = wrapper.vm; // Get the Vue component instance
    componentInstance.handleNextRedirect();
 });

// All the code below this point is my attempt to check if the router push went to the right place
// Note that the code below is working in Cypress UI but NOT in headless mode so something isnt quite right with the router ready part...

 // Wait for the router to update
 cy.wrap(mockRouter.isReady())
    .then(() => {
       return new Promise<void>((resolve) => {
          nextTick(() => {
             // Ensure the router navigation is complete
             resolve();
          });
       });
    })
    .then(() => {
       // Check the current route
       const currentRoute = mockRouter.currentRoute.value;
       expect(currentRoute.name).to.equal("home");
       expect(currentRoute.query.study_id).not.to.exist;
    });

Note however that if i add a cy.wait(500) below then it works in headless and the Cypress UI

cy.get("@vue").then((wrapper: any) => {
    const componentInstance = wrapper.vm; // Get the Vue component instance
    componentInstance.handleNextRedirect();
 });

// adding this wait makes it work
cy.wait(500);

 // Wait for the router to update
 cy.wrap(mockRouter.isReady())
...