TypeError : Impossible de lire la propriété 'type' de null - Test des composants vue à l'aide de fonctions asynchrones

Question

Je teste le composant ComponentA.spec.js et j'obtiens TypeError : Impossible de lire la propriété 'type' de null. Si je supprime le mot-clé wait dans la fonction getData() de ComponentA, cela fonctionne. Je me suis moqué de l'appel de l'API getData lors de mon test mais cela ne fonctionne toujours pas.

Ceci est la pile complète TypeError : C : [Confidentialité] Inconnu : Impossible de lire la propriété 'type' de null

at assert (node_modules/@babel/types/lib/asserts/generated/index.js:284:112)
à Object.assertIdentifier (node_modules/@babel/types/lib/asserts/generated/index.js:373:3)
au nouveau CatchEntry (node_modules/regenerator-transform/lib/leap.js:93:5)
sur Emitter.Ep.explodeStatement (node_modules/regenerator-transform/lib/emit.js:535:36)
sur node_modules/regenerator-transform/lib/emit.js:323:12
    sur Array.forEach (<anonyme>)
sur Emitter.Ep.explodeStatement (node_modules/regenerator-transform/lib/emit.js:322:22)
sur Emitter.Ep.explode (node_modules/regenerator-transform/lib/emit.js:280:40)

≪/pré>
<p>Il s'agit du composant pour lequel j'essaie de créer un test, A</p>
<pre class="brush:js;toolbar:false;"><template>
  <div class="d-flex flex-row">
    <composant-b />
    <composant-c />
  </div>
</modèle>

<script>
importer le composant B depuis './ComponentB' ;
importer ComponentC depuis './ComponentC' ;
importer { getData } depuis 'apis' ;
exporter par défaut {
  nom : 'composant-a',
  Composants: {
    ComposantB,
    ComposantC,
  },
  asynchrone créé() {
    attendez this.getData();
  },
  méthodes : {
    // Cette fonction est la coupable
    asynchrone getData() {
      essayer {
        réponse const = attendre getData();
      } attraper {
        //
      }
    },
  },
} ;
</script>
≪/pré>
<p>Voici mon fichier ComponentA.spec.js</p>
<pre class="brush:js;toolbar:false;">importer Vuetify depuis 'vuetify' ;
importer ComponentA depuis 'components/ComponentA' ;
importer { createLocalVue, ShallowMount, mount } depuis '@vue/test-utils' ;

jest.mock('shared/apis', () => {
  const data = require('../fixedData/data.json');

  retour {
    getData : jest.fn().mockResolvedValue(données),
  } ;
});

const localVue = createLocalVue();
laissez vuetifier;

fonction createShallowWrapper(options = {}) {
  retourner ShallowMount (ComposantA, {
    localVue,
    vuetifier,
    ...options,
  });
}

avantEach(() => {
  vuetify = new Vuetify();
});

décrire('ComposantA', () => {
  décrire('création de composant', () => {
    test('test', () => {
      const wrapper = createShallowWrapper();
      attendre(wrapper).toMatchSnapshot();
    });
  });
});

Answer 1

L'ajout de la variable d'exception (e) à la capture dans la fonction getData dans ComponentA a résolu le problème.