Pruebas unitarias y de integracion


*

">

Pruebas de componentes en React?


Pruebas unitarias y pruebas de integracion

Pruebas unitarias
Pruebas de pequeñas funcionalidades de la aplicacion

Pruebas de integracion
Pruebas de distintos componentes juntos

Organizacion de las pruebas
Se puede tener los test en la misma carpeta donde estan nuestros archivos a probar, pero puede ser dificil de leer despues...
Para evitar este problemas nos crearemos una carpeta test donde guardaremos todas las pruebas tal que asi 

 Organizacion de archivos 
> 📁 node_modules
> 📁 public
  〰 📂 src
    〰 📂 test   
          🏺 primeraPrueba.test.js   
     ⚛️ HolaMundo.jsx
     ⚛️ index.jsx     
 🥊 .gitignore
 🥦 packages.json
 💎 README.md
 🎾 yarn.lock

Siglas AAA
Arrange (Arreglar) inicializar variables Importaciones necesarias
Act (Actuar) Llamada de metodos Simulacion de clicks Realizacion de acciones
Assert (Afirmar) Observar los comportamientos de los resultados


No hay que probar librerias de terceros, debemos probar son las interacciones de la libreria dentro de nuestra aplicacion

">

Archivos de pruebas


Estructura y formato de las pruebas

El formato de los archivos de pruebas es files.test.js
Para ejecutar las pruebas se usa el comando npm run test
De esta manera estaremos ejecutando el script de la prueba
Al ejecutar este comando el Test suite buscara dentro del directorio encontrado todos los archivos .test.js

Snipet para los archivos .test.js
test + tab y cargaremos este trozo de codigo a nuestro archivo

Estructura del archivo .test.js
Es importante decir que cada con cada cambio guardado se ejecutara las pruebas si ya se esta corriendo el archivo y se correrian todos los archivos de prueba pero se puede configurar JEST viene precargado cuando iniciamos nuestra aplicacion en React 

 // Snipet de test
test("should ", () => {});


 // Organizacion dentro de un archivo de pruebas
test("Aqui indicaremos que estaremos probando ", () => {

    Aqui se escribiria todo el codigo necesario
});
">

Validaciones con PropTypes en React

Pasos para ejecutar pruebas en React

Paso 1
Exportacion de lo que queremos testar
Recordar para poder usar funciones que querramos probar en nuestras prueba, tenemos que modificar en el archivo original donde se encuentra la funcion/metodo debemos realizar la exportacion (simplemente escribiendo export antes de la funcion )

Paso 2
Creacion de archivo .tets.js y creacion de estructura base
Creamos el archivo de pruebas en su debida carpeta luego podemos crear la estructura rapidamente con un snipet escribiendo desc + tab se nos creara la esctructura base

Paso 3
Importar la libreria JEST (En realidad este paso es opcional) esto nos dara los snippets de los metodos y propiedades de JEST que a veces VS Code no nos sugiere

Paso 4 Importacion de los metodos/funciones que usaremos
En el archivo de pruebas simplemente escribiendo el metodo + tab se realiza la importacoin automatica (Igualmente es importante verificar)

Paso 5
Indicar a que prueba se hace referencia (Describe) Esto se hace para trabajar mas ordenados ya que si tenemos varias pruebas ejecutandose saber en cual archivo especificamente tenemos un error

Paso 6
Indicar el error, escribiendo el mensaje que recibiremos de la prueba

Paso 7
Inicializacion

Paso 8
Estimulo

Paso 9
Observar que ocurre .toBe es un metodo dentro de JEST y dependiendo que querramos hacer en nuetras pruebas eligiremos que metodos ejecutar 

 // Paso 1 Exportacion desde el archivo del componente 
import React from "react";
import PropTypes from "prop-types";
export const HolaMundo = ({ ladrido, parrafo }) => {
return (
  <div>
    <h1> {ladrido} </h1>
    <p> {parrafo} </p>
  </div>
);
};
HolaMundo.propTypes = {
ladrido: PropTypes.string.isRequired,
};

HolaMundo.defaultProps = {
parrafo: "Soy un parrafo desde el componente",
};
export default HolaMundo;        

 // Paso 2  (creacion de estructura base)
describe('', () => {
  
})          

// Paso 3 Importacion de Jest
import '@tesing-library/jest-dom';

// Paso 4 Importacion de metodos o propiedades
import { getLadrido } from '../../src/HolaMundo.jsx';

//Paso 5 Indicar de que archivo se realiza la prueba
describe('Prueba del archivo miPrimeraPrueba.test.js ', () => {

// Paso 6 Escribir mensaje que recibiremos de la prueba
  test('Deben ser iguales los string ', () => {

// Paso 7 Inicializacion
    const saludo1 = 'Hola mundo';

// Paso 8 Estimulo
    const saludo2 = `Hola mundo`;

// Paso 9 Observar que ocurre
    expect(saludo1).toBe(saludo2);
  });
});