在Vue 3的组合式API单元测试中，发现在onMounted()钩子中未定义$route

Question

我在我的组件的 setup() 函数中有一个 onMounted() 钩子，它访问了 $route.params 属性，但是当我在测试中模拟 $route 对象时，onMounted() 钩子中的 $route 是 undefined，因此抛出了一个错误。以下是代码：

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>

组件.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')
})

抛出错误： 类型错误：无法读取未定义的属性“params”

我使用的是 vue-test-utils 2.0.0-rc.12 版本。

任何帮助将不胜感激

Answer 1

问题在于当使用组合API时，挂载选项（因此也包括$route和$router的模拟）不会被考虑。

例如，当你查看路由的matched属性（在组件中），数组将为空，因为没有匹配的路由，也没有可用的路由上下文。但他们更新了文档，你可以在那里看到一个例子。

不知道有没有一种非命令式的方式来模拟每个测试...

使用组合API的模拟路由