Vue 3 Composition API 单元测试：$route 在 onMounted() 挂钩中未定义

Question

onMounted()我的组件函数中有一个setup()访问 的钩子$route.params property，但是当我$route在测试中模拟该对象时，$route它undefined位于钩子中onMounted()，因此引发错误。这是代码

组件.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>

组件规格：

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')
})

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

我正在使用 vue-test-utils 版本 2.0.0-rc.12。

任何帮助将非常感激

Answer 1

问题是，使用组合 API 时，不会考虑挂载选项（以及 $route 和 $router 的模拟）。

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

不过，不知道在每个测试中是否有一种非强制的方式来嘲笑它......

使用具有 Composition API 的模拟路由器