web-dev-qa-db-fra.com

Utilisation de Jest pour espionner un appel de méthode dans composantDidMount

J'ai récemment voulu tester le fait qu'une méthode personnalisée est appelée conditionnellement 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 simulacres/espions. J'ai lu que ce serait assez simple à tester avec Sinon, en procédant comme suit:

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

J'essaie de recréer cela avec Jest comme ceci:

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

Ce code échoue et génère 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?

javascriptreactjstestingjestjsenzyme
35
seansean11

La clé utilise la méthode jests spyOn. Cela devrait être comme ça:

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

Tel que trouvé ici, par exemple: Testez si la fonction est appelée réagir et enzyme

Remarque: , il est également recommandé de supprimer la fonction espionnée après chaque test .

let spy

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

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

57
Jonathan

Je sais que c'est un peu tard, mais je suis tombé sur cette idée et suggérerais que tester componentDidMount initie l'appel de votre méthode imbriquée pour que votre test ressemble à 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, l'affirmation que methodName a été appelée via componentDidMount est plus valide.

Test - Bad

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 vous affirmez qu'elle a été appelée. Ce qui bien sûr vous l'aura donné vient de l'appeler.

15
hloughrey