vue-router's useRoute is not correctly mocked

See original GitHub issue

Describe the bug

When using vitest-suggested testing libraries, I can’t successfully mock useRoute and useRouter from the vue-router package.

I’m using:

Any time I run a component test with a mocked useRoute, the mock returns undefined, and Vue warns about missing injections.

...
[Vue warn]: injection "Symbol(route location)" not found. 
  at <HelloWorld ref="VTU_COMPONENT" > 
  at <VTUROOT>
...
TypeError: Cannot read properties of undefined (reading 'path')
     19| 
     20|   <div class="card">
     21|     <button type="button" @click="count++">count is {{ count }}</button>
       |                     ^
     22|     <p>
     23|       Edit

Reproduction

See a minimal reproduction, using a fresh yarn create vite project here: https://github.com/hidde-jan/vitest-use-route-example/blob/main/src/components/__test__/HelloWorld.test.ts

System Info

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 76.22 MB / 32.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.14.0 - ~/.nodenv/versions/16.14.0/bin/node
    Yarn: 1.22.15 - ~/.nodenv/versions/16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nodenv/versions/16.14.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 102.0.1
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-vue: ^3.0.3 => 3.0.3 
    vite: ^3.0.7 => 3.0.9 
    vitest: ^0.22.1 => 0.22.1 


### Used Package Manager

yarn

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitest-dev/vitest/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitest-dev/vitest/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitest.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/vitest-dev/vitest/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitest-dev/vitest/discussions) or join our [Discord Chat Server](https://chat.vitest.dev).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

7reactions
ig-onoffice-decommented, Sep 20, 2022

For me this workaround doesn’t work. Current Versions: @vitejs/plugin-vue: 3.1.0 vite: 3.1.3 vitest: 0.23.4

4reactions
sheremet-vacommented, Aug 26, 2022

Should be fixed by https://github.com/vitest-dev/vitest/issues/1919 and https://github.com/vitejs/vite/pull/9860

For now, you can manually add node condition to your config:

{
  resolve: {
    conditions: process.env.VITEST ? ['node'] : []
  }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue-router error: TypeError: Cannot read property 'matched' of ...
I was on a tutorial and it didn't say that we must use router as the variable name. I was using Router. –...
Read more >
Dynamic Route Matching with Params | Vue Router
When a route is matched, the value of its params will be exposed as this. ... this also means that the lifecycle hooks...
Read more >
Waiting for the result of a Navigation - Vue Router
We need a way to detect if we actually changed the page we are on or not. Detecting Navigation Failures #. If a...
Read more >
Migrating from Vue 2 - Vue Router
Vue Router is no longer a class but a set of functions. ... getMatchedComponents is now removed as matched components can be retrieved...
Read more >
Getting Started - Vue Router
`<router-link>` will render an `<a>` tag with the correct `href` ... component matched by the route will render here --> <router-view></router-view> </div> ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found