Vue Cypress Component Test Runner - VueRouter

Question

I have added the Cypress Vue Component Test runner to an existing Vue(vite) app. However, when I run the test I get an error that the $route in my component is undefined. Am I missing something with my component test setup? maybe regarding vue router?

The test setup:

import { mount } from "@cypress/vue";
import ProductListContainer from "./ProductListContainer.vue";

it("renders a message", () => {
  mount(ProductListContainer);
...
});

The template:

<template>
 //...
 <template #pagination>
    <nav-pagination 
    :page-count="meta ? meta.pageCount : 0"
    :route-query="$route.query"
    />
 </template
</template>

The error:

TypeError
Cannot read property 'query' of undefined 

The console log line:

....
 "route-query": _ctx.$route.query

Answer 1

There's a sample app using vue router in the Cypress repo.

Here's the way they set it up

import PizzaShop from './PizzaShop'           // component to test
import router from './PizzaShop/router'       // router config from app
import { mountCallback } from '@cypress/vue'  // extended mount function

describe('Vue Router - Pizza Shop', () => {

  // your component will be a child of the simple wrapper below
  const extensions = {
    plugins: [router],
    components: {
      PizzaShop,
    },
  }

  // wrapper into which router is injected
  const template = '<router-view />'    

  // initialize a fresh Vue app before each test (equivalent to createLocalVue)
  beforeEach(mountCallback({ template, router }, { extensions }))

  it('go to order page', () => {
    cy.get('button.order').click()
    cy.contains('Toppings')
  })

And /PizzaShop/router (but your app will have it's own router code, so substitute that)

import { createRouter, createWebHashHistory } from 'vue-router'
import PizzaShop from './index.vue'
import Home from './Home.vue'
import Order from './Order.vue'

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: PizzaShop,
      children: [
        { path: '', name: 'home', component: Home },
        { path: 'order/:preset?', name: 'order', component: Order },
      ],
    },
  ],
})