TypeError: Eigenschaft „Typ' von Null kann nicht gelesen werden – Testen von Vue-Komponenten mithilfe asynchroner Funktionen
P粉818306280
P粉818306280 2023-08-28 23:34:29
0
1
582
<p>Ich teste die Komponente ComponentA.spec.js und erhalte die Fehlermeldung <code>TypeError: Cannot read property 'type' of null</code>. Wenn ich das Schlüsselwort „wait“ in der Funktion „getData()“ in ComponentA entferne, funktioniert es. Ich habe den getData-API-Aufruf in meinem Test verspottet, aber er funktioniert immer noch nicht. </p> <p>Dies ist der komplette Stapel TypeError: C: [Datenschutz] Unbekannt: Die Eigenschaft „Typ“ von null </p> kann nicht gelesen werden. <pre class="brush:js;toolbar:false;">at Assert (node_modules/@babel/types/lib/asserts/generated/index.js:284:112) bei Object.assertIdentifier (node_modules/@babel/types/lib/asserts/generated/index.js:373:3) bei neuem CatchEntry (node_modules/regenerator-transform/lib/leap.js:93:5) bei Emitter.Ep.explodeStatement (node_modules/regenerator-transform/lib/emit.js:535:36) unter node_modules/regenerator-transform/lib/emit.js:323:12 bei Array.forEach (<anonym>) bei Emitter.Ep.explodeStatement (node_modules/regenerator-transform/lib/emit.js:322:22) bei Emitter.Ep.explode (node_modules/regenerator-transform/lib/emit.js:280:40) </pre> <p>Dies ist die Komponente, für die ich einen Test erstellen möchte, A</p> <pre class="brush:js;toolbar:false;"><template> <div class="d-flex flex-row"> <component-b /> <component-c /> </div> </template> <script> importiere ComponentB aus './ComponentB'; ComponentC aus './ComponentC' importieren; import { getData } from 'apis'; Standard exportieren { Name: 'Komponente-a', Komponenten: { KomponenteB, KomponenteC, }, asynchron erstellt() { warte auf this.getData(); }, Methoden: { // Diese Funktion ist der Übeltäter asynchrone getData() { versuchen { const Antwort = Warten auf getData(); } fangen { // } }, }, }; </script> </pre> <p>Dies ist meine ComponentA.spec.js-Datei</p> <pre class="brush:js;toolbar:false;">Vuetify aus 'vuetify' importieren; importiere ComponentA aus „components/ComponentA“; import { createLocalVue, flatMount, mount } from '@vue/test-utils'; jest.mock('shared/apis', () => { const data = require('../fixedData/data.json'); zurückkehren { getData: jest.fn().mockResolvedValue(data), }; }); const localVue = createLocalVue(); vuetifizieren lassen; Funktion createShallowWrapper(options = {}) { return strictMount(ComponentA, { localVue, vuetifizieren, ...Optionen, }); } beforeEach(() => { vuetify = new Vuetify(); }); beschreiben('KomponenteA', () => { beschreiben('Komponentenerstellung', () => { test('testing', () => { const wrapper = createShallowWrapper(); erwarten(wrapper).toMatchSnapshot(); }); }); }); </pre></p>
P粉818306280
P粉818306280

Antworte allen(1)
P粉252423906

将异常变量 (e) 添加到 ComponentA 中 getData 函数中的捕获中修复了该问题。

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