Ejemplo de pruebas en React


*

">

Archivo al que le haremos pruebas


Filter o find en un array

Quiza ya lo conoces, pero Javascript usamos distintos metodos para manejar un array y dos de ellos son .filter y .find aunque parecidos no hacen lo mismo

.find
Encuentra al primer resultado

.filter
Crea un nuevo array con todos los resultados que coincidan con la condicion 

import heroes from './heroes.js';
// Primera funcion
export const getHeroeById = (id) => heroes.find((heroe) => heroe.id === id);

// Segunda funcion
export const getHeroesByOwner = (owner) =>
  heroes.filter((heroe) => heroes.owner === owner);
">

Que pruebas puedo realizar en un componente de React?


Pruebas a la medida

Pruebas que puedo realizar en la primera funcion
1.- Que pasaria si recibimos un ID que no existe?
2.- Si se recibe un ID correcto pero no existe un heroe?
3.- Que pasa si envio un id correcto y existe el heroe?

Se puede usar el ciclo for pero haria mas larga las pruebas por eso se usa en este ejemplo el propio .find
Como undefined es un primitivo se puede usar el toBE

Pruebas que puedo realizar en la primera funcion
1.- Retorno de un arreglo con los heroes de DC
2.- En vez de usar constante id usar owner toEqual
3.- Al arreglo filtrado podemos retornar un arreglo con los heroes de Marvel longitud 2 usando el metodo toBe 

import heroes from '../../src/heroes.js';
import { getHeroeById, getHeroesByOwner } from '../../src/componenteHeroes.jsx';

describe('Prueba en archivo 5ejemplos.js la funcion getHeroeById', () => {
  test('Debe de retornar un heroes por id', () => {
    const id = 1;
    const heroe = getHeroeById(id);
    const heroeData = heroes.find((h) => h.id === id);
    expect(heroe).toEqual(heroeData);
  });
  test('Ejemplo 1 debe de retornar undefined si heroe no existe', () => {
    const id = 10;
    const heroe = getHeroeById(id);
    expect(heroe).toBe(undefined);
  });
});

describe('Prueba en el archivo 5ejemplos.js la funcion getHeroesByOwner', () => {
  test('La funcion deberia retornar un arreglo con los heroes de DC', () => {
    const owner = DC;
    const heroes = getHeroesByOwner(owner);
    console.log(heroes);
    const jerou = heroes.filter((j) => j.owner === owner);
    expect(heroes).toEqual(jerou);

    test('Debe retornar un arreglo con los heroes de marvel ', () => {
      const owner = Marvel;
      const heroes = getHeroesByOwner(owner);
      expect(heroes.length).toEqual(2);
    });
  });
});
">

Archivo con el array de heroes

Heroes.js

Para no dejar dudas, este es el archivo de donde recibimos los datos

En nuestro archivo componenteHeroes.jsx usamos en el primer caso .find ya que ubicara por id unico y en el segundo caso .filter ya que hay varios personajes de comic de una misma editorial... 

const heroes = [
{
  id: 1,
  name: 'Batman',
  owner: 'DC',
},
{
  id: 2,
  name: 'Spiderman',
  owner: 'Marvel',
},
{
  id: 3,
  name: 'Superman',
  owner: 'DC',
},
{
  id: 4,
  name: 'Flash',
  owner: 'DC',
},
{
  id: 5,
  name: 'Wolverine',
  owner: 'Marvel',
},
];

export default heroes;