Attribute $route undefined when upgrading from 12.11.0 to 12.12.0 or higher

[SiegfriedSobkowiak]

Current behavior

With Cypress 12.11.0 this type of test used to work:

cy.mount(TheComponent, {}).then((mounted) => {
      cy.wrap(mounted.component).its("$route.path").should("eq", "/someURL");
    });

When upgrading to Cypress 12.12.0 or any other later version it breaks because mounted.component.$route is undefined. Adding a console.log(mounted.component.$route); indeed confirms that it is set under 12.11.0 but undefined in 12.12.0. All component tests involving $route break in the same way.

Desired behavior

The $route attribute should be available.

Test code to reproduce

The minimalistic component.ts (changed to be as close to the documentation example) is:

import { routes } from "@/router";
import PrimeVue from "primevue/config";
import { createMemoryHistory, createRouter, type Router } from "vue-router";
import { mount } from "cypress/vue";
import type Keycloak from "keycloak-js";
import { ApiClientProvider } from "@/services/ApiClients";

type MountParams = Parameters<typeof mount>;
type OptionsParam = MountParams[1] & { router?: Router; keycloak?: Keycloak };

declare global {
  namespace Cypress {
    interface Chainable {
      mount(component: any, options?: OptionsParam): Chainable<any>;
    }
  }
}

Cypress.Commands.add('mount', (component, options = {}) => {
  options.global = options.global || {};
  options.global.plugins = options.global.plugins || [];
  options.global.provide = options.global.provide || {};
  options.global.plugins.push(PrimeVue);

  if (!options.router) {
    options.router = createRouter({
      routes: routes,
      history: createMemoryHistory(),
    });
  }

  if (options.keycloak) {
    options.global.provide.apiClientProvider = new ApiClientProvider(Promise.resolve(options.keycloak));
    options.global.provide.getKeycloakPromise = (): Promise<Keycloak> => {
      return Promise.resolve(options.keycloak as Keycloak);
    };
    options.global.provide.authenticated = options.keycloak.authenticated;
  }

  options.global.plugins.push({
    install(app) {
      app.use(options.router);
    },
  });

  return mount(component, options);
});

The packages in the package.json look like this:

"dependencies": {
    "@formkit/core": "^1.5.3",
    "@formkit/themes": "^1.5.3",
    "@formkit/vue": "^1.5.3",
    "@ibm/plex": "^6.4.0",
    "axios": "^1.6.7",
    "currency-codes": "^2.1.0",
    "i18n-iso-countries": "^7.8.0",
    "keycloak-js": "^22.0.5",
    "material-icons": "^1.13.12",
    "pinia": "^2.1.7",
    "pinia-shared-state": "^0.5.1",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primevue": "~3.44.0",
    "vue": "^3.4.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@cypress/code-coverage": "^3.12.19",
    "@faker-js/faker": "^8.4.0",
    "@rushstack/eslint-patch": "^1.7.2",
    "@types/node": "20.11.15",
    "@vitejs/plugin-vue": "^5.0.3",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.4.4",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "12.12.0",
    "depcheck": "^1.4.7",
    "eslint": "^8.56.0",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-jsdoc": "^48.0.4",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vue": "^9.21.1",
    "git-commit-id": "^2.0.1",
    "lint-staged": "^15.2.1",
    "mocha": "^10.2.0",
    "npm-check-updates": "^16.14.14",
    "otplib": "^12.0.1",
    "sass": "^1.70.0",
    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
    "typescript": "5.3.3",
    "vite": "^5.0.12",
    "vite-plugin-istanbul": "^5.0.0"
  },

Cypress Version

12.12.0

Node version

20.11.1

Operating System

Microsoft Windows 10 Enterprise 10.0.19045 Build 19045

Debug Logs

No response

Other

Downgrading vite to a 4.X version does not change the behaviour.