web-dev-qa-db-fra.com

Comment faire un test unitaire React Composant shouldComponentUpdate, méthode

J'ai une méthode React Component qui implémente la méthode shouldComponentUpdate et j'aimerais la tester à l'unité. Idéalement, je pourrais changer un accessoire ou un état sur le composant d'une unité testez et vérifiez qu'il soit restitué ou non. J'utilise enzyme si cela aide.

unit-testingreactjsenzyme
21
Liron Yahdav

J'appellerais probablement shouldComponentUpdate directement.

Quelque chose comme

const comp = shallow(<Comp {...props} />)
const shouldUpdate = comp.instance().shouldComponentUpdate(nextProps, nextState)
expect(shouldUpdate).toBe(true/false)

Essayer de tester en déterminant si le composant est réellement rendu/n'a pas été rendu pose probablement plus de problèmes qu'il n'en vaut la peine; Je ne sais même pas comment tu ferais ça en utilisant une enzyme. Vous ne pouvez pas vraiment quitter la sortie rendue, car vous ne retourneriez probablement pas false de shouldComponentUpdate à moins que la sortie rendue ne soit la même qu'auparavant. Donc, déterminer si un rendu s'est produit ou non ne peut pas provenir uniquement de la sortie.

Tester en l'appelant directement me semble cependant très bien. Tant que vous faites confiance à React va utiliser correctement la valeur de retour shouldComponentUpdate (nous avons de plus gros problèmes si ce n'est pas le cas), c'est sûr.

36
TLadd

Vous ne voudrez probablement pas tester shouldComponentUpdate en tant que fonction isolée lorsque vous savez déjà quel est le résultat.

Comme il est mentionné dans la documentation vous pouvez utiliser setProps ou setState et c'est probablement - au moins pour moi - une meilleure approche pour attendre le résultat exact de votre composant lors de la mise à jour des valeurs associées.

Dans votre MyComponent.test.js

import { expect } from 'chai';
import sinon from 'sinon-sandbox';
import { shallow } from 'enzyme';

it('updates when changing state or props', () => {
  const wrapper = shallow(<MyComponent />);

  const shouldComponentUpdate = sinon.spy(MyComponent.prototype, 'shouldComponentUpdate');

  expect(shouldComponentUpdate).to.have.property('callCount', 0);

  wrapper.setProps({ propThatWillUpdateTheComp: 'foo' });

  // or in case you are testing component update in case of state change
  // wrapper.setState({ stateThatWillUpdateTheComp: 'bar' });

  expect(shouldComponentUpdate).to.have.property('callCount', 1);

  expect(shouldComponentUpdate.returned(true)).to.be.equal(true);

});
3
Jalal