React: TestUtils.renderIntoDocument renvoie «null» lorsqu'un composant fonctionnel valide est passé.

Créé le 10 avr. 2019 · 4Commentaires · Source: facebook/react

Voulez-vous demander une fonctionnalité ou signaler un bogue ?
Je souhaite signaler un bug.

Quel est le comportement actuel?
Actuellement, lorsque le composant fonctionnel valide est passé à TestUtils.renderIntoDocument, il renvoie un null et ne génère aucune erreur.

Démo
Ce comportement a été reproduit dans un bac à sable: https://codesandbox.io/s/1zpvll4j24

Vérifiez la console pour voir la sortie TestUtils.renderIntoDocument des exemples de composants préparés.

Solutions de contournement
La solution de contournement qui satisfait à la fois SFC et FC consiste à encapsuler le composant dans le conteneur:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

Quel est le comportement attendu?

Pour rendre un composant fonctionnel.
Dans le pire des cas - fournir une erreur.

Quelles versions de React sont concernées par ce problème?
Version de réaction: 16.8.6

Test Utils Question

Source

DeividasBakanas

Tous les 4 commentaires

Les composants fonctionnels n'ont pas de instances , alors à quoi vous attendez-vous

TestUtils.renderIntoDocument(<FCCounter/>)

rendre?

De plus, de manière générale, pouvez-vous expliquer ce que vous essayez de faire? Vous pouvez utiliser forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle) pour accéder aux 'méthodes' internes, mais je suis curieux de savoir vous essayez de tester du tout.

threepointone le 11 avr. 2019

Après avoir appelé TestUtils.renderIntoDocument avec le composant classique, je suis entièrement activé pour atteindre son state , props et manipuler le composant en utilisant setState . Donc, ce que je m'attendais TestUtils.renderIntoDocument ce que state , props et setState .

J'essaye de tester des composants qui sont implémentés en tant que composants fonctionnels. L'objectif principal est de changer l'état du composant et de vérifier si l'état modifié correspond à l'état attendu par le test.

En cas de test, j'ai une condition préalable, que les composants doivent être testés tels quels et ne doivent pas être modifiés pour contenir le code spécifiquement à des fins de test. Ainsi, changer le composant lui-même pour utiliser forwardRef/useImperativeHandle n'est pas une option.

DeividasBakanas le 12 avr. 2019

@DeividasBakanas Les composants Function n'ont pas d'instances. Vous pouvez déclencher le bouton, ce qui mettrait à jour l'état via l'envoi d'un événement. À mon avis, c'est aussi une meilleure approche que d'essayer de mettre à jour impérativement l'instance renvoyée par TestUtils.renderIntoDocument (dans le cas des composants de classe).

trueadm le 13 avr. 2019

👍1

Comme @trueadm mentionné, nous ne recommandons pas de tester les détails d'implémentation du composant lui-même, et d'utiliser des accessoires / événements pour déclencher des mises à jour et faire des assertions sur la sortie du composant. Je pourrais recommander des bibliothèques comme react-testing-library https://github.com/kentcdodds/react-testing-library pour rendre cela un peu plus facile. Kent écrit également abondamment sur le sujet, recommande.

Clôture de ce problème car il s'agit plus d'une question d'utilisation que d'une demande de bogue / fonctionnalité.

threepointone le 15 avr. 2019

👍1

Cette page vous a été utile?

0 / 5 - 0 notes