In the combined API unit test of Vue 3, it was found that $route was not defined in the onMounted() hook

Question

I have a onMounted() hook in my component's setup() function, which accesses $route. params attribute, but when I mock the $route object in my test, the $routeonMounted() hook code> is undefined, so an error is thrown. Here is the code:

Component.vue:

<template>
  <div>{{ this.$route.params.id }}</div>
</template>

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

export default defineComponent({
  name: 'Component',
  setup() {
    const route = useRoute()
    onMounted(() => {
      console.log(route.params.id)
    })

    return {}
  }
})
</script>

component.spec.ts:

import {mount} from "@vue/test-utils";
import Component from "@/views/Bundle/Component.vue";

test('test description', async () => {
  const mockRoute = {
    params: {
      ID: 1
    }
  }
  const mockRouter = {
    push: jest.fn()
  }

  const wrapper = mount(Component, {
    global: {
      mocks: {
        $route: mockRoute,
        $router: mockRouter
      }
    }
  })

  await wrapper.find('button').trigger('click')
})

Throws error: TypeError: Cannot read property 'params' of undefined

I am using vue-test-utils version 2.0.0-rc.12.

Any help would be greatly appreciated

Answer 1

The problem is that when using the composite API, the mount options (and therefore also the $route and $router simulations) are not taken into account.

For example, when you look at the route's matched property (in the component), the array will be empty because there are no matching routes and no routing context available. But they updated the documentation and you can see an example there.

I wonder if there is a non-imperative way to simulate each test...

Mock routing using composition API