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 vitest-dev/vitest#1484 or vitejs/vite#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 vitejs/vite#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.

[lielgut]

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

This solution actually doesn't work for me.
I get the following error when changing the import: "Could not find a declaration file for module 'vue-router/dist/vue-router.mjs"
anyone managed to solve this issue??

[sebapastore]

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

This workaround works if you are using certain versions of vitest. For example, in the "reproduction link" the version ^0.18 of vitest is used. The example works, with the workaround described, until version ^0.23 of vitest. Since version 0.24 of vitest, the workaround doesn't work anymore and the result of useRoute() is undefined.

[jesseice]

Will the vue version downgrade to 3.3.4 can use the specific source code what wrong do not know

[posva]

This seems to be now resolved with the latest versions of vitest, vite, and test-utils