TypeError: Eigenschaft „Typ“ von Null kann nicht gelesen werden – Testen von Vue-Komponenten mithilfe asynchroner Funktionen

Question

Ich teste die Komponente ComponentA.spec.js und erhalte die Fehlermeldung TypeError: Cannot read property 'type' of null. 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.

Dies ist der komplette Stapel TypeError: C: [Datenschutz] Unbekannt: Die Eigenschaft „Typ“ von null

kann nicht gelesen werden.

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)

Dies ist die Komponente, für die ich einen Test erstellen möchte, A

<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>

Dies ist meine ComponentA.spec.js-Datei

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();
    });
  });
});

Answer 1

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