Assertions / matchers

Clase 8 de 27 • Curso de Introducción al Testing con JavaScript

Contenido del curso

Introduccion

Escribiendo pruebas

Pruebas Unitarias

Integration Test & E2E

UI Test

24
UI Test
10:02 min

Automatizar

Tomar examen

Comentarios

Edgar Mauricio Pérez Rojas

student•

Código comentado / Resumen +BONUS

// matchers

test('test obj', () => {
  const data = { name: 'Rigo' }; // Para testear objetos se usa .toEqual.
  data.lastname = 'Molina'; // Manipulación del objeto.
  expect(data).toEqual({ name: 'Rigo', lastname: 'Molina' }); // Espero que el objeto de arriba sea igual a este.
});

test('null', () => {
  const data = null;
  expect(data).toBeNull(); // Un nulo está definido como nulo.
  expect(data).toBeDefined(); // Un definido es otro tipo de dato en JS.
  expect(data).not.toBeUndefined(); // Podemos usar negaciones.
});

test('booleans', () => {
  // Booleanos directos.
  expect(true).toEqual(true);
  expect(false).toEqual(false);
  // Datos considerados como booleanos.
  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
  expect(1).toBeTruthy();
});

test('string', () => {
  // Podemos preguntar si coincide una parte arbitraria con la cadena.
  expect('Christoph').toMatch(/stop/);
});

test('list / arrays', () => {
  const numbers = [1, 2, 3, 4];
  // Podemos preguntar si contiene una parte arbitraria con el arreglo.
  expect(numbers).toContain(3);
});

// // // BONUS // // //

test('comparing numbers', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3); // Es mayor a 3?
  expect(value).toBeGreaterThanOrEqual(3.5); // Es mayor o igual a 3.5?
  expect(value).toBeLessThan(5); // Es menor que 5?
  expect(value).toBeLessThanOrEqual(4.5); // Es menor o igual a 4.5?

  // ToBe y toEqual son equivalentes para números.
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

test('comparing float', () => {
  const value = 3.5 + 4.2;
  // Se usa toBeCloseTo para evitar errores por redondeos en numeros quebrados usando toEqual.
  expect(value).toBeCloseTo(7.7);
});

function formComplete() {
  throw new Error('You are not completed the form');
}

test('exception error', () => {
  // Probar si la función arroja error cuando se llama.
  expect(() => formComplete()).toThrow();
  expect(() => formComplete()).toThrow(Error);

  // Podemos usar el texto del error o una parte.
  expect(() => formComplete()).toThrow('You are not completed the form');
  expect(() => formComplete()).toThrow(/not completed/);
});

UOT Terminal

 ~/.../testing-js/demos   master ●  npm run test

> demos@1.0.0 test
> jest

 PASS  src/04-assertions.test.js
 PASS  src/01-sum.test.js
 PASS  src/02-math.test.js

Test Suites: 3 passed, 3 total
Tests:       14 passed, 14 total
Snapshots:   0 total
Time:        0.614 s, estimated 1 s
Ran all test suites.

Miguel Angel Reyes Moreno

student•

Les quiero hacer a todos la vida más fácil:

Hack para que VS Code autocomplete tu código de Jest: npm i -D @types/jest

Lisbeth Quintero

student•

Assertions o afirmaciones, con los cuales se puede verificar el comportamiento del código, algunas de los assertions más comunes de Jest, son:

expect: es la función principal de Jest y se utiliza para especificar la salida esperada de una función o valor. Por ejemplo: expect(2 + 2).toBe(4).
toBe: compara dos valores usando el operador ===. Por ejemplo: expect(2 + 2).toBe(4).
toEqual: compara dos valores recursivamente para verificar si son iguales. Por ejemplo: expect({ a: 1 }).toEqual({ a: 1 }).
toMatch: comprueba si una cadena o expresión regular coincide con una cadena esperada. Por ejemplo: expect("Hello World").toMatch(/Hello/).
toBeNull: comprueba si un valor es null. Por ejemplo: expect(null).toBeNull().
toBeUndefined: comprueba si un valor es undefined. Por ejemplo: expect(undefined).toBeUndefined().
toBeDefined: comprueba si un valor no es undefined. Por ejemplo: expect("Hello").toBeDefined().
toBeTruthy: comprueba si un valor es verdadero. Por ejemplo: expect("Hello").toBeTruthy().
toBeFalsy: comprueba si un valor es falso. Por ejemplo: expect("").toBeFalsy().
toThrow: comprueba si una función lanza una excepción. Por ejemplo: expect(() => { throw new Error(); }).toThrow().

Jimer Samuel Espinoza

student•

Mi aporte de esta clase

// marchers

test('test obj', () => {
  const data = { name: 'Jimer' };
  data.lastname = 'Espinoza';
  expect(data).toEqual({ name: 'Jimer', lastname: 'Espinoza' });
});

test(' null', () => {
  const data = null;
  expect(data).toBeNull();
  expect(data).toBeDefined();
  expect(data).not.toBeUndefined();
});

test('booleans', () => {
  expect(true).toEqual(true);
  expect(false).toEqual(false);

  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
});

test('string', () => {
  expect('Christoph').toMatch(/stop/);
});

test('list / arrays', () => {
  const numbers = [1, 2, 3, 4];
  expect(numbers).toContain(3);
});

Pablo Perez

student•

Lista de Matchers:

toEqual: Compara si dos valores son iguales en contenido.
toBeNull: Verifica si un valor es nulo.
toBeDefined: Verifica si un valor está definido.
not.toBeUndefined: Verifica si un valor no es indefinido.
toBeTruthy: Verifica si un valor es verdadero.
not.toBeFalsy: Verifica si un valor no es falso.
toBeFalsy: Verifica si un valor es falso.
toMatch: Verifica si una cadena coincide con un patrón regular.
toContain: Verifica si un elemento está presente en un arreglo.

Andrés Esteban Rodríguez Jiménez

student•

Assertions / Matchers

Los asserts / matches nos ayudan a verificar ciertos valores específicos.

Veamos un poco acerca de estas utilidades:

.toEqual({property:'value'});

test('test obj', () => {
  const data = { name: 'andru' };

  // Nos sirve para trabajar con objetos .toEqual({property:'value'})
  data.lastname = 'rodríguez';
  expect(data).toEqual({ name: 'andru', lastname: 'rodríguez' });
});

Esperar valores null o undefined

test('null', () => {
  const data = null;

  // El valor que espera es null
  expect(data).toBeNull();
  // El valor que espera es undefined
  expect(undefined).toBeUndefined();

  // El dato a retornar es definido como nulo
  expect(data).toBeDefined();
  // El dato que espera NO es undefined
  expect(data).not.toBeUndefined();
});

Esperar valores booleanos

test('booleans', () => {
  // El valor que esperamos es un "true"
  expect(true).toEqual(true);
  // El valor que esperamos es un "false"
  expect(false).toEqual(false);

  // Recordemos que hay valores que se pueden interpretar como falsos
  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
});

Probar valores de strings

test('string', () => {
  // Podemos hacer uso de expreciones regulares
  expect('Chirstoph').toMatch(/stop/); // ¿Contiene la palabra stop?
});

Validar datos de Arrays

test('Arrays', () => {
  const numbers = [1, 2, 3, 4, 5];
  // La lista debe contener el número 3
  expect(numbers).toContain(3);
});

Chan chan!

Helio Javier Soto Arevalo

student•

Se utiliza toEqual por que 2 objetos a pesar de ser exactamente iguales ocupan espacio y memoria diferentes y por eso no pasa el toBe

jefred bedoya

student••

El contenido de esta clase sobre Assertions y Matchers se resume en los siguientes pilares fundamentales para validar tu código:

El propósito de la aserción

Las aserciones son los jueces de tu test. Su función es comparar el resultado real obtenido contra el resultado esperado. Si la comparación falla, el test se detiene y reporta el error.

Matchers: El lenguaje de validación

Son las herramientas que definen qué estás probando exactamente.

Igualdad: toBe o toEqual para comparar valores primitivos u objetos.
Veracidad: toBeTruthy o toBeFalsy para validar estados booleanos.
Contención: toContain para verificar elementos dentro de arrays o strings.
Excepciones: toThrow para asegurar que tu código falla cuando debe fallar.

Buenas prácticas

Especificidad: Usa el matcher más preciso posible para que, al fallar, el mensaje de error sea claro.
Legibilidad: El test debe leerse como una oración en inglés natural.
Un solo objetivo: Evita saturar un test con demasiadas aserciones; si una falla, las siguientes no se ejecutarán.

Irving Juárez

student•

En el apartado de "booleans", porque se usa toEqual si también se puede usar toBe, hay alguna razón en especifico?

Cristian Blandon

student•

Irving Juárez

student•

Muy enriquecedor tu aporte @cristianblar

Leandro Gavidia Santamaria

student•

Hola, ¿Es lo mismo utilizar .toBeDefined y .not.toBeUndefined? En un primer análisis parece que sí.

Cristian Blandon

student•

Joel alexander

student•

No existe una herramienta para utlizar el intellisense??

Nicolas Molina

teacher•

Hola ya VSCode viene con intellisense entonces no se a que te refieres puntualmente, también hay unos plugins para jest si te refieres a autocompletar código o algo de este estilo. 🙂

Manuel Roa Ojeda

student•

https://jestjs.io/docs/using-matchers

Uriel Solis Salinas

student•

Assertions / matchers

. En programación, los “assertions” o “matchers” se refiere a una técnica para verificar que el comportamiento de un programa cumpla con ciertas condiciones o expectativas. . Testing con objetos

test('test obj', () => {
  const data = { name: 'nico' };
  data.lastname = 'molina'; // Manipulación del objeto.
  expect(data).toEqual({ name: 'nico', lastname: 'molina' }); // toEqual se utiliza para preguntar por objetos.
});

Testing con valor null

test('null', () => {
  const data = null;
  expect(data).toBeNull(); // toBeNull se usa cuando esperamos que un valor sea null.
  expect(data).toBeDefined(); // toBeDefined se usa cuando esperamos que el valor sea definido.
  expect(data).not.toBeUndefined(); // se usa cuando esperamos que un valor no es undefined.
});

Testing con booleanos

// Testing con Booleanos
test('booleans', () => {
  expect(true).toEqual(true); // toEqual igual se usa para los booleanos.
  expect(false).toEqual(false);

  // toBeFalsy se usa para valores que esperamos que son false.
  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
});

Testing con strings

test('strings', () => {
  /* toMatch es una función que puede verificar si el string esperado tiene alguna coincidencia,
  por ejemplo 'ire' ya que forma parte del string */
  expect('Uriel').toMatch(/rie/); // se le agrega una expresión regular como parámetro a toMatch.
});

Testing con listas o arrays

test('list / arrays', () => {
  const nums = [1, 2, 3, 4];
  /* toContain sirve para verificar que el array contenga el elemento. */
  expect(nums).toContain(3);
});

// matchers

test('test obj', () => {
  const data = { name: 'Rigo' }; // Para testear objetos se usa .toEqual.
  data.lastname = 'Molina'; // Manipulación del objeto.
  expect(data).toEqual({ name: 'Rigo', lastname: 'Molina' }); // Espero que el objeto de arriba sea igual a este.
});

test('null', () => {
  const data = null;
  expect(data).toBeNull(); // Un nulo está definido como nulo.
  expect(data).toBeDefined(); // Un definido es otro tipo de dato en JS.
  expect(data).not.toBeUndefined(); // Podemos usar negaciones.
});

test('booleans', () => {
  // Booleanos directos.
  expect(true).toEqual(true);
  expect(false).toEqual(false);
  // Datos considerados como booleanos.
  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
  expect(1).toBeTruthy();
});

test('string', () => {
  // Podemos preguntar si coincide una parte arbitraria con la cadena.
  expect('Christoph').toMatch(/stop/);
});

test('list / arrays', () => {
  const numbers = [1, 2, 3, 4];
  // Podemos preguntar si contiene una parte arbitraria con el arreglo.
  expect(numbers).toContain(3);
});

test('comparing numbers', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3); // Es mayor a 3?
  expect(value).toBeGreaterThanOrEqual(3.5); // Es mayor o igual a 3.5?
  expect(value).toBeLessThan(5); // Es menor que 5?
  expect(value).toBeLessThanOrEqual(4.5); // Es menor o igual a 4.5?

  // ToBe y toEqual son equivalentes para números.
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

test('comparing float', () => {
  const value = 3.5 + 4.2;
  // Se usa toBeCloseTo para evitar errores por redondeos en numeros quebrados usando toEqual.
  expect(value).toBeCloseTo(7.7);
});

function formComplete() {
  throw new Error('You are not completed the form');
}

test('exception error', () => {
  // Probar si la función arroja error cuando se llama.
  expect(() => formComplete()).toThrow();
  expect(() => formComplete()).toThrow(Error);

  // Podemos usar el texto del error o una parte.
  expect(() => formComplete()).toThrow('You are not completed the form');
  expect(() => formComplete()).toThrow(/not completed/);
});

 ~/.../testing-js/demos   master ●  npm run test

> demos@1.0.0 test
> jest

 PASS  src/04-assertions.test.js
 PASS  src/01-sum.test.js
 PASS  src/02-math.test.js

Test Suites: 3 passed, 3 total
Tests:       14 passed, 14 total
Snapshots:   0 total
Time:        0.614 s, estimated 1 s
Ran all test suites.

// marchers

test('test obj', () => {
  const data = { name: 'Jimer' };
  data.lastname = 'Espinoza';
  expect(data).toEqual({ name: 'Jimer', lastname: 'Espinoza' });
});

test(' null', () => {
  const data = null;
  expect(data).toBeNull();
  expect(data).toBeDefined();
  expect(data).not.toBeUndefined();
});

test('booleans', () => {
  expect(true).toEqual(true);
  expect(false).toEqual(false);

  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
});

test('string', () => {
  expect('Christoph').toMatch(/stop/);
});

test('list / arrays', () => {
  const numbers = [1, 2, 3, 4];
  expect(numbers).toContain(3);
});

test('test obj', () => {
  const data = { name: 'andru' };

  // Nos sirve para trabajar con objetos .toEqual({property:'value'})
  data.lastname = 'rodríguez';
  expect(data).toEqual({ name: 'andru', lastname: 'rodríguez' });
});

test('null', () => {
  const data = null;

  // El valor que espera es null
  expect(data).toBeNull();
  // El valor que espera es undefined
  expect(undefined).toBeUndefined();

  // El dato a retornar es definido como nulo
  expect(data).toBeDefined();
  // El dato que espera NO es undefined
  expect(data).not.toBeUndefined();
});

test('booleans', () => {
  // El valor que esperamos es un "true"
  expect(true).toEqual(true);
  // El valor que esperamos es un "false"
  expect(false).toEqual(false);

  // Recordemos que hay valores que se pueden interpretar como falsos
  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
});

test('test obj', () => {
  const data = { name: 'nico' };
  data.lastname = 'molina'; // Manipulación del objeto.
  expect(data).toEqual({ name: 'nico', lastname: 'molina' }); // toEqual se utiliza para preguntar por objetos.
});

test('null', () => {
  const data = null;
  expect(data).toBeNull(); // toBeNull se usa cuando esperamos que un valor sea null.
  expect(data).toBeDefined(); // toBeDefined se usa cuando esperamos que el valor sea definido.
  expect(data).not.toBeUndefined(); // se usa cuando esperamos que un valor no es undefined.
});

// Testing con Booleanos
test('booleans', () => {
  expect(true).toEqual(true); // toEqual igual se usa para los booleanos.
  expect(false).toEqual(false);

  // toBeFalsy se usa para valores que esperamos que son false.
  expect(0).toBeFalsy();
  expect('').toBeFalsy();
  expect(false).toBeFalsy();
});

test('strings', () => {
  /* toMatch es una función que puede verificar si el string esperado tiene alguna coincidencia,
  por ejemplo 'ire' ya que forma parte del string */
  expect('Uriel').toMatch(/rie/); // se le agrega una expresión regular como parámetro a toMatch.
});

Assertions / matchers

Introduccion

¿Qué es el testing?

La piramide del testing

Hablemos sobre deuda técnica

Herramientas de testing

Creando el proyecto

Tu primer test

Escribiendo pruebas

Pruebas estáticas