react hooks testing library
v8.0.1
Des utilitaires de test de hooks React simples et complets qui encouragent les bonnes pratiques de test.
Si vous utilisez la version actuelle de react-testing-library , remplacez
import { renderHook } from '@testing-library/react-hooks'avec
import { renderHook } from '@testing-library/react' Une fois remplacé, @testing-library/react-hooks peut être désinstallé.
Dans le cadre des modifications apportées à React 18, il a été décidé que l'API renderHook fournie par cette bibliothèque serait plutôt incluse en tant qu'ajouts officiels à la fois à react-testing-library (PR) et react-native-testing-library (PR) avec l'intention étant de fournir une mise en œuvre plus cohérente et cohérente pour nos utilisateurs.
Veuillez être patient pendant que nous finalisons ces modifications dans les bibliothèques de tests respectives. En attendant, vous pouvez installer @testing-library/react@^13.1
useCounter.jsuseCounter.test.jsVous écrivez un superbe hook personnalisé et vous souhaitez le tester, mais dès que vous l'appelez, vous voyez l'erreur suivante :
Violation invariante : les hooks ne peuvent être appelés qu'à l'intérieur du corps d'un composant fonctionnel.
Vous ne voulez pas vraiment écrire un composant uniquement pour tester ce hook et devez déterminer comment vous allez déclencher toutes les différentes façons dont le hook peut être mis à jour, en particulier compte tenu de la complexité de la façon dont vous avez câblé le tout ensemble. .
La react-hooks-testing-library vous permet de créer un harnais de test simple pour les hooks React qui gère leur exécution dans le corps d'un composant fonctionnel, ainsi que de fournir diverses fonctions utilitaires utiles pour mettre à jour les entrées et récupérer les sorties de votre incroyable crochet personnalisé. Cette bibliothèque vise à fournir une expérience de test aussi proche que possible de l'utilisation native de votre hook à partir d'un composant réel.
En utilisant cette bibliothèque, vous n'avez pas à vous soucier de la façon de construire, de restituer ou d'interagir avec le composant React afin de tester votre hook. Vous pouvez simplement utiliser le hook directement et affirmer les résultats.
useCounter.js import { useState , useCallback } from 'react'
function useCounter ( ) {
const [ count , setCount ] = useState ( 0 )
const increment = useCallback ( ( ) => setCount ( ( x ) => x + 1 ) , [ ] )
return { count , increment }
}
export default useCounteruseCounter.test.js import { renderHook , act } from '@testing-library/react-hooks'
import useCounter from './useCounter'
test ( 'should increment counter' , ( ) => {
const { result } = renderHook ( ( ) => useCounter ( ) )
act ( ( ) => {
result . current . increment ( )
} )
expect ( result . current . count ) . toBe ( 1 )
} )Une utilisation plus avancée peut être trouvée dans la documentation.
npm install --save-dev @testing-library/react-hooks react-hooks-testing-library n'est pas fourni avec une version de react pour vous permettre d'installer la version spécifique avec laquelle vous souhaitez tester. Il n'est pas non plus installé avec un moteur de rendu spécifique, nous prenons actuellement en charge react-test-renderer et react-dom . Vous n'avez besoin d'en installer qu'un, cependant, si vous avez les deux installés, nous utiliserons react-test-renderer par défaut. Pour plus d’informations, consultez la documentation d’installation. Généralement, les versions installées pour react et le moteur de rendu sélectionné doivent avoir des versions correspondantes :
npm install react@^16.9.0
npm install --save-dev react-test-renderer@^16.9.0REMARQUE : La version minimale prise en charge de
react,react-test-rendereretreact-domest^16.9.0.
Voir la référence API.
Merci à ces personnes merveilleuses (clé emoji) :
Michael Peyper ? ? ? | place otofu | Patrick P. Henley ? ? | Matheus Marques | Dhruv Patel ? ? | Nathaniel Tucker ? ? | Sergueï Grishchenko ? |
Josep M Sobrepere | Marcel Tinner | Daniel K. ? | Vince Malone | Sébastien Weber | Christian Gil | Joe Javascript ✅ |
Sarah Dayan ? | Romain Gusev | Adam Seckel | Keiya Sasaki | Hu Chen | Josh ? ? | Naaman Hirschfeld |
Salle Braydon | Jacob MG Evans | Tigre Abrodi | Amr A.Mohammed | Juhana Jauhiainen | Jens Meindertsma | Marco Moretti ? |
Martin V. | Érozak | Nick McCurdy ? | Arya | engourdi86 | Alex Jeune ? | Ben Lambert |
David Cho-Lérat | EvanHarmon | Jason Brun | KahWee Teng | Léonid Chagabutdinov | Boucher Lévi | Michele Settepani |
Sam | Tanay Pratap | Tom Rees-Herdman | iqbal125 | falaisezhaobupt ? | Jon Koops | Jonathan Peyper ? |
Sean Baines | Mikhaïl Vassine | Alexandre Grbic | Jonathan Holmes | Michaël De Boey ? | Anton Zinoviev ? | marianna-exelate ? |
Matan Borenkraout ? | andyrooger | Bryan Wain ? ? | Robert Neige | Chris Chen | Masieux | Laishuxin |
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont les bienvenues !
Vous cherchez à contribuer ? Recherchez le label Good First Issue.
Veuillez signaler un problème pour des bogues, une documentation manquante ou un comportement inattendu.
Voir les bogues
Veuillez déposer un problème pour suggérer de nouvelles fonctionnalités. Votez sur les demandes de fonctionnalités en ajoutant un ?. Cela aide les responsables à prioriser les éléments sur lesquels travailler.
Voir les demandes de fonctionnalités
Pour les questions liées à l'utilisation de la bibliothèque, vous pouvez soulever un problème ici ou visiter une communauté d'assistance :
MIT
