Accès à l'état d'un composant fonctionnel avec React Hooks when Testing with Enzyme
Je me demandais comment tester un changement d'état des composants fonctionnels avec le crochet useState avec Enzyme. Habituellement, le test serait quelque chose comme expect(wrapper.state()).toEqual(expectedState) mais j'obtiens l'erreur:
ReactWrapper::state() can only be called on class components
Je sais que les Hooks sont encore au stade alpha et des choses comme shallow ne fonctionnent toujours pas mais je me demandais s'il y avait encore un moyen d'y parvenir?
Vous devez éviter de tester les détails de mise en œuvre. Au lieu de cela, testez si le comportement du composant, lors du déclenchement d'une action qui mettrait à jour votre état, se comporte comme prévu.
Je pense que vous ne devriez pas contrôler l'état d'un composant. Les tests unitaires doivent être des entrées et sorties de contrôle.
Comme ça:
Donnez le statut prop prop à FormComponent expect . Le bouton send-user-data existe.
Si vous vérifiez le code source Enyzme ici . Vous pouvez voir la vérification des types d'instance et de classe. Les composants fonctionnels nodeTypes ne sont pas égaux à la classe et n'ont pas d'instance.
Vous pouvez utiliser https://github.com/etiennedi/enzyme-wait pour attendre les éléments asynchrones.
Votre test peut être comme ça.
Simulez l'événement de clic . Le bouton send-user-data attend (son. SetTimeout, promesse ou xhr) et attend l'utilisateur retourné.