web-dev-qa-db-fra.com

Test React appelle la fonction pass comme accessoire

Je veux tester que lors de l'appel d'une méthode à partir d'un composant React, cela déclenche un passage de fonction au composant en tant qu'accessoire. La méthode est quelque chose comme ceci:

customMethod() {
  // Do something

  this.props.trackEvent({
    category: 'eventCategory',
    action: 'eventAction',
    label: 'eventAction',
  });

  // Do something else
}

La méthode peut être appelée de différentes manières, donc je veux juste faire un test générique: si customMethod est appelé, devrait déclencher this.props.trackEvent avec des données.

Existe-t-il un moyen de déclencher un appel de méthode en utilisant une plaisanterie et/ou une enzyme? J'ai lu comment faire quelque chose comme ça:

const wrapper = shallow(<AdPage {...baseProps} />);
wrapper.instance().customMethod();

Mais cela ne fonctionne pas… aucune idée. Je suis assez nouveau dans les tests, alors devrais-je utiliser une approche différente pour ce genre de tests?

reactjstestingenzymejest
11
Coluccini

En supposant que votre méthode personnalisée est une méthode de composant, je la testerais comme ceci:

(1) Faux votre accessoire trackEvent en tant que jest.fn() lorsque vous créez le wrapper.

(2) Appelez votre méthode personnalisée en utilisant wrapper.instance().customMethod();

(3) Assurez-vous que props.trackEvent aBeenCalledWith l'argument que vous avez mentionné.

Par exemple:

test('customMethod should call trackEvent with the correct argument', () => {
  const baseProps = {
    // whatever fake props you want passed to the component
    // ...
    trackEvent: jest.fn(),
  };
  const wrapper = shallow(<AdPage {...baseProps} />);

  wrapper.instance().customMethod();

  expect(baseProps.trackEvent).toHaveBeenCalledTimes(1);

  expect(baseProps.trackEvent).toHaveBeenCalledWith({
    category: 'eventCategory',
    action: 'eventAction',
    label: 'eventAction',
  });
});
13
nbkhope