Share
Lo que vas a crearProbar el código es una práctica confusa para muchos desarrolladores. Eso es comprensible porque escribir pruebas requiere más esfuerzo, tiempo y la capacidad de prever posibles casos de uso. Las empresas emergentes y los desarrolladores que trabajan en proyectos más pequeños generalmente prefieren ignorar las pruebas por completo debido a la falta de recursos y mano de obra.
Sin embargo, hay un par de razones por las que creo que debería probar sus componentes:
Reaccionar tampoco es diferente. Cuando toda la aplicación comienza a convertirse en una pila de componentes que son difíciles de mantener, las pruebas ofrecen estabilidad y consistencia. Escribir pruebas desde el primer día le ayudará a escribir mejor código, detectar errores con facilidad y mantener un mejor flujo de trabajo de desarrollo.
En este artículo, lo guiaré a través de todo lo que necesita saber para escribir pruebas para sus componentes React. También cubriré algunas de las mejores prácticas y técnicas mientras estamos en ello. Empecemos!
La prueba es el proceso de verificar que nuestra afirmaciones de prueba Son ciertos y se mantienen fieles durante toda la vida útil de la aplicación. Una afirmación de prueba es una expresión booleana que devuelve true a menos que haya un error en su código.
Por ejemplo, una afirmación podría ser algo tan simple como esto: "Cuando el usuario navega a /iniciar sesión, un modal con el id #iniciar sesión debe ser procesado. "Entonces, si resulta que arruinó el componente de inicio de sesión de alguna manera, la afirmación devolvería la falsa. Las afirmaciones no se limitan solo a lo que se representa, sino que también puede hacer afirmaciones sobre cómo responde la aplicación a las interacciones del usuario. otras acciones.
Hay muchas estrategias de prueba automatizadas que los desarrolladores front-end utilizan para probar su código. Limitaremos nuestra discusión a solo tres paradigmas de prueba de software que son populares con React: pruebas de unidad, pruebas funcionales y pruebas de integración.
La prueba de unidad es uno de los veteranos de prueba que todavía es popular en los círculos de prueba. Como su nombre lo indica, estará probando piezas individuales de código para verificar que funcionan de manera independiente como se esperaba. Debido a la arquitectura de componentes de React, las pruebas unitarias son un ajuste natural. También son más rápidos porque no tienes que confiar en un navegador.
Las pruebas unitarias lo ayudan a pensar en cada componente de forma aislada y a tratarlos como funciones. Las pruebas de unidad para un componente en particular deben responder las siguientes preguntas:
Las pruebas funcionales se utilizan para probar el comportamiento de una parte de su aplicación. Las pruebas funcionales generalmente se escriben desde la perspectiva de un usuario. Una parte de la funcionalidad generalmente no se limita a un solo componente. Puede ser un formulario completo o una página completa.
Por ejemplo, cuando está creando un formulario de registro, puede incluir componentes para los elementos del formulario, las alertas y los errores, si los hay. El componente que se procesa después de enviar el formulario también forma parte de esa funcionalidad. Esto no requiere un renderizador del navegador porque usaremos un DOM virtual en memoria para nuestras pruebas.
La prueba de integración es una estrategia de prueba en la que todos los componentes individuales se prueban en grupo. Las pruebas integradas intentan replicar la experiencia del usuario ejecutando las pruebas en un navegador real. Esto es considerablemente más lento que las pruebas funcionales y las pruebas unitarias porque cada conjunto de pruebas se ejecuta en un navegador en vivo.
En React, las pruebas unitarias y las pruebas funcionales son más populares que las pruebas de integración porque son más fáciles de escribir y mantener. Eso es lo que cubriremos en este tutorial..
Necesita ciertas herramientas y dependencias para comenzar con las pruebas unitarias y funcionales de su aplicación React. Los he enumerado a continuación.
Jest es un marco de prueba que requiere una configuración cero y, por lo tanto, es fácil de configurar. Es más popular que los marcos de prueba como Jasmine y Mocha porque está desarrollado por Facebook. Jest también es más rápido que el resto porque utiliza una técnica inteligente para paralelizar las pruebas entre los trabajadores. Aparte de eso, cada prueba se ejecuta en un entorno de espacio aislado para evitar conflictos entre dos pruebas sucesivas.
Si está utilizando la aplicación crear-reaccionar, se entrega con Jest. Si no es así, es posible que deba instalar Jest y algunas otras dependencias. Puedes leer más sobre esto en la página de documentación oficial de Jest..
Incluso si está utilizando create-react-app, necesitará instalar este paquete para generar instantáneas. La prueba de instantáneas es una parte de la biblioteca Jest. Por lo tanto, en lugar de representar la IU de toda la aplicación, puede usar el renderizador de prueba para generar rápidamente una salida HTML serializable desde el DOM virtual. Puedes instalarlo de la siguiente manera:
hilo añadir react-test-renderer
reaccion-dom / test-utils consiste en algunas de las utilidades de prueba proporcionadas por el equipo React. Alternativamente, puedes usar el paquete Enzyme lanzado por Airbnb. La enzima es mucho mejor que ReactTestUtils porque es fácil de afirmar, manipular y atravesar la salida de sus componentes React. Comenzaremos nuestras pruebas con React utils y luego realizaremos la transición a Enzyme más adelante..
Para instalar Enzyme, ejecute el siguiente comando.
hilo agregar enzima enzima-adaptador-reaccionar-16
Agrega el código a src / SetupTests.js.
importar configure desde 'enzima'; Importar adaptador desde 'enzima-adaptador-reaccionar-16'; configure (adapter: new Adapter ());
Hay más información sobre esto en la sección Componentes de prueba de la página crear-reaccionar-aplicación.
Escribiremos pruebas para una aplicación de demostración simple que muestra una vista maestra / detallada de una lista de productos. Puede encontrar la aplicación de demostración en nuestro repositorio de GitHub. La aplicación consta de un componente contenedor conocido como ProductContainer y tres componentes de presentación: Lista de productos, Detalles del producto, y ProductHeader.
. ├── package-lock.json ├── package.json ├── public │ ├── index.html └── └── manifest.json ├── src │ componentes │ App.js │ │ ├── ProductContainer.js │ │ ├── ProductDetails.jsx │ ProductHeader.js │ │ ProductList.jsx │ ├── index.js │ └── style.css
Esta demostración es un buen candidato para pruebas de unidad y pruebas funcionales. Puede probar cada componente de forma aislada y / o probar la funcionalidad del listado de productos como un todo.
Una vez que hayas descargado la demo, crea un directorio con el nombre __tests__dentro / src / components /. A continuación, puede almacenar todos los archivos de prueba relacionados con esta funcionalidad dentro del __tests__ directorio. Los evaluadores suelen nombrar sus archivos de prueba como .spec.js o .test.js-por ejemplo, ProductHeader.test.js o ProductHeader.spec.js.
Crear un ProductHeader.test.js archivo si no lo ha hecho ya. Aquí es cómo se verán básicamente nuestras pruebas:
Accentsconagua
Describe ('ProductHeader', () => it ('pass test', () => expect (true) .toBeTruthy ();) it ('failing test', () => expect (false) .toBeTruthy ();))El conjunto de pruebas comienza con un describir bloque, que es una función Jest global que acepta dos parámetros. El primer parámetro es el título del conjunto de pruebas, y el segundo parámetro es la implementación real. Cada eso() en un conjunto de pruebas corresponde a una prueba o una especificación. Una prueba contiene una o más expectativas que verifican el estado del código.
espera (verdadero) .toBeTruthy ();
En Jest, una expectativa es una afirmación que devuelve verdadero o falso. Cuando todas las afirmaciones en una especificación son verdaderas, se dice que pasan. De lo contrario, se dice que la prueba falla..
Por ejemplo, hemos creado dos especificaciones de prueba. El primero debería pasar, y el segundo debería fallar..
Nota: toBeTruthy () Es un matcher predefinido. En Jest, cada comparador hace una comparación entre el valor esperado y el valor real y devuelve un valor booleano. Hay muchos más matchers disponibles, y los veremos en un momento..
create-react-app ha configurado todo lo que necesita para ejecutar el conjunto de pruebas. Todo lo que necesitas hacer es ejecutar el siguiente comando:
prueba de hilo
Debería ver algo como esto:
Para hacer pasar la prueba que falla, tienes que reemplazar el toBeTruthy () emparejador con toBeFalsy ().
espera (falso) .toBeFalsy ();
Eso es!
Como se mencionó anteriormente, Jest usa comparadores para comparar valores. Puede usarlo para verificar la igualdad, comparar dos números o cadenas y verificar la veracidad de las expresiones. Aquí está la lista de los emparejadores populares disponibles en Jest.
ser();toBeNull ()toBeDefined ()toBeUndefined ()toBeTruthy ()toBeFalsy ()toBeGreaterThan ()toBeLesserThan ()toMatch ()contener()Esto es sólo un gusto. Puede encontrar todos los emparejadores disponibles en los documentos de referencia..
Primero, estaremos escribiendo un par de pruebas para el ProductHeader componente. Abre el Archivo ProductHeader.js si no lo has hecho ya.
importar React, Componente desde 'reaccionar'; clase ProductHeader extiende el Componente render () return (Página de listado de productos
); ; exportación predeterminada ProductHeader;
¿Tiene curiosidad por saber por qué usé un componente de clase aquí en lugar de un componente funcional? La razón es que es más difícil probar los componentes funcionales con ReactTestUtils. Si tienes curiosidad por saber por qué, esta discusión de desbordamiento de pila tiene la respuesta.
Podríamos escribir una prueba con los siguientes supuestos:
h2 etiqueta.h2 etiqueta debe tener una clase llamada título.Para representar un componente y recuperar nodos DOM relevantes, necesitamos ReactTestUtils. Elimine las especificaciones ficticias y agregue el siguiente código:
importar reaccionar desde 'reaccionar'; importar ReactTestUtils desde 'react-dom / test-utils'; importar lista de productos desde '... / lista de productos'; describe ('ProductHeader Component', () => it ('tiene una etiqueta h2', () => // Prueba aquí); está 'dentro de una clase de título', () => / / Prueba aquí))Para comprobar la existencia de un h2 nodo, primero tendremos que convertir nuestros elementos React en un nodo DOM en el documento. Puede hacerlo con la ayuda de algunas de las API exportadas por ReactTestUtils. Por ejemplo, para hacer nuestro
const component = ReactTestUtils.renderIntoDocument ();
A continuación, puede extraer el h2 etiqueta del componente con la ayuda de findRenderedDOMComponentWithTag ('nombre de etiqueta'). Comprueba todos los nodos secundarios y encuentra el nodo que coincide con el nombre de etiqueta.
Aquí está toda la especificación de prueba.
it ('tiene una etiqueta h2', () => const component = ReactTestUtils.renderIntoDocument (Intente guardarlo, y su corredor de prueba debería mostrarle que la prueba ha pasado. Eso es algo sorprendente porque no tenemos una esperar() Declaración como en nuestro ejemplo anterior. La mayoría de los métodos exportados por ReactTestUtils tener expectativas incorporadas en ellos. En este caso particular, si la utilidad de prueba no encuentra el h2 etiqueta, lanzará un error y las pruebas fallarán automáticamente.
Ahora, intenta crear el código para la segunda prueba. Puedes usar findRenderedDOMcomponentWithClass () para comprobar si hay algún nodo con la clase 'título'.
it ('tiene una clase de título', () => const component = ReactTestUtils.renderIntoDocument (¡Eso es! Si todo va bien, deberías ver los resultados en verde..
Aunque acabamos de escribir dos especificaciones de prueba, hemos cubierto mucho terreno en el proceso. En el siguiente artículo, escribiremos algunas pruebas completas para nuestra página de listado de productos. También reemplazaremos ReactTestUtils con Enzyme. ¿Por qué? Enzyme ofrece una interfaz de alto nivel que es muy fácil de usar y amigable para el desarrollador. Estad atentos a la segunda parte.!
Si en algún momento se siente estancado o necesita ayuda, háganoslo saber en los comentarios..
