Im kombinierten API-Unit-Test von Vue 3 wurde festgestellt, dass $route nicht im onMounted()-Hook definiert war

Question

Ich habe einen onMounted()-Hook in der setup()-Funktion, der auf $route> zugreift ;-Attribut, aber wenn ich das $route-Objekt verspotte, ist der $route undefiniert, daher wird ein Fehler ausgegeben. Hier ist der Code:

Component.vue:

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

<script lang="ts">
importiere {defineComponent, onMounted} aus 'vue'
{useRoute} aus „vue-router“ importieren;

Standard exportieren defineComponent({
  Name: 'Komponente',
  aufstellen() {
    const route = useRoute()
    onMounted(() => {
      console.log(route.params.id)
    })

    zurückkehren {}
  }
})
</script>

component.spec.ts:

import {mount} from "@vue/test-utils";
Komponente aus „@/views/Bundle/Component.vue“ importieren;

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

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

  Warten Sie auf wrapper.find('button').trigger('click')
})

Wirft einen Fehler aus: TypeError: Eigenschaft „params“ von undefiniert kann nicht gelesen werden

Ich verwende vue-test-utils Version 2.0.0-rc.12.

Jede Hilfe wäre sehr dankbar

Answer 1

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

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

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

使用组合API的模拟路由