TypeError: Eigenschaft „Typ' von Null kann nicht gelesen werden – Testen von Vue-Komponenten mithilfe asynchroner Funktionen
P粉818306280
2023-08-28 23:34:29
<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>
将异常变量 (e) 添加到 ComponentA 中 getData 函数中的捕获中修复了该问题。