Comment définir l'état dans React-Testing-Library
Aperçu:
- J'ai refactorisé les tests de script avant d'utiliser Enzyme pour tester, mais maintenant, je veux utiliser @ testing-library/react
Problème:
- Je ne trouve pas de solution pour setState dans @ testing-library/react
L'utilisation de setState est une approche dangereuse quelle que soit la bibliothèque de tests utilisée.
- Cela dépend des détails de l'implémentation (par exemple, les noms de propriété à l'intérieur de l'état), il devient donc beaucoup plus difficile de maintenir les tests - plus de tests à modifier, facile à faire échouer lorsque l'application fonctionne bien, etc.
- Vous ne pouvez pas appeler cela une fois que vous avez converti le composant de classe en composant fonctionnel avec des crochets. Vous dépendez donc encore plus des détails de mise en œuvre.
- Et enfin, la manipulation directe de l'État peut se terminer par un état que vous n'obtiendrez jamais dans le monde réel. Cela signifie que votre composant sera cassé car il est impossible d'atteindre un état mais vos tests avec initialisation directe seront très bien.
Alors quoi de mieux? Fournissez les accessoires, modifiez les accessoires, appelez les accessoires (wrapper.find('button').filter(button => button.text() === 'Cancel').props().onClick() pour l'enzyme, fireEvent.click(getByText(/Cancel/i)) pour RTL) et vérifiez ce qui est rendu.
De cette façon, vos tests seront plus courts, plus réels et nécessiteront moins de modifications après la mise à jour du composant sous test.