Pruebas en componentes asincronos en React


*

">

Realizacion de test expresiones asincrona (Promesas)


Done en los test

El codigo se ejecuta de manera lineal, por lo tanto debemos modificar el archivo de pruebas cuando trabajemos pruebas asincronas

Debemos enviar el argumento done al callback en el archivo del test

La palabra reservada done busca donde hay un expect o en su defecto otro done() para ejecutar el proceso asincrono o espera alrededor de 5 segundos

Nota cuando trabajemos con expresiones asincronas despues del expect es importante escribir el done para decirle al test que ya acabamos el proceso y no esperamos mas tareas asincronas.

Si se rechaza la promesa, la prueba fallará automáticamente.

También puede usar el comparador .resolves en nuestra declaración de espera, y Jest esperará a que se resuelva esa promesa. Si se rechaza la promesa, la prueba fallará automáticamente.
Si espera que una promesa sea rechazada, usaremos el comparador .rejects. Si se cumple la promesa, la prueba fallará automáticamente. 

import { getHeroeById } from '../../src/componenteHeroes.jsx';

export const getHeroeByIdAsync = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const p1 = getHeroeById(id);
      if (p1) {
        resolve(p1);
      } else {
        reject('No se pudo encontrar el heroe');
      }
    }, 1500);
  });
}; 

import { getHeroeByIdAsync } from '../../src/asincronia.jsx';
import heroes from './5heroes.js';

describe('Prueba con promesas del archivo 6asincronia.js', () => {
  test('getHeroeByidAsync debe retornar un heroe async ', (done) => {
    const id = 1;
    getHeroeByIdAsync(id).then((heroe) => {
      expect(heroe).toBe(heroes[0]);
      done();
    });
  });

  test('Debe obtener un error si el id del heroe no existe  ', (done) => {
    const id = 10;
    getHeroeByIdAsync(id).catch((error) => {
      expect(error).toBe('No se pudo encontrar el heroe');
      done();
    });
  });
});
">

Realizacion de test expresiones asincrona (Async-Await)


Async-Await en las pruebas

Para escribir una prueba asíncrona, usaremos la palabra clave async delante de la función como en el ejemplo

En este caso haremos un par de pruebas muy sencillas,

Caso 1
Verificaremos que nos llega un string
Caso 2
Verficaremos que es una conexion segura

Es importante aclarar que se puede combinar Async-Await con rejects resolves de las promesas

En estos casos, async await no es mas que azúcar sintáctico

Ninguno de estos casos es superior a los demás, y se pueden mezclar y combinar, solo dependera de nuestras necesidades.
Tambien se podria trabajar con callbacks en estos test asincronos 

export const getImagen = async () => {
  try {
    const apiKey = 'f89u7f83h389f89afy8a2n435da6F';
    const resp = await fetch(
      `http://api.giphy.com/v1/gifs/ramdom?api_key=${apiKey}`
    );
    const { data } = await resp.json();
    const { url } = data.images.original;
    // const img = document.createElement('img');
    // img.src = url;
    // document.body.append(img);
    return url;
  } catch (error) {
    return 'No existe';
  }
};

import { getImagen } from './7async-await';

describe('Prueba con Async-Await y Fetch en el archivo 7async-await.js', async () => {
  test('Debe de retornar el url de la imagen', () => {
    const url = await getImagen();
    //Caso 1
    expect(typeof url).toBe('string');
    // Caso 2
    expect(url.includes('https://')).toBe(true);
  });
});