Snapshot Testing

Clase 20 de 25 • Curso de JavaScript Testing con Jest 2019

Resumen

En esta clase, Veremos pruebas con Snapshots.

Los snapshots nos garantizan que vamos a asegurar o que no vaya a pasar algún cambio inesperado en nuestra UI. Comprobamos lo que tenemos en este caso jest contra lo que estamos trayendo y que no deben de cambiar. Ya que esto lo usamos para casos en donde cierto datos en particulares rara vez deben de cambiar.

Ejemplo: Un icono que lo traigamos de alguna petición http. Entonces evaluaremos el cambio contra la prueba que tenemos en jest.

En caso de que queramos aceptar el cambio agregamos el flag -u.

Ruben Eduardo Acosta Vela

student•

El volumen te todos los vídeos de este curso esta algo bajito.

Juan Pablo Celiz

student•

me acabo de romper el tímpano al pasar a un vídeo de YouTube con los auriculares puestos 🤦‍♂️

Daniel Páez

student•

Los snapshots son una herramienta de jest que permiten asegurar la inmutabilidad de los datos

Hans Piña

student•

Tengo una duda…

¿ jest -u actualiza TODOS mis snapshots? ¿no es eso algo potencialmente indeseado?

Yo lo corrí con jest snapshot.test.js -u y sólo corrió/actualizó ese test (snapshot).

Wilson Alejandro Gonzalez Gaitan

student•

Alguien sabe como hacer que no sobrescriba el snapshot

Bruno Martin Sendras

student•

Les dejo una forma de crear el snapshot de forma dinámica, seleccionando un subconjunto de campos del objeto recibido desde la api. Lo escribí en los aportes de una clase anterior por error. les dejo el link! Asá podemos usar la llamada real a la api, independientemente del tamaño de la respuesta :).

Crear snapshot dinamicamente

Edgar Lopez Arroyo

student•

 run `npm test -- -u` to update.```

Miguel Angel Reyes Moreno

student•

Cuando tenemos una UI en la que tenemos valores que no van a cambiar o cambiarán muy pocas veces, hacemos estas pruebas para verificar los valores que tenemos contra los que estamos recibiendo.

Los snapshots son una herramienta de jest que permiten asegurar la inmutabilidad de los datos

Estamos simulando hacer una petición.

export const getCharacter = data => ({
  "id": data.id,
  "name": data.name,
  "status": data.status,
  "gender": data.gender,
});

{
  "id": 1,
  "name": "Rick Sanchez",
  "status": "Alive",
  "species": "Human",
  "gender": "Male"
}

import {getCharacter} from './../snapshot';
import rick from './../rick.json';

describe('Es hora de las instantaneas', () => {
  test('Snapshot', () => {
    expect(getCharacter(rick)).toMatchSnapshot();
  });
});

Al correr la prueba, Jest creará un folder llamado "__snapshots__"

Un archivo se creará dentro del folder:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Es hora de las instantaneas Snapshot 1`] = `
Object {
  "gender": "Male",
  "id": 1,
  "name": "Rick Sanchez",
  "status": "Alive",
}
`;

Jhon Manuel Angulo Moncada

student•

también se puede hacer el update de solo esas pruebas usando:

jest -u snapshot

nmurillo749

student•

Las keys de los objetos que no contienen caracteres especiales como espacios en blanco o guiones no necesitan ser declaradas entre comillas. { key: value } en lugar de { "key": value }

Raquel A. Jackson P.

student•

Platzi cuenta con algún curso que incluya pruebas con chai, sinon, chai as promise, supertest, etc?

Julio César Prieto Pólito

student•

Hay un curso de Unit Testing con Jasmine

Bruno Martin Sendras

student•

Agregar babel para compilar con ES6. podes usar npm o yarn, yo use yarn para todo el proyecto y el curso.

Dependencias necesarias (ademas de las ya agregadas por Oscar)

yarn add @babel/preset-env

Añadir un archivo llamado .babelrc en el root del proyecto con el siguiente json de configuración:

{
  "presets": ["@babel/preset-env"]
}

Ahora podemos usar la notación es6

import request from 'supertest';
import app from '../app';

Esto es suficiente para que corran las pruebas, es posible que a medida que crezca el proyecto sean necesarias mas configuraciones.

fuente: babel setup for node

Miguel Eduardo Langarano Guerrero

student•

Creo que es un poquito tarde para eso, postealo en los primeros videos.

Jorge De Jesus Tejeda Bello

student•

Bieeeen

Lorena Rojas

student•

jest -u

actualiza todos los snapshots que fallaron, si quieres actualizar solo uno snapshot específico puedes hacerlo usando el comando:

jest -u -t='nombre test o describe' ej: jest -u -t='Snapshot'

con eso solo se actualizará el test que haga match con ese nombre ya sea el nombre del test o del describe.

https://jestjs.io/docs/snapshot-testing

Juan Burns

student•

Aclaro algo para el que haya quedado con dudas, el primer string despues de declarar "describe", va a identificar de manera unica al snapshot generado, de manera que si uno cambia ese string, se va a generar otro con la nueva descripcion y va a quedar obsoleto el que no tenga uso. Saludos!.

JUAN FELIPE CONTRERAS DELGADO

student•

Naldo Duran

student•

Snapshot Testing

Introducción al curso

¿Dónde aprender testing con JavaScript?

Qué son pruebas Unitarias

Herramientas para pruebas en Javascript

Configuración

¿Qué es Jest?

Instalación y configuración

Creando nuestra primera prueba unitaria

Matchers

Common Matchers / Comparadores Comunes

Numbers

Truthness / Verdadero

Arrays

Coverage

Strings

Monitoreo

Setup de pruebas

Testing Asynchronous Code

Callbacks

Promesas

Reject y resolve

Async/Await

Aplicaciones de testing para Async/Await

Snapshot Testing

Snapshot Testing

Excepciones Snapshot

Implementando Jest en diferentes Frameworks

Preparar proyecto para trabajar con React JS

Preparar proyecto para trabajar con Vue JS

Preparar proyecto para trabajar con Express JS

Beneficios de las Pruebas Unitarias