Jest/Enzyme ne peut pas se moquer de la propriété de classe

Question

J'écris actuellement des tests pour les composants React avec Jest an Enzyme. Je suis bloqué quand je dois simuler une fonction de propriété de classe, écrite avec la syntaxe de la flèche: le simulacre n'est pas appliqué.

Voici un extrait du composant testé:

class MaClass extends React.Component { 
    ... 
    componentWillMount() { 
    this.getNotifications() 
    } 
    getNotifications =() => { 
    axios.get(window.Routing.generate(
     'api_notifications_get_collection' 
    ), { 
     headers: { 
     'Accept': 'application/json' 
     } 
    }).then(response => { 
     this.setState({ 
     notifications: response.data 
     }) 
    }).catch(error => { 
     console.log('Error : ', error) 
    }) 
    } 
    ... 
} 

Et voici le test:

import React from 'react' 
import { configure, shallow } from 'enzyme' 
import Adapter from 'enzyme-adapter-react-15' 

import NotificationsComponent from './NotificationsComponent' 

configure({adapter: new Adapter()}) 

describe('Testing NotificationsComponent',() => { 
    /** 
    * This should call getNotifications 
    */ 
    test('getNotifications should be called',() => { 
    let wrapper = shallow(<NotificationsComponent />) 
    const getMock = jest.fn() 
    wrapper.instance().getNotifications = getMock 
    wrapper.update() 
    expect(getMock).toHaveBeenCalled() 
    }) 
}) 

En ce qui concerne lecture, c'est la bonne façon de faire pour des méthodes régulières. Mais il semble que les fonctions de propriété de classe écrites avec la syntaxe de la flèche ne peuvent pas être moquées de cette façon.

Mon terminal me renvoie une erreur sur ce qui est à l'intérieur de la méthode des composants testés:

TypeError: Cannot read property 'generate' of undefined

Ce qui signifie que la maquette n'est pas passé à travers.

Est-ce que quelqu'un pourrait indiquer où est mon erreur s'il vous plaît? Merci.

Answer 1

Vous utilisez le mauvais crochet de cycle de vie pour cela. componentWillMount est appelé "à l'intérieur" shallow(<NotificationsComponent />). Ainsi, l'original getNotifications a été appelé.

wrapper.update() Force un rendu et ne remonte pas le composant, de sorte que votre affectation du simulacre n'atteint pas l'effet désiré.