web-dev-qa-db-fra.com

Comment se moquer des méthodes React avec jest et enzyme

J'ai un composant de réaction (ceci est 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 un jest mock function qui remplace la méthode du composant.

Voici mon cas de test 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 je reçois 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 puis-je simuler correctement les méthodes de composant avec une enzyme?

javascriptreactjsjestjsenzyme
42
Miha Šušteršič

La méthode peut être moquée de cette manière:

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é pour pouvoir enregistrer correctement la fonction fictive.

L'erreur de syntaxe provenait d'une mauvaise évaluation (vous devez affecter la méthode à l'instance). Mes autres problèmes venaient de ne pas appeler .update() après avoir moqué la méthode.

77
Miha Šušteršič

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

9
Aleh

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');
})
0
Yusufali2205