Einfache und vollständige React-Hooks-Testdienstprogramme, die gute Testpraktiken fördern.
Wenn Sie die aktuelle Version der react-testing-library
verwenden, ersetzen Sie sie
import { renderHook } from '@testing-library/react-hooks'
mit
import { renderHook } from '@testing-library/react'
Nach dem Ersetzen können @testing-library/react-hooks
deinstalliert werden.
Im Rahmen der Änderungen für React 18 wurde beschlossen, dass die von dieser Bibliothek bereitgestellte renderHook
-API stattdessen als offizielle Ergänzung sowohl in react-testing-library
(PR) als auch react-native-testing-library
(PR) aufgenommen wird Die Absicht besteht darin, unseren Benutzern eine kohärentere und konsistentere Implementierung zu bieten.
Bitte haben Sie etwas Geduld, während wir diese Änderungen in den jeweiligen Testbibliotheken abschließen. In der Zwischenzeit können Sie @testing-library/react@^13.1
installieren
useCounter.js
useCounter.test.js
Sie schreiben einen fantastischen benutzerdefinierten Hook und möchten ihn testen, aber sobald Sie ihn aufrufen, wird die folgende Fehlermeldung angezeigt:
Invariante Verletzung: Hooks können nur innerhalb des Hauptteils einer Funktionskomponente aufgerufen werden.
Sie möchten nicht wirklich eine Komponente schreiben, die ausschließlich zum Testen dieses Hooks dient, und müssen herausfinden, wie Sie all die verschiedenen Möglichkeiten zur Aktualisierung des Hooks auslösen, insbesondere angesichts der Komplexität, wie Sie das Ganze miteinander verbunden haben .
Mit der react-hooks-testing-library
können Sie eine einfache Testumgebung für React-Hooks erstellen, die deren Ausführung im Hauptteil einer Funktionskomponente übernimmt und außerdem verschiedene nützliche Hilfsfunktionen zum Aktualisieren der Eingaben und zum Abrufen der Ausgaben Ihres Amazing bereitstellt benutzerdefinierter Haken. Ziel dieser Bibliothek ist es, ein Testerlebnis zu bieten, das der nativen Verwendung Ihres Hooks innerhalb einer realen Komponente so nahe wie möglich kommt.
Wenn Sie diese Bibliothek verwenden, müssen Sie sich nicht darum kümmern, wie Sie die Reaktionskomponente erstellen, rendern oder mit ihr interagieren, um Ihren Hook zu testen. Sie können den Hook einfach direkt verwenden und die Ergebnisse bestätigen.
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 useCounter
useCounter.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 )
} )
Weitere Informationen zur erweiterten Verwendung finden Sie in der Dokumentation.
npm install --save-dev @testing-library/react-hooks
react-hooks-testing-library
wird nicht mit einer react
-Version geliefert, damit Sie die spezifische Version installieren können, gegen die Sie testen möchten. Außerdem ist kein bestimmter Renderer vorinstalliert. Wir unterstützen derzeit react-test-renderer
und react-dom
. Sie müssen nur einen davon installieren. Wenn Sie jedoch beide installiert haben, verwenden wir standardmäßig react-test-renderer
. Weitere Informationen finden Sie in den Installationsdokumenten. Im Allgemeinen sollten die installierten Versionen für react
und der ausgewählte Renderer übereinstimmende Versionen haben:
npm install react@^16.9.0
npm install --save-dev react-test-renderer@^16.9.0
HINWEIS: Die unterstützte Mindestversion von
react
,react-test-renderer
undreact-dom
ist^16.9.0
.
Siehe die API-Referenz.
Der Dank geht an diese wunderbaren Menschen (Emoji-Taste):
Michael Peyper ? ? ? | Otofu-Quadrat | Patrick P. Henley ? ? | Matheus Marques | Dhruv Patel ? ? | Nathaniel Tucker ? ? | Sergej Grischtschenko ? |
Josep M Sobrepere | Marcel Tinner | Daniel K. ? | Vince Malone | Sebastian Weber | Christian Gill | JavaScript Joe ✅ |
Sarah Dayan ? | Roman Gusev | Adam Seckel | Keiya Sasaki | Hu Chen | Josh ? ? | Na'aman Hirschfeld |
Braydon Hall | Jacob MG Evans | Tiger Abrodi | Amr A.Mohammed | Juhana Jauhiainen | Jens Meindertsma | Marco Moretti ? |
Martin V. | Erozak | Nick McCurdy ? | Arya | taub86 | Alex Young ? | Ben Lambert |
David Cho-Lerat | Evan Harmon | Jason Brown | KahWee Teng | Leonid Shagabutdinov | Levi Metzger | Michele Settepani |
Sam | Tanay Pratap | Tom Rees-Herdman | iqbal125 | Cliffzhaobupt ? | Jon Koops | Jonathan Peyper ? |
Sean Baines | Michail Wasin | Aleksandar Grbic | Jonathan Holmes | Michael De Boey ? | Anton Sinowjew ? | marianna-exelate ? |
Matan Borenkraout ? | andyrooger | Bryan Wain ? ? | Robert Schnee | Chris Chen | Masious | Laishuxin |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
Möchten Sie einen Beitrag leisten? Achten Sie auf das Label „Good First Issue“.
Bitte melden Sie ein Problem bei Fehlern, fehlender Dokumentation oder unerwartetem Verhalten.
Siehe Fehler
Bitte reichen Sie ein Problem ein, um neue Funktionen vorzuschlagen. Stimmen Sie über Funktionswünsche ab, indem Sie ein ? hinzufügen. Dies hilft Betreuern, Prioritäten zu setzen, woran sie arbeiten müssen.
Siehe Funktionsanfragen
Bei Fragen zur Nutzung der Bibliothek können Sie das Problem hier äußern oder eine Support-Community besuchen:
MIT