Utilidades de prueba de enlaces React simples y completas que fomentan buenas prácticas de prueba.
Si está utilizando la versión actual de react-testing-library
, reemplace
import { renderHook } from '@testing-library/react-hooks'
con
import { renderHook } from '@testing-library/react'
Una vez reemplazado, @testing-library/react-hooks
se puede desinstalar.
Como parte de los cambios para React 18, se ha decidido que la API renderHook
proporcionada por esta biblioteca se incluirá como adiciones oficiales tanto react-testing-library
(PR) como react-native-testing-library
(PR) con La intención es proporcionar una implementación más coherente y consistente para nuestros usuarios.
Tenga paciencia mientras finalizamos estos cambios en las respectivas bibliotecas de pruebas. Mientras tanto, puedes instalar @testing-library/react@^13.1
useCounter.js
useCounter.test.js
Estás escribiendo un increíble gancho personalizado y quieres probarlo, pero tan pronto como lo llamas ves el siguiente error:
Violación invariante: los ganchos solo se pueden llamar dentro del cuerpo de un componente de función.
Realmente no desea escribir un componente únicamente para probar este enlace y tener que averiguar cómo va a activar todas las formas en que se puede actualizar el enlace, especialmente dadas las complejidades de cómo ha conectado todo. .
La react-hooks-testing-library
le permite crear un arnés de prueba simple para los ganchos de React que maneja su ejecución dentro del cuerpo de un componente de función, además de proporcionar varias funciones de utilidad útiles para actualizar las entradas y recuperar las salidas de su increíble gancho personalizado. Esta biblioteca tiene como objetivo proporcionar una experiencia de prueba lo más cercana posible al uso nativo de su gancho desde un componente real.
Al utilizar esta biblioteca, no tiene que preocuparse por cómo construir, renderizar o interactuar con el componente de reacción para probar su gancho. Puede utilizar el gancho directamente y hacer valer los resultados.
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 )
} )
Se puede encontrar un uso más avanzado en la documentación.
npm install --save-dev @testing-library/react-hooks
react-hooks-testing-library
no viene incluido con una versión de react
que le permita instalar la versión específica con la que desea realizar la prueba. Tampoco viene instalado con un renderizador específico; actualmente admitimos react-test-renderer
y react-dom
. Solo necesita instalar uno de ellos; sin embargo, si tiene ambos instalados, usaremos react-test-renderer
como predeterminado. Para obtener más información, consulte los documentos de instalación. Generalmente, las versiones instaladas para react
y el renderizador seleccionado deben tener versiones coincidentes:
npm install react@^16.9.0
npm install --save-dev react-test-renderer@^16.9.0
NOTA: La versión mínima admitida de
react
,react-test-renderer
yreact-dom
es^16.9.0
.
Consulte la referencia de API.
Gracias a estas maravillosas personas (tecla emoji):
Michael Peyper ? ? ? | plaza-otofu | Patricio P. Henley ? ? | Matheus Marques | Dhruv Patel ? ? | Nathaniel Tucker ? ? | Serguéi Grischenko ? |
Josep M Sobrepere | Marcel Tinner | daniel k. ? | Vince Malone | Sebastián Weber | cristian gill | JavaScript Joe ✅ |
Sara Dayan ? | Roman Gusev | Adam Seckel | keiya sasaki | Hu Chen | josh ? ? | Na'aman Hirschfeld |
Salón Braydon | Jacob MG Evans | tigre abrodi | Amr A. Mohamed | Juhana Jauhiainen | Jens Meindertsma | Marco Moretti ? |
Martín v. | erozak | Nick McCurdy ? | Arya | entumecido86 | Alex joven ? | ben lambert |
David Cho-Lerat | Evan Harmon | Jason Brown | Kah Wee Teng | Leonid Shagabutdinov | carnicero levi | Michele Settepani |
Sam | Tanay Pratap | Tom Rees-Herdman | iqbal125 | acantiladozhaobupt ? | jon koops | Jonathan Peyper ? |
Sean Baines | miguel vasin | Aleksandar Grbic | jonathan holmes | Michael De Boey ? | Antón Zinoviev ? | marianna-exeletar ? |
Matan Borenkraout ? | andyrooger | Bryan Wain ? ? | Roberto Nieve | Chris Chen | masioso | Laishuxin |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Se aceptan aportes de cualquier tipo!
¿Buscas contribuir? Busque la etiqueta Good First Issue.
Presente un problema por errores, documentación faltante o comportamiento inesperado.
Ver errores
Presente un problema para sugerir nuevas funciones. Vote las solicitudes de funciones agregando un ?. Esto ayuda a los mantenedores a priorizar en qué trabajar.
Ver solicitudes de funciones
Si tiene preguntas relacionadas con el uso de la biblioteca, puede plantear el problema aquí o visitar una comunidad de soporte:
MIT