Im kombinierten API-Unit-Test von Vue 3 wurde festgestellt, dass $route nicht im onMounted()-Hook definiert war
P粉668146636
P粉668146636 2023-08-26 08:54:29
0
1
479
<p>Ich habe einen <code>onMounted()</code>-Hook in der <code>setup()</code>-Funktion, der auf <code>$route> zugreift ;-Attribut, aber wenn ich das <code>$route</code>-Objekt verspotte, ist der <code>$route</ im Hook-Code <code> <code>undefiniert</code>, daher wird ein Fehler ausgegeben. Hier ist der Code: </p> <p><strong>Component.vue:</strong></p> <pre class="brush:php;toolbar:false;"><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></pre> <p><strong>component.spec.ts:</strong></p> <pre class="brush:php;toolbar:false;">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') })</pre> <p><strong>Wirft einen Fehler aus: </strong> TypeError: Eigenschaft „params“ von undefiniert kann nicht gelesen werden</p> <p>Ich verwende vue-test-utils Version 2.0.0-rc.12. </p> <p>Jede Hilfe wäre sehr dankbar</p>
P粉668146636
P粉668146636

Antworte allen(1)
P粉739079318

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

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

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

使用组合API的模拟路由

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage