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

[wbiller]

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.

[posva]

I thought #1465 would fix this but it doesn't seem to affect it. It's as if vite or vitest was requiring a different vue-router module in .vue files and other .ts files. You might want to report this to vite/vitest team. I suspect this is yet, another cjs/esm misconfiguration on vue-router but I simply don't know what because I tried tracing which versions of vue-router are being imported and only dist/vue-router.mjs seems to be imported...

@patak-dev do you have any idea what might be happening here? I tried creating a test in a .ts file and the mocking works just fine so something different is happining with .vue files.

[tinobino]

Is this related to https://github.com/vitest-dev/vitest/issues/1484 or https://github.com/vitejs/vite/issues/8659?

[rros]

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

[Machineric]

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 vitejs/vite#8659 has been fixed

I've been searching for this issue and workaround for the past few hours! thanks for the tip!

[dannybster]

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 vitejs/vite#8659 has been fixed

@rros been looking for this for hours, thanks!! If you have a minute could you please explain why this works?

[awacode21]

I am experiencing the same problem, but not with mocked router. I experience it with real router. When i follow these instructions: https://test-utils.vuejs.org/guide/advanced/vue-router.html#using-a-real-router-with-composition-api

for me

const route = useRoute();
const router = useRouter();

both always are undefined. i am trying to fix this the whole day. Without success. Now i found this ticket here, but it is related to mocked router, how a solution for real router could look like? Any idea? Cause i am quite desperate on this since hours.

[awacode21]

Well i adpated your approach and adjusted my imports from import { createRouter, createWebHistory } from 'vue-router'; to import { createRouter, createWebHistory } from 'vue-router/dist/vue-router.mjs';

Then it is also working for the "real router" approach. Thank you so much for the workaround. This was driving me nuts.