Vue-Router Mock With Vue-Test-Utils & Vitest

Question

I'm trying to understand the logic of mocking the Vue-Router with Vitest.

For this, I tried to set up and mock my test environment on a very simple project. When I tried to proceed according to the official documentation of Vue-Test-Utils, I always got an error. I don't know if it's because they use Jest.

Using real vue-router solves my problem but I think it's better to mock vue-router.

Below, I first convey the source codes of the project, and then the error I received.

Home.vue

<script setup lang="ts">
import {onMounted} from "vue";
import {useRoute} from "vue-router";

const route = useRoute()

onMounted(() => {
  console.log(route.query)
})
</script>

<template>
  <div>Home</div>
</template>

Home.spec.ts

import {expect, it, vi} from "vitest";
import {mount} from "@vue/test-utils";

import Home from "../src/components/Home.vue"

it('Home Test', async () => {
    const wrapper = mount(Home)

    expect(wrapper.exists()).toBeTruthy()
})

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    include: ['./test/**/*.spec.ts'],
    exclude: ['node_modules', 'dist'],
    globals: true
  }
})

My error message is as follows:..

Methods I've Tried

I tried to mock vue-router like below

vi.mock('vue-router', () => ({
    useRoute: vi.fn(),
}))

or just

vi.mock('vue-router')

Here is my final Home.spec.ts file

import {expect, it, vi} from "vitest";
import {mount} from "@vue/test-utils";

import Home from "../src/components/Home.vue"

vi.mock('vue-router')

it('Home Test', async () => {
    const wrapper = mount(Home, {
        global: {
            stubs: ["router-link", "router-view"]
        }
    })

    expect(wrapper.exists()).toBeTruthy()
})

benjaroa · Accepted Answer · 2022-10-27 06:35:22Z

4

First, I expected to see the router-link or router-view in Home.vue:

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

onMounted(() => {
  console.log(route.query);
});
</script>

<template>
  <router-link to="home">Go to home</router-link>
  <router-view />
</template>

So, the Home.spec.ts should be something like this:

import { expect, it, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import * as VueRouter from 'vue-router';
import Home from '../src/components/Home.vue';

describe('./path/to/Home.vue', () => {
  const useRouteSpy = vi.spyOn(VueRouter, 'useRoute');
  const getWrapper = () => mount(Home as any, {
    global: {
      stubs: {
        'router-link': { template: '<div/>' },
        'router-view': { template: '<div/>' },
      },
    },
  });

  it('the component should be mounted', () => {
    // ARRANGE
    const useRouteMock = useRouteSpy.mockImplementationOnce({ query: 'query' });
    // ACT
    const wrapper = getWrapper();
    // ASSERT
    expect(useRouteMock).toHaveBeenCalled();
    expect(wrapper.exists()).toBeTruthy();
  });
});

Some comments/words of advice:

Use describes to boundary the test context
Define a global function to mount the component, reuse instead of repeat
Use .spyOn() and .mockImplementation...() to spy and mock
Use some structured/straightforward way to write your test, like AAA [arrange, act, assert] or GWT [given, when, then]. I have been testing for a few years and still using it, it helps me to understand what I'm testing
Use .toHaveBeenCalled...() to check if the mock worked as expected
The stubs in the mount() function should be related with the components used in the template (so, if you're not using <router-view>, it should not be listed as a stub)

Hope that helps, Cheers!

answered Oct 27, 2022 at 6:35

benjaroa

3772 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mocha_ Over a year ago

Thank you very much for your suggestions.. :) I especially liked the AAA system. I have implemented your codes but this time I am getting an error like this "TypeError: Cannot redefine property: useRoute". In the line where we spy the VueRouter

benjaroa Over a year ago

I would say that something in your typescript config is messing with vitest. You can check how the .spyOn() syntax works in the vitest or jest docs

Steve Over a year ago

@Mocha_ Did you find a solution to the error "TypeError: Cannot redefine property: useRoute"? I have the same issue

Mocha_ Over a year ago

@Steve I'm sorry for late reply, after this error i started using "vue-router-mock" package. It works well for component or page tests, but I haven't used it for composable tests yet.

Surya Adtmaja · Accepted Answer · 2023-11-02 10:26:58Z

1

in case anyone need to do the same thing, now you can easily mock the vue-router using vue-router-mock

// for example
import { getRouter } from 'vue-router-mock'

test('should move to /dashboard', () => {
 const route = getRouter()
 wrapper.router.push('/dashboard')
 console.log(route.currentRoute.value.fullPath) // /dashboard
})

answered Nov 2, 2023 at 10:26

Surya Adtmaja

113 bronze badges

Comments

evandor · Accepted Answer · 2024-04-03 17:04:45Z

0

The simplest approach I could come up with looks like this:

In my production code I try to access a variable like this

route.params.entityId

which yields an error like yours in my test code.

With a setup like this:

import {useRoute} from "vue-router";
   
vi.mock('vue-router')
    
describe('MainPanelEntityPage', () => {

  useRoute.mockReturnValue({
    params: {
      entityId: "17"
    },
  })

  it('should be mounted', async () => {
    const wrapper = mount(MainPanelEntityPage)
     ...
  }
}

I am able to retrieve "17" as entityId from the mocked route params.

Hope that helps.

answered Apr 3, 2024 at 17:04

evandor

7891 gold badge10 silver badges24 bronze badges

Comments

张立群 · Accepted Answer · 2024-05-28 02:24:22Z

i have almost the same confusion as yours, after hundred and thousands of try, i figure out it:

the official website of vitest has the following warning in chapter vi.mock: Vitest will not mock modules that were imported inside a setup file because they are cached by the time a test file is running. You can call vi.resetModules() inside vi.hoisted to clear all module caches before running a test file.

so, if you are using setup, you need to call vi.resrtModules() first before using vi.mock(), for example:

vi.hoisted(() => {
  vi.resetModules()
})

vi.mock('vue-router', async (importOriginal) => {
    const actual = await importOriginal<typeof import('vue-router')>()
    return {
      ...actual,
      useRoute: vi.fn(),
     }
})

now it will work

Collectives™ on Stack Overflow

Vue-Router Mock With Vue-Test-Utils & Vitest

Home.vue

Home.spec.ts

vite.config.ts

My error message is as follows:..

Methods I've Tried

Here is my final Home.spec.ts file

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Home.vue

Home.spec.ts

vite.config.ts

My error message is as follows:..

Methods I've Tried

Here is my final Home.spec.ts file

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related