Espionnage sur la méthode du composant enfant React

Question

J'essaie de tester mon composant React avec le jest et l'enzyme. J'ai un composant de formulaire qui utilise le composant react-skylight. Je déclenche la fonction .show() sur le formulaire de soumission et juste quand la réponse du serveur est réussie.

Mon test est actuellement comme ceci:

import MyForm from './MyForm'; 
import Popup from 'react-skylight'; 

describe('<MyForm />',() => { 
    it('should show popup on success',() => { 
     const popupShowSpy = jest.spyOn(Popup.prototype, 'show'); 
     const myForm = mount(<MyForm />); 
     myForm.update(); 

     myForm.find('form').simulate('submit'); 
     expect(popupShowSpy).toHaveBeenCalled(); 
    }); 
}); 

mais je reçois une erreur quand je lance des tests:

expect(jest.fn()).toHaveBeenCalled() 

Expected mock function to have been called. 

je trouve here discussion à propos de problème similaire, mais pour moi ce n'est pas travail.

---

Solution:

problème était avec le module axios. Il était en train de mettre à jour le composant, mais la réponse qui a été mockée n'a pas été résolue, donc grâce à cet article here, j'ai réussi à écrire des tests. Et j'ai enveloppé l'appel de fonction de composants enfant dans la fonction propre du composant parent et espionné sur cette fonction parent.

import MyForm from './MyForm'; 
import Popup from 'react-skylight'; 

describe('<MyForm />',() => { 
    it('should show popup on success', async() => { 
     const popupShowSpy = jest.spyOn(MyForm.prototype, 'showPopup'); 
     const myForm = mount(<MyForm />); 

     const response = Promise.resolve({ 
      data: { 
       message: 'Error: some error' 
      }, 
      status: 400 
     }); 
     axios.post = jest.fn(() => response); 
     myForm.find('form').simulate('submit'); 
     await response; 
     myForm.update(); // <- child component is rendered correctly 
     expect(popupShowSpy).toHaveBeenCalled(); 
    }); 
}); 

Answer 1

Solution:

problème était avec le module axios. Il était en train de mettre à jour le composant, mais la réponse qui a été mockée n'a pas été résolue, donc grâce à cet article here, j'ai réussi à écrire des tests. Et j'ai enveloppé l'appel de fonction de composants enfant dans la fonction propre du composant parent et espionné sur cette fonction parent.

import MyForm from './MyForm'; 
import Popup from 'react-skylight'; 

describe('<MyForm />',() => { 
    it('should show popup on success', async() => { 
     const popupShowSpy = jest.spyOn(MyForm.prototype, 'showPopup'); 
     const myForm = mount(<MyForm />); 

     const response = Promise.resolve({ 
      data: { 
       message: 'Error: some error' 
      }, 
      status: 400 
     }); 
     axios.post = jest.fn(() => response); 
     myForm.find('form').simulate('submit'); 
     await response; 
     myForm.update(); // <- child component is rendered correctly 
     expect(popupShowSpy).toHaveBeenCalled(); 
    }); 
});