Javascript Girl
  1. Javascript Girl
  3. Jest mock async appelle le composant de réaction interne
Intereting Posts
Simuler la pression de touche sans jquery Redimensionnement de la visualisation Google avec ChartEditor Quelle est la différence entre un JSON et Array? L'événement Angularjs sur la mise au point de champ de saisie? Nettoyez facilement les talons sinon Remplacez la méthode standard appelée par double clic dans la grille CRM. Les mots réservés doivent-ils être cités lorsqu'ils sont définis comme des noms de propriétés d'objets JavaScript? Comment faire une boucle sur un tableau avec JavaScript? HTML5, JavaScript: Faites glisser et déposez un fichier à partir d'une fenêtre externe (Explorateur Windows) Ajout d'un effet de diapositive au menu déroulant bootstrap AngularJS: la meilleure façon de regarder les dimensions? Effectuer une mauvaise sortie en essayant de boucler les 50 premiers numéros Fibonacci en JavaScript Comment déclencher un clic-à-appel avec javascript (iphone) Javascript RegExp correspond au texte entre les étiquettes <a> Javascript – valeur de changement de combobox de l'autre combobox

Jest mock async appelle le composant de réaction interne

Je suis nouveau pour jest / enzyme et j'essaie de moquer un appel à une fonction aync qui renvoie une promesse, l'appel est effectué dans un composant réactif dans la méthode componentDidMount.

Le test tente de tester que componentDidMount définit le tableau renvoyé par Promise dans l'état.

Le problème que je pose est que le test se termine et passe avant que le tableau ne soit ajouté à l'état. J'essaie d'utiliser le rappel «fait» pour que le test attende jusqu'à ce que la promesse soit résolue, mais cela ne semble pas fonctionner.

J'ai essayé de déplacer les appels d'attente vers la ligne avant l'appel effectué (), mais cela ne semble pas fonctionner non plus.

Quelqu'un peut-il me dire ce que je fais mal ici?

Composant testé: 

componentDidMount() { this.props.adminApi.getItems().then((items) => { this.setState({ items}); }).catch((error) => { this.handleError(error); }); }

Mon test: 

  import React from 'react'; import { mount } from 'enzyme'; import Create from '../../../src/views/Promotion/Create'; import AdminApiClient from '../../../src/api/'; jest.mock('../../../src/api/AdminApiClient'); describe('view', () => { describe('componentDidMount', () => { test('should load items into state', (done) => { const expectedItems = [{ id: 1 }, { id: 2 }]; AdminApiClient.getItems.mockImplementation(() => { return new Promise((resolve) => { resolve(expectedItems); done(); }); }); const wrapper = mount( <Create adminApi={AdminApiClient} /> ); expect(wrapper.state().items).toBe(expectedItems); }); }); });

Il y a deux problèmes avec votre test. D'abord, vous ne pouvez pas se moquer d' AdminApiClient comme ça. jest.mock remplacera le module par un simplement undefined , donc getItems.mockImplementation n'aura aucun effet ou lancera une erreur. De même, il n'est pas nécessaire d'utiliser l'original. Comme vous le passez en argument via des accessoires, vous pouvez simplement créer votre simulation sur le test. Deuxièmement, si vous travaillez avec des promesses, vous devez soit renvoyer la promesse de votre test, soit utiliser async/await ( docs ): 

 it('', async() = > { const expectedItems = [{ id: 1 }, { id: 2 }]; const p = Promise.resolve(expectedItems) AdminApiClient = { getItems: () = > p } const wrapper = mount( <Create adminApi={AdminApiClient} /> ); await p expect(wrapper.state().items).toBe(expectedItems); })