Implementando pruebas para Boolean y Array

Clase 4 de 16 • Curso de Unit Testing con Jest en React

Rulo Code

student•

Probar String

const text = &quot;Hola Mundo&quot;;
test('Debe contener Mundo', ()=&gt;{
    expect(text).toMach(/Mundo/);
})

Probar Array

test('¿Tenemos mango?', ()=&gt;{
    expect(fruits).toContain('mango')
})

Probar números

test('Mayor que', ()=&gt;{
    expect(10).toBeGreaterThan(9)
})

Probar booleano

test('Verdadero', ()=&gt;{
    expect(true).toBeTruthy()
})

Probar callback

const reverseString = (str, callback) =&gt; {
    callback(str.slipt(&quot;&quot;).reverse().join(&quot;&quot;))
}
test('Probar un callback', ()=&gt;{
    reverseString('hola', (str)=&gt;{
        expect(str).toBe('aloh')
    })
})

Arantxa Giovanna Rosas Del Valle

student•

Hola Camilo solo una observación, en el primer ejemplo que pusiste debe ir toMatch te faltó agregar una t, tal como le pasó a Óscar en el ejemplo pasado. Saludos

Cristian Caballero

student•

Y en la reverseString, debio ser split no slipt

Alan David R.L.

student•

Código de la clase

const frameworks = ["React", "Vue", "Angular", "Svelte"];

// Test arrays
test("It should has React", () => {
  expect(frameworks).toContain("React");
});

// Test numbers
test("It should be greater than", () => {
  expect(10).toBeGreaterThan(9);
});

// Test Booleans
test("It should be true", () => {
  expect(true).toBeTruthy();
});

// Reverse strings function
const reverseString = (str, cb) => {
  cb(str.split("").reverse().join(""));
};

// Test callbacks
test("The callback should return a reversed word", () => {
  reverseString("Platzi", str => {
    expect(str).toBe("iztalP");
  });
});

Sergio Estrella

teacher•

Viendo la clase, me entró la curiosidad de ¿Cómo haría si quiero evaluar cada uno de los elementos de un array en un solo test?

Así que me puse a probar con evaluar si todos los elementos de un array eran mayores a 10

const arr = [15, 11, 12, 20, 50];

test("Check if the numbers of an array are grater than 10", () => {
  arr.map((item) => {
    expect(item).toBeGreaterThan(10);
  });
});

De los aprendizajes más curiosos que me llevo es que

La función anónima puede tener mucha más lógica que solamente los expect() y cómo queremos testear. El ejemplo es el .map() que recorre todo el array.
Se puede tener más de un solo expect() dentro de un test, y que si falla al menos uno, falla todo el test

Los invito a probar el código que está arriba, y que jueguen libremente con los test y resuelvan sus dudas probando y rompiendo ;)

Emmanuel Rodríguez

student•

Claro, pero itera mejor con for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements
for (let fruit of fruits) {
  console.log( fruit );
}

Mejora tu performance al quitarle la retentiva de creación con map.

Sergio Estrella

teacher•

No había considerado eso 😮

Gracias por el aporte :D

Daniel Esteban Santos Mendez

student•

Cabe resaltar que toBeTruthy() es solo para true, para false usamos toBeFalsy(), ya que Oscar dijo que servia para True o False es bueno resaltarlo.

Iván Darío Sánchez Jiménez

student•

Es solo para valores truthy y falsy diferente que si son de tipo booleano, le puedes pasar toBeTruthy('false') como string y la prueba es valida

Paul Mayorga

student•

Estoy tratando de entender el porque de las pruebas ? Porque es necesario ? Si usamos typescript seria mejor y no nos equivocamos con los tipos de datos? Perdon mi ignorancia pero necesito entender el porque

John Parra

student•

Usamos pruebas unitarias para mejorar la calidad del código en nuestros desarrollos. Es necesario ya que nos permite ver cosas que no vemos en el momento en el que se desarrolla. Es bueno usar typescript sin embargo tambien podemos aplicarle pruebas para cubrir cosas que no vemos al desarrollar una funcionalidad.

Por ejemplo: En este video podemos conocer como probar un callback, números, booleanos y arreglos tambien.

Juan Carrillo

student•

Me hice la misma pregunta cuando comencé a trabajar formalmente, aunque utilizamos otra suit de pruebas, es tedioso después de agregar un feature tener que hacer las pruebas también o viceversa. Con el tiempo me di cuenta que aunque quita tiempo te da muchas ventajas, por ejemplo:

Después de modificar código o agregar una nueva característica, corres lo test y estos te ayudan a comprobar que no rompiste alguna otra funcionalidad, así que te sientes más tranquilo.
Por otro lado si tienes algún servicio de integración continua, que por ejemplo corra los tests cada vez que alguien del equipo cree un pull request, y que bloquee el PR y no habilite a mergeo hasta que no pasen los test o cumpla con el test covegare acordado por el equipo, te estarás asegurando de introducir menos bugs.
Aunque a veces pueden ser una arma de doble filo, cuando no se testea lo que se debe testear, y resulta que por ejemplo ante algún minimo cambio en la estructura del código más no en su lógica de negocio tengas que cambiar todos los tests.
En definitiva agregar test a tu proyecto suma seguridad en que tu código hace lo que necesitas.

Martín David Roldán

student•

Funciones para probar números, strings, arrays, objetos y booleanos

Estructura general para ejecutar un test

test('Título que va a describir el test a realizar', () => {
    expect().<-- METODO A EJECUTAR -->
})

Números

test('Dos mas dos', () => {
    const value = 2 + 2;
    expect(value).toBeGreaterThan(3);
    expect(value).toBeGreaterThanOrEqual(3.5);
    expect(value).toBeLessThan(5);
    expect(value).toBeLessThanOrEqual(4.5);
  
    // Para testear que el valor de prueba retorne siempre un valor definido
    expect(value).toBe(4);
    expect(value).toEqual(4);
});

Números flotantes

test('Testeo de números flotantes', () => {
    const value = 0.1 + 0.2;
    // Para testear un flotante se debe usar la siguiente línea, ya que si se implementa
		// la función <-- toBe --> retortana una prueba fallida ya que JavaScript redondea
	  // con un pequeño margen de error.
    expect(value).toBeCloseTo(0.3);
});

Strings

Los strings pueden evaluarse mediante expresiones regulares o simplemente entre comillas (" ")

test('Para testear que algo no se encuentre en un string', () => {
    expect('platzi').not.toMatch(/n/);
});
  
test('A la grande le puse cuca', () => {
    expect('grande').toMatch("rande");
});

Arrays y iterables

Array

const frutas= ['Manzana', 'Pera', 'Banana']

test('¿Tenemos una banana en el array?', () => {
    expect(fruits).toContain('Banana')
})

Objetos

const personajes = {
    uno: "Homero",
    dos: "Marge",
    tres: "Lisa",
    cuatro: "Bart",
    cinco: "Maggie"
}

test('¿Existe el persona Bart en el objeto?', () => {
    expect(personajes.cuatro).toContain('Bart')
})

Comprobar booleanos, undefined y null

toBeNull comprueba que el testeo solo debe ser null.
toBeUndefined comprueba que el testeo solo debe undefined.
toBeDefined comprueba que el testeo debe ser lo opuesto a undefined. Es estado de lo que se prueba debe estar definido.
toBeTruthy comprueba que el testeo solo debe true.
toBeFalsy comprueba que el testeo solo debe false.

Extra

Para negar cualquier tipo de testeo y esperar el resultado opuesto se debe usar not antes del método a ejecutar.

Andrés Felipe Eslava Zuluaga

student•

test('execute a callback', () => {
  reverseString('Hello', (str) => {
    expect(str).not.toBe('Hello')
  })
})

Diego Toro Cárdenas

student•

const NN = null;
test("Check that test is only null", () => {
    expect(NN).toBeNull();
});

Danilo Valenzuela

student•

La función to Match te permite ver el formato del String que estás pasando lo que lo hace muchísimo más potente. Platzi tiene un curso muy bueno de expresiones regulares dictado por @beco.

Willy David Da Conceicao Lozada

student•

Here el código de esta clase :) ![](

Jorge De Jesus Tejeda Bello

student•

const fruits = ["banana", "melon", "sandia", "naranja", "limon", "pepino"];

export const arrayFruits = () => fruits;

import { arrayFruits, arrayColors } from "../array";

describe("Probando nuestros arreglos", () => {
test("Tiene una banana", () => {
    expect(arrayFruits()).toContain("banana");
  });
  test("¿No tiene una mango?", () => {
    expect(arrayFruits()).not.toContain("mango");
  });
})

Luis Eduardo Rodríguez Ramírez

student•

Les dejo la función de una forma más amigable

const reverseString = (str, callback) => {
    const splitted = str.split('');
    const reversed = splitted.reverse();
    const joined = reversed.join('');
    callback(joined);
}

Diego Toro Cárdenas

student•

Sin test y sin expect ¿?

Rafael Soriano Ramírez

student•

Excelente el orden y yo sufriendo con los QA

Ever Alfredo Sorto Ayala

student•

Me surge una duda, En el callback :

const reverseString = (str,callback)=>{
    callback(str.split("").reverse().join(""))
}

ok se el concepto: es una función que tiene como parámetro otra función, ok al finalizar la primera se procede a brindar el resultado a la segunda , pero ambas se llaman callback y eso me confunde, lo que entiendo al leer el código es :

const reverseString = (str,callback)=>{ callback(str.split("").reverse().join("")) // el segundo parámetro ejecútalo con esta función }

Giovanni Aranda

student•

Hola,

Lo que sucede es cuando tu esperas de parametro una función por lo general de buenas practicas le llamas callback, pero tu le puedes llamar como sea siempre y cuando no utilices una palabra reservada de JavaScript.

Lo que se ejecuta en la segunda linea es que utilizas la función que se paso por parametro y le pasas un parametro ya que esa función esta esperando un parametro String.

Ejemplo

const reverseString = (str,callback)=>{
    callback(str.split("").reverse().join(""))
}

const stringReverse = (str) => {
	console.log(str)
}

reverseString('Palabra', stringReverse)

Sergio Estrella

teacher•

toContain sirve para testear cualquier iterable? Ejemplo, una lista

Rob Arroyo

student•

Es para testear un array o que un string es un substring dentro de un string.

https://jestjs.io/docs/expect#tocontainitem

Cayo Legal

student•

describe('Strings', () => {
    test('toBe', () => {
        expect('Test').toBe('Test')
    })

    test('Match', () => {
        const expectedContainsWord = 'Hello';
        expect('Hello World').toMatch(expectedContainsWord)
    })
})

describe('Numbers', () => { 
    test('Greater than', () => {
        // Equal
        expect(2).toEqual(2)

        // Greater
        expect(1).toBeGreaterThan(0)

        // Greater or equal
        expect(2).toBeGreaterThanOrEqual(1)

        // Less than
        expect(1).toBeLessThan(2)

        // Less than or equal
        expect(1).toBeLessThanOrEqual(1)
    })
})

describe('Booleans', () => { 
    test('True', () => { 
        expect(true).toEqual(true)

        expect(false).toBe(false)
        
        /* accept truthy values */
        expect(true).toBeTruthy()
        expect('abc').toBeTruthy()
        expect([]).toBeTruthy()
        expect({}).toBeTruthy()
        expect(1).toBeTruthy()
        // expect(null).toBeTruthy() /* this doesn't work bc null is not a truthy value */

        /* accept falsy values */
        expect(false).toBeFalsy()
        expect('').toBeFalsy()
        expect(null).toBeFalsy()
        expect(undefined).toBeFalsy()
        expect(NaN).toBeFalsy()
        expect(0).toBeFalsy()
        // expect(1).toBeFalsy() /* this doesn't work bc numbers greater than 0 are not falsy values */
     }) 
 })

describe('Arrays', () => {
    test('Countries', () => {
        
        /* with this don't work */
        // const countries = ['Brazil', 'Singapur', 'New Zealand'];

        const countries = ['Brazil', 'Singapur', 'New Zealand', 'Paraguay'];
        expect(countries).toContain('Paraguay');
    })
})

Juan Roa

student•

Puedes hacer CMD + K Eso lo mismo que el clear y ahorras tiempo :)

sue herrera

student•

en la clase pasada, se paso el string a evaluar en \ \ : (\ Mundo \ ) se menciono: que era para delimitar las palabra; en ese caso de reverse la string si se pasa normal con comillas, cual será la diferencia, tal vez es básico perdón pero me confunde un poco.

Eduardo Peredo Rivero

student•

Lo que sucede es que el método Matchacepta como parámetro un string o una expresión regular, por eso es que para el ejemplo del Hola Mundo la test pasa de ambas formas.

Puedes ver la documentación del método en la web de jest para mayor detalle.

https://jestjs.io/docs/en/expect#tomatchregexporstring

Juan Camilo Lentino Villalba

student•

también podemos validar si existen varios elementos de un arreglo

const fruits = ['melon','manzana','banana']

test('¿Tenemos una banana y una manzana?', ()=> {
    expect(fruits).toContain('banana','manzana')
})

Iván Darío Sánchez Jiménez

student•

toBeTruthy() y su contraparte toBeFalsy() no sirven para verificar valores de tipo booleano si no valores truthy o falsy, por lo que un test de la siguiente forma pasa la prueba

test('Verdadero',() => {
  expect('false').toBeTruthy()
})

Recordemos que los valores Truthy pueden ser:

Boolean(1) Boolean(“a”) Boolean([]) Boolean({}) Boolean(function(){})

Valores : Truthy y Falsy

Iván Darío Sánchez Jiménez

student•

Si quisieramos realmente verificar si es un valor true deberiamos usar el siguiente test

test('Verdadero',() => {
  expect(true).toBe(true)
})

Nicolás Laverde

student•

tobeTruthy no devuelve si es un booleano, retorna si lo que se le envia es un valor true en coersion de datos es decir "Hola" == true ( es true ) en ese caso toBeTruthy funciona... Pero Si usamos toBe(true) Es comparacion estricta es decir

"Hola" === true? // False.

Cristian Camilo Mateus Fierro

student•

Como probar callbacks

const reverseString = (str, callback) =&gt; {
    callback(str.slipt(&quot;&quot;).reverse().join(&quot;&quot;))
}
test('Probar un callback', ()=&gt;{
    reverseString('hola', (str)=&gt;{
        expect(str).toBe('aloh')
    })
})

const frameworks = ["React", "Vue", "Angular", "Svelte"];

// Test arrays
test("It should has React", () => {
  expect(frameworks).toContain("React");
});

// Test numbers
test("It should be greater than", () => {
  expect(10).toBeGreaterThan(9);
});

// Test Booleans
test("It should be true", () => {
  expect(true).toBeTruthy();
});

// Reverse strings function
const reverseString = (str, cb) => {
  cb(str.split("").reverse().join(""));
};

// Test callbacks
test("The callback should return a reversed word", () => {
  reverseString("Platzi", str => {
    expect(str).toBe("iztalP");
  });
});

test('Dos mas dos', () => {
    const value = 2 + 2;
    expect(value).toBeGreaterThan(3);
    expect(value).toBeGreaterThanOrEqual(3.5);
    expect(value).toBeLessThan(5);
    expect(value).toBeLessThanOrEqual(4.5);
  
    // Para testear que el valor de prueba retorne siempre un valor definido
    expect(value).toBe(4);
    expect(value).toEqual(4);
});

test('Testeo de números flotantes', () => {
    const value = 0.1 + 0.2;
    // Para testear un flotante se debe usar la siguiente línea, ya que si se implementa
		// la función <-- toBe --> retortana una prueba fallida ya que JavaScript redondea
	  // con un pequeño margen de error.
    expect(value).toBeCloseTo(0.3);
});

const personajes = {
    uno: "Homero",
    dos: "Marge",
    tres: "Lisa",
    cuatro: "Bart",
    cinco: "Maggie"
}

test('¿Existe el persona Bart en el objeto?', () => {
    expect(personajes.cuatro).toContain('Bart')
})

import { arrayFruits, arrayColors } from "../array";

describe("Probando nuestros arreglos", () => {
test("Tiene una banana", () => {
    expect(arrayFruits()).toContain("banana");
  });
  test("¿No tiene una mango?", () => {
    expect(arrayFruits()).not.toContain("mango");
  });
})

describe('Strings', () => {
    test('toBe', () => {
        expect('Test').toBe('Test')
    })

    test('Match', () => {
        const expectedContainsWord = 'Hello';
        expect('Hello World').toMatch(expectedContainsWord)
    })
})

describe('Numbers', () => { 
    test('Greater than', () => {
        // Equal
        expect(2).toEqual(2)

        // Greater
        expect(1).toBeGreaterThan(0)

        // Greater or equal
        expect(2).toBeGreaterThanOrEqual(1)

        // Less than
        expect(1).toBeLessThan(2)

        // Less than or equal
        expect(1).toBeLessThanOrEqual(1)
    })
})

describe('Booleans', () => { 
    test('True', () => { 
        expect(true).toEqual(true)

        expect(false).toBe(false)
        
        /* accept truthy values */
        expect(true).toBeTruthy()
        expect('abc').toBeTruthy()
        expect([]).toBeTruthy()
        expect({}).toBeTruthy()
        expect(1).toBeTruthy()
        // expect(null).toBeTruthy() /* this doesn't work bc null is not a truthy value */

        /* accept falsy values */
        expect(false).toBeFalsy()
        expect('').toBeFalsy()
        expect(null).toBeFalsy()
        expect(undefined).toBeFalsy()
        expect(NaN).toBeFalsy()
        expect(0).toBeFalsy()
        // expect(1).toBeFalsy() /* this doesn't work bc numbers greater than 0 are not falsy values */
     }) 
 })

describe('Arrays', () => {
    test('Countries', () => {
        
        /* with this don't work */
        // const countries = ['Brazil', 'Singapur', 'New Zealand'];

        const countries = ['Brazil', 'Singapur', 'New Zealand', 'Paraguay'];
        expect(countries).toContain('Paraguay');
    })
})

Implementando pruebas para Boolean y Array

Bienvenida

Bienvenido al Curso de Jest

¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

Introducción a Jest

Preparación del entorno con Jest

Implementando pruebas para Boolean y Array

Implementando pruebas a promesas

Watch y Coverage

Usando Jest con React

Preparar proyecto

Crear mocks

Implementar provider mock

Snapshot

Probar Actions

Probar Reducers

Probar peticiones fetch

Deploy y CI con Travis

Jest + CI

Probando el proyecto antes de hacer deploy

Recapitulación y cierre