Comment simuler les méthodes des composants React avec jest et enzyme ?

Question

J'ai un composant react (simplifié afin de démontrer le problème) :

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };

    searchDish = (value) => {
      //Do something
    }

    render() {
        return(<div></div>)
    }
}

Maintenant, je veux tester que handleNameInput() appelle searchDish avec la valeur fournie.

Pour ce faire, je voudrais créer une fonction fantaisie jest qui remplace la méthode des composants.

Voici mon cas d'essai jusqu'à présent :

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

Mais tout ce que j'obtiens dans la console est SyntaxError :

Erreur de syntaxe

  at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
  at run_xhr (node_modules/browser-request/index.js:215:7)
  at request (node_modules/browser-request/index.js:179:10)
  at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
  at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
  at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

Ma question est donc la suivante : comment faire pour que les méthodes des composants soient correctement simulées avec l'enzyme ?

Answer 1

La méthode peut être simulée de cette façon :

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.instance().searchDish = jest.fn();
   wrapper.update();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
})

Vous devez également appeler .update sur le wrapper du composant testé afin d'enregistrer correctement la fonction fantaisie.

L'erreur de syntaxe provenait d'une mauvaise affectation (vous devez affecter la méthode à l'instance). Mes autres problèmes provenaient du fait que je n'appelais pas .update() après avoir simulé la méthode.

Answer 2

Doit être remplacé wrapper.update(); con wrapper.instance().forceUpdate();

Answer 3

La réponse de @Miha a fonctionné avec un petit changement :

it('handleNameInput', () => {
  let wrapper = shallow(<MyComponent/>);
  const searchDishMock = jest.fn();
  wrapper.instance().searchDish = searchDishMock;
  wrapper.update();
  wrapper.instance().handleNameInput('BoB');
  expect(searchDishMock).toBeCalledWith('BoB');
})