Vue router fails to resolve route

[LukasOchmann]

I am testing a vue component using useRoutefrom vue-router:

<script lang="ts">
export default defineComponent({
  name: 'Navbar',
  setup() {
    const route = useRoute();
    // ....  do something
  }
})
</script>

My cypress mount command adds a router:

// cypress/support/component.ts
Cypress.Commands.add('mount', (component, options = {}) => {
  options.global  =  options.global || {}
  options.global.plugins =  options.global.plugins || []

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

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

  // also adding i18n, and some custom plugins non of them interfering with vue-router 

 return mount(component, { ...options })
})

The routes I use, all have both a name and a path.

When mounting this component vue router throws this error:

TypeError
Cannot use 'in' operator to search for 'path' in undefined

Did i do something wrong? Any idea how to solve this?

[lmiller1990]

I think you might need to navigate somewhere, like router.push(...).

Another problem I had was solved by doing await router.isReady(). Example here. That ensures the initial routing has completed before anything else happens.

I usually avoid testing the router in component tests - I've found it problematic since the component hierarchy doesn't match what it will be in production, but it's definitely possible to work around.

[LukasOchmann]

Hi, thank you for your quick answer. I totally agree with you about testing the router in component tests. Unfortunately, I was not in charge of creating that component. Maybe it is not a good idea to test this "more-of-a-container"-component anyway or il move the test to the e2e-setup.

Anyway, I tried both solutions, and unfortunately neither worked.

[lmiller1990]

I wonder where Cannot use 'in' operator to search for 'path' in undefined comes from... probably somewhere in Vue Router.

Can you make a minimal reproduction? Maybe fork from: https://github.com/cypress-io/cypress-test-tiny