在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} 從 "@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的模擬路由