useRoute is undefined when following vue-test-utils guide to test with Composition API

See original GitHub issue

Version

>= 4.1.0

Reproduction link

github.com

Steps to reproduce

yarn
yarn test

What is expected?

useRoute should be mocked and return the mocked value

What is actually happening?

useRoute is undefined


When following the guide on vue-test-utils how to test vue-router with Composition API (see https://test-utils.vuejs.org/guide/advanced/vue-router.html#using-a-mocked-router-with-composition-api), the test fails. The reason for that is that useRoute is undefined. The last version where it’s working like described is 4.0.16.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:6
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

13reactions
rroscommented, Jul 13, 2022

Yes, it seems related. We have this issue with version 4.1+ of vue-router. Using the latest version, the following mocks make the tests fail

vi.mock('vue-router', () => ({
  useRoute: () => ({
    query: { pageNumber: 1 },
  }),
}));

When changing the mocks like this, the tests will succeed again.

vi.mock('vue-router/dist/vue-router.mjs', () => ({
  useRoute: () => ({
    query: { pageNumber: 1 },
  }),
}));

So, the workaround is to mock the .mjs version until https://github.com/vitejs/vite/issues/8659 has been fixed

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue 3 Composition API unit test : $route is undefined in ...
The issue is that the mount options (and therefore the mocks for $route & $router) are not taken into consideration when using composition...
Read more >
Testing Vue Router
The best way to illustrate how to test an app using Vue Router is to let the warnings guide us. The following minimal...
Read more >
Vue Router - Vue Testing Handbook
This book is written for Vue.js 2 and Vue Test Utils v1. ... Vue applications use the official Vue Router, this guide will...
Read more >
Vue 3 unit testing with vue-router's 'useRoute()' : r/vuejs - Reddit
I'm trying to refactor into the composition API, to show the team ... But now, using useRoute() for vue router, that trick no...
Read more >
Unit Testing Vue Apps: Tips, Tricks, and Best Practices
So at Lob, we use these three, Vitest, Vue Test Utils, and Testing Library. Vitest is a test runner, has almost the exact...
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