Utiliser Jest pour espionner l'appel de méthode dans componentDidMount

j'ai récemment voulu tester qu'une méthode personnalisée est conditionnellement appelée dans la méthode componentDidMount d'un composant React.

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

j'utilise Jest comme cadre de test, qui inclut jest.fn() pour les moqueurs/espions. J'ai lu que ce serait assez banal de tester avec Sinon, en faisant quelque chose comme ceci:

sinon.spy(Component.prototype, "methodName");
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

je suis en train de recréer ce avec la Blague de la sorte:

Component.prototype.methodName = jest.fn();
const wrapper = mount(<Component {...props} />);
expect(wrapper.instance().methodName).toHaveBeenCalled();

ce code échoue et envoie l'erreur suivante:

jest.fn() value must be a mock function or spy.
Received:
  function: [Function bound mockConstructor]

est-il possible de tester cette fonctionnalité avec Jest? Et si oui, comment?

20
demandé sur Andreas Köberle 2017-04-06 06:16:10

2 réponses

la clé est d'utiliser la méthode des tests spyOn . Il devrait être comme ceci:

const spy = jest.spyOn(Component.prototype, 'methodName');
const wrapper = mount(<Component {...props} />);
wrapper.instance().methodName();
expect(spy).toHaveBeenCalled();

comme trouvé ici par exemple: Test si la fonction est appelée réagir et l'enzyme

s'il vous plaît noter, Il est également de la meilleure pratique pour effacer la fonction espionnée après chaque essai

let spy

afterEach(() => {
  spy.mockClear()
})

https://facebook.github.io/jest/docs/en/jest-object.html#jestclearallmocks

35
répondu Jonathan 2017-10-20 15:19:10

je sais qu'il est un peu tard, mais je suis tombé sur cela et je suggérerais que pour tester componentDidMount initie l'appel à votre méthode emboîtée que votre test devrait ressembler à quelque chose comme:

Module

componentDidMount() {
  if (this.props.initOpen) {
    this.methodName();
  }
}

Test - Bon

it('should call methodName during componentDidMount', () => {
    const methodNameFake = jest.spyOn(MyComponent.prototype, 'methodName');
    const wrapper = mount(<MyComponent {...props} />);
    expect(methodNameFake).toHaveBeenCalledTimes(1);
});

si vous appelez componentDidMount alors votre affirmation que methodName a été appelé via componentDidMount est plus valide.

Test - Mauvais

it('should call methodName during componentDidMount', () => {
    const spy = jest.spyOn(Component.prototype, 'methodName');
    const wrapper = mount(<Component {...props} />);
    wrapper.instance().methodName();
    expect(spy).toHaveBeenCalled();
}

en écrivant le test comme ceci - vous appelez la méthode et ensuite affirmer qu'il a été appelé. Qui, bien sûr, il vous sera donné juste appelé.

10
répondu hloughrey 2017-12-12 09:05:41