Si desea saber cómo probar reaccionar, está en el lugar correcto. ¿De verdad sabes que tu código hace lo que se supone que debe hacer? ¿Lo has probado en el navegador? ¿Qué pasa si no lo has hecho, o no puedes probar todo, y se rompe en la producción?
Una biblioteca de pruebas es un grupo de utilidades que los desarrolladores utilizan para escribir pruebas individuales en los componentes de la aplicación. Algunas de las partes principales de una prueba son:
Descripción:
describe cuál es la prueba
Utilice / Render:
Utiliza el componente en un entorno donde se puede probar
Burlón:
Crea funciones de simulación, para que puedas revisar tus suposiciones.
En el transcurso de este artículo, voy a explorar algunos ejemplos de la biblioteca de pruebas de reacción para ayudarlo a comenzar con esta valiosa forma de mejorar la robustez de su producción de código, además de garantizar que su código no lanza Hasta cualquier sorpresa desagradable una vez que entra en producción.
¿Quieres más recursos útiles? Aquí hay un resumen de los mejores.
Herramientas de diseño web
Alrededor de eso te ayudará a trabajar más inteligente. O si necesita una máquina nueva, intente este rodeo de la
Las mejores computadoras portátiles para la programación.
. O si estás construyendo un nuevo sitio, es posible que necesites un gran
Creador de sitios web
.
01. Comenzar con reaccionar la biblioteca de pruebas
Voy a utilizar la aplicación de reacción de creación para esta demostración porque ya viene preconfigurado con la biblioteca de pruebas. Si está utilizando Gatsby o una configuración personalizada, puede haber alguna configuración que debe ejecutarse antes de comenzar a usar la biblioteca de pruebas.
Para comenzar, vamos a crear una nueva aplicación. Si ya tiene una versión reciente de NOde.js, puede ejecutar el siguiente comando sin instalar nada más a nivel mundial:
[sesenta y cinco]
npx create-react-app netmag-javascript-testing
02. Decidir qué probar.
Imagínenos que tenemos un componente simple, di un botón con algún estado. ¿Cuáles son algunas de las cosas que necesitan pruebas en un componente como este?
●
La aparición del componente:
No queremos que nada cambie inesperadamente después de que hemos escrito nuestro componente. Así que vamos a escribir una prueba de instantáneas para capturar cómo se hace. Luego, si algo cambia, lo veremos rápidamente sin una prueba manual o visual. Esto es ideal para los componentes que consisten en muchos componentes más pequeños: puede ver rápidamente cuando (y dónde) su apariencia ha sido afectada.
●
Las diferentes ramas que hacen:
Debido a que podríamos tener dos o más salidas diferentes, necesitamos probarlo, lo hace que todos ellos correctamente, no solo uno de ellos. Por lo tanto, necesitamos simular un evento de clic y tener otra prueba de instantáneas para la forma en que se realiza después de que se haya ejecutado esta sucursal del código.
●
Esas funciones se llaman como se espera:
Queremos asegurarnos de que el código que escribimos para llamar a otra función funciona, ya que asumimos que lo hará. Pero como esa función es una dependencia externa, no queremos probar eso aquí. Nuestras pruebas deben encapsular solo la funcionalidad que queremos que ellos.
Vamos a escribir nuestra primera prueba. Crea un nuevo archivo llamado
MyComponent.Unit.test.js
en la misma carpeta que el componente. Al agregar Test.js al final, será elegido automáticamente por la biblioteca de pruebas. Los contenidos de ese archivo están a continuación:
[sesenta y cinco]
Importar reaccionar de 'reaccionar'
Importar {Render} de '@ Testing-Biblioteca / Reaccionar'
Importar MyComponent de './mycomponent'
Describe ('The & lt; MyComponent / & GT;', () = & gt; {
// las pruebas van aquí
})
Lo primero en lo que quiero llamar su atención es el
describir()
Función, que toma dos argumentos: la primera es una cadena que puede usar para describir mejor, como una cadena de texto, lo que va a hacer su prueba. En nuestro caso, simplemente hemos dicho que debería rendirlo. Esto es muy útil cuando alguien más mira su código o tiene que recordar lo que hizo en una etapa posterior. La escritura de buenas declaraciones de describa es una forma de documentación del código y otra buena razón para escribir pruebas.
El segundo argumento son tus pruebas. los
describir()
La función ejecutará todas estas pruebas una después del otro.
[sesenta y cinco]
04. Usa la función de limpieza
Vamos a introducir una función de ayuda llamada
antes de que ()
. Tenemos que usar esto porque cada vez que hacemos algo con el componente, queremos una copia fresca sin los accesorios que previamente habíamos pasado a que aún existe en el componente. O podríamos necesitar reinvertir el componente:
antes de que ()
Lo hace para nosotros y podemos pasarlo la función de limpieza.
[sesenta y cinco]
Importar {Render, Limpieza} de '@ Testing-Biblioteca / Reaccionar'
...
describir ('El componente debe rendir', () = & gt; {
antes de la limpieza
}
En este paso, vamos a 'montar' nuestro componente (o hacerlo).
[sesenta y cinco]
Describa ('El componente debe rendir', () = & gt; {
antes de la limpieza
('Renders con los accesorios básicos', () = & gt; {
Render (& lt; MyComponent / & GT;)
})
}
Este render nos da acceso a todas las propiedades renderizadas del componente compilado. Podría ser bueno dejar caer esto en un
console.log ()
Así que puedes ver más claramente lo que hace.
Si lo hace, verá que hay algunas propiedades útiles que podemos aprovechar aquí. Voy a hacer una afirmación (hacer una declaración de prueba) y probarlo extrayendo el contenedor. El contenedor 'contiene' los nodos DOM (todos los HTML) asociados con el componente.
Ahora tenemos acceso al contenedor, ¿cómo puedo decir que se representa de acuerdo con mi aseveración? Añadiendo una prueba de instantáneas.
Piense en una instantánea como una fotografía. Se necesita una instantánea de nuestro componente en un punto específico en el tiempo. Luego, cuando hacemos alteraciones al código, podemos ver si aún coincide con la instantánea original. Si lo hace, podemos estar seguros de que nada ha cambiado en el componente. Sin embargo, si no lo hace, podríamos haber descubierto un problema que se originó en otro componente, uno que podríamos no haber visto anteriormente:
[sesenta y cinco]
06. Pruebas de prueba
Los accesorios, o propiedades, de un componente pueden ser probados con instantáneas, también. Prueba de los diferentes accesorios que proporciona a su componente le dará mayor cobertura y confianza. Nunca se sabe cuándo un requisito se refiere a los accesorios de su componente, se refactores y la salida final cambiará.
Agregue el siguiente objeto a la parte superior de su archivo:
Definimos las propiedades en un objeto y luego usamos el operador de distribución (tres puntos seguidos por el nombre del objeto:
... lightproperties)
Porque solo podemos pasar un argumento en cuando rindemos de esta manera. También es útil ver qué propiedades estás pasando aislando:
[sesenta y cinco]
('Haz clic en los accesorios básicos', () = & gt; {
const {contenedor} = render (& lt; miccomponent / & gt;
)
esperar (contenedor) .tomatchsnapshot ()
})
('Renders con la versión de la versión ligera', () = & gt; {
const {contenedor} = render (
& lt; MyComponent {... lightproperties} / & gt;
)
esperar (contenedor) .tomatchsnapshot ()
})
07. Cambios de prueba en la UI.
Imagine Nuestro componente tiene un botón y desea asegurarse de que algo suceda cuando se haga clic en el botón. Podría pensar que desea probar el estado de la solicitud; Por ejemplo, podría ser tentado a probar que el estado ha actualizado. Sin embargo, ese no es objeto de estas pruebas.
Esto nos introduce a un concepto importante en el uso de una biblioteca de pruebas: no estamos aquí para probar el estado o la forma en que funciona nuestro componente. Estamos aquí para probar cómo la gente va a usar el componente y que cumple con sus expectativas.
Entonces, si el estado ha actualizado o no es inmaterial; Lo que queremos probar es cuál es el resultado de esa prensa de botones.
Imaginemos que estamos probando el resultado de una función que cambia la UI del modo oscuro al modo de luz. Aquí está el componente:
¿Notaste que agregamos el nuevo atributo?
Data-test
al botón? Así es como podrías probar eso. Primero, importe una nueva función, FUCHEVENT de la biblioteca de pruebas:
[sesenta y cinco]
Importar {Limpieza,
FUCHEVENT,
hacer
} De '@ Testing-biblioteca / reacción'
Podemos usar esa función para probar, hay cambios en la UI y que esos cambios son consistentes:
[sesenta y cinco]
('Haz clic en los accesorios básicos', () = & gt; {
const {contenedor} = render (& lt; togglebutton / & gt;
)
esperar (contenedor) .tomatchsnapshot ()
})
('Haz clic en la UI de la luz en el clic', () = & gt; {
const {contenedor, getbytestid} = render (& lt; togglebutton / & gt;)
FurEevent.Hick (GetBytestid ('Mode-Toggle'))
esperar (contenedor) .tomatchsnapshot ()
})
Esto es genial: no tenemos que irnos manualmente al sitio y mirar alrededor, luego hacer clic en el botón y mirar alrededor de una segunda vez, durante la cual, podría admitir, es probable que lo olvides. Ahora podemos tener confianza en que, dada la misma entrada, podemos esperar la misma salida en nuestro componente.
Cuando se trata de identificaciones de prueba, personalmente me disgusto usar
Data-test
Para encontrar algo en el Dom. Después de todo, el objeto de las pruebas es imitar lo que el usuario está haciendo y para probar lo que sucede cuando lo hacen.
Data-test
Se siente como un poco de trampa, aunque los datos de datos probablemente serán útiles para su ingeniero de control de calidad (consulte el boxut el papel de los ingenieros de garantía de calidad).
En su lugar, podríamos usar
getbytext ()
y pasar en el texto de nuestro botón. Ese método sería mucho más específico de comportamiento.
[sesenta y cinco]
08. Mock y espía la función.
A veces, podríamos necesitar probar una llamada a una función, pero esa función está fuera del alcance de la prueba. Por ejemplo, tengo un módulo separado que contiene una función que calcula el valor de PI a un cierto número de decimales.
No necesito probar cuál es el resultado de ese módulo. Necesito probar que mi función hace como se esperaba. Para obtener más información sobre por qué es así, consulte la unidad de caja y las pruebas de integración. En este caso, podríamos "simular" esa función:
La función
tohavencalledtimedtimed ()
es una de las muchas funciones de ayuda en la biblioteca de pruebas que nos permiten
Para probar la salida de las funciones. Esto nos permite no solo alcanzar nuestras pruebas solo al módulo que queremos probar, sino que también significa que podemos "espiar" o ver cuál hace nuestra función cuando llama esa función.
Las pruebas de escritura pueden parecer un poco desalentador para empezar. Espero que este tutorial le haya dado un poco más de confianza para probarlo. Desde que comencé a escribir pruebas para mis aplicaciones, realmente no puedo volver: puedo descansar más fácil, sabiendo que me voy detrás de un legado mucho mejor para aquellos que usarán mi trabajo en el futuro.
Recuerde, si está construyendo un sitio complejo, querrá obtener su
Alojamiento web
SERVICIO DE SERVICIO EN. Y si ese sitio es probable que contenga muchos activos, almacenándolos confiables
almacenamiento en la nube
Es crucial.
Este contenido apareció originalmente en
revista neta
. Leer más de nuestros
Artículos de diseño web aquí.
.
Leer más:
HTML6: ¿Qué es y cuándo llega?
Escribe código HTML más rápido
Diseño de la aplicación móvil: Guía de un principiante
Los orígenes del arte de Pin-Up se pueden rastrear de regreso a finales del siglo XIX, pero se hizo más extendida en las décadas de 1940 y 1950, a menudo apareciendo en carteles y calendar..
En este tutorial, pasaremos algunos principios básicos que ayudarán a comunicar la idea de a gran escala en sus propias piezas. Estoy usando lápices y aceites para este tutorial, pero tamb..
