Setup de pruebas

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

Contenido del curso

Introducción al curso

Configuración

Matchers

Testing Asynchronous Code

Snapshot Testing

Implementando Jest en diferentes Frameworks

Tomar examen

Resumen

Jest nos proporciona funciones auxiliares para mejorar el manejo de nuestras pruebas, esto significa. Que podremos correr funciones antes, durante o después de nuestras pruebas.

Esto nos permite setear ciertas configuraciones muy particulares que necesitemos antes que corra la prueba o después de esta.

afterEach() // Despues de cada prueba afterAll() // Despues de todas las pruebas

beforeEach() // Antes de cada prueba beforeAll() // Antes de todas las pruebas

Comentarios

Alejandro Dotor

student•

Para que les salga este autocompletado / intellisense de Jest: ✅

1. Crear en el root de la carpeta el archivo jsconfig.json y agregar el siguiente codigo:

{
   "typeAcquisition": {
      "include": [ "jest" ]
   }
}

2. si lo anterior no fue suficiente para que funcione, ejecuten el siguiente comando:

npm i -D @types/jest

y listo eso es todo para que funcione el intellisense de Jest 💚

Miguel Ángel de Dios Calles

student•

Gracias por el aporte!!! :)

Jenny Aguilar

student•

Buenísimo, gracias!!! Me pasé los videos anteriores tratando de averiguar cómo hacerlo. Y me instalé unas extensiones buenísimas, pero no hacían esto... jajaja.

Briggi Rivera Guillén

student•

Yo pienso que los bloques before nos permiten mockear o preparar recursos (servicios, variables, constantes, etc) que usaremos en todas las pruebas, y los after nos serviran para liberar y/o revisar casos comunes a las pruebas, ¿estoy en lo cierto?

JUAN FELIPE CONTRERAS DELGADO

student•

A mi me recuerda a disparadores en SQL

Miguel Angel Reyes Moreno

student•

Sí, ahora que lo mencionas, ¡también me recordó a los triggers!

Daniel Páez

student•

El orden de ejecución va en congruencia a la función, esto me recuerda al ciclo de vida de react y el tiempo en el que se ejecutan los componentes

//After each test
afterEach( () => console.log("Despues de cada prueba") );
afterAll( () => console.log("despues de todas las pruebas") );

//Before all test
beforeAll( () => console.log("antes de todas las pruebas") );
beforeEach( () => console.log("Antes de cada prueba") );

Rodrigo Reyes

student•

en que caso podria usar estas funciones beforeAll, beforeEach, afterAll, afterEach?

Everardo Sánchez

student•

Yo suelo usarlo en el back cuando por ejemplo necesito tener ciertas condiciones en la bd para tests específicos y que todos partan de esa misma base.

Antonio Crespo

student•

Tenía entendido que los mocks estos se utilizaban dentro de los describe... Alguien sabe como es su funcionamiento cuando hay muchos describe y los usamos fuera de todos?? El beforeEach y afterEach funcionaria antes y despues de cada describe o de cada test dentro del describe??? Y beforeAll y afterAll???

Marco Franceschi

student•

Hola Antonio, las funciones de setup afterAll/afterEach y beforeAll/beforeEach. Aplican según el alcance en dónde las estés invocando, es decir, al colocarlas dentro de un bloque describe se ejecutaran para ese grupo de pruebas. En la documentación puedes encontrar un ejemplo al respecto, te lo dejo a continuación:

Alcance de funciones setup

Edgar Lopez Arroyo

student•

// Despues de cada prueba

afterEach( () => console.log("Depues de cada prueba"));
afterAll( () => console.log("Despues de todas las pruebas"));

// antes de cada prubea

beforeAll( () => console.log("Antes de todas las pruebas"));
beforeEach( () => console.log("Antes de cada prueba"));

describe("Preparar antes de ejecutar", ()=>{
    test("Es verdader", ()=>{
        expect(true).toBeTruthy();
    });
    test("Es verdader", ()=>{
        expect(true).toBeTruthy();
    });
})```

Néstor Fabián Gonzalez

student•

Cuando empece el vídeo anterior, ya VSCODE dejo de autocompletarme en los nuevos archivos que creo, porque podría ser?

Mitchell Contreras

student•

Intenta usando

Daniel Con

student•

También otra opción es utilizar la extencion jest, que te brinda el autocompletar de las funciones que contiene jest y poder ejecutar los test en el área de debug de vscode.
,

Guillermo Baldán López

student•

Jest correo los tests en paralelo de forma distribuida en diversas instancias para maximizar el rendimiento. La salida de consola es almacenada en un buffer para mostrarse más tarde con los resultados del test. Se reiniciará automáticamente los entornos aislados y el estado global para cada test. De esta forma nunca 2 test entrarán en conflicto el uno con el otro. 2 test no entran en conflicto el uno con el otro si se encuentran en ficheros diferentes. Pero yo he encontrado conflictos entre test dentro de un mismo fichero. Mi pregunta es si dentro de un bloque test, entendiendo que hay otros test dentro del mismo fichero, puedo resetear el entorno de ejecución. Por resetear el entorno de ejecución quiero decir que el efecto que consiga es del volver al entorno como estaba justo antes de que se ejecutaran los test que iban delante. Por test me refiero al código que está dentro de un bloque "test". He comprobado que puedo coger un test que me de conflicto y meterlo dentro un fichero en la carpeta test , donde Jest busca los test, entonces no me da conflicto. Pero me gustaría tener la opción de resetear el entorno de ejecución en un mismo fichero, si esto es posible.

Miguel Angel Reyes Moreno

student•

El orden de ejecución de los console log es:

Antes de todas las pruebas
Antes de cada prueba
Después de cada prueba
Después de todas las pruebas

Naldo Duran

student•

Juan Sebastian Torchia

student•

< De forma predeterminada, los bloques before y after se aplican a todas las pruebas de un archivo. También puede agrupar las pruebas mediante un describe bloque. Cuando están dentro de un describe bloque, los bloques before y after solo se aplican a las pruebas dentro de ese describebloque.

Por ejemplo, digamos que no solo tenemos una base de datos de la ciudad, sino también una base de datos de alimentos. Podríamos hacer diferentes configuraciones para diferentes pruebas:

// Aplicar todos los test a un archivo
beforeEach(() => {
  return initializeCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

describe('matching cities to foods', () => {
  // aplicar solo a un bloque describe
  beforeEach(() => {
    return initializeFoodDatabase();
  });

  test('Vienna <3 sausage', () => {
    expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);
  });

  test('San Juan <3 plantains', () => {
    expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
  });
});

//After each test
afterEach( () => console.log("Despues de cada prueba") );
afterAll( () => console.log("despues de todas las pruebas") );

//Before all test
beforeAll( () => console.log("antes de todas las pruebas") );
beforeEach( () => console.log("Antes de cada prueba") ); 

// Despues de cada prueba

afterEach( () => console.log("Depues de cada prueba"));
afterAll( () => console.log("Despues de todas las pruebas"));

// antes de cada prubea

beforeAll( () => console.log("Antes de todas las pruebas"));
beforeEach( () => console.log("Antes de cada prueba"));

describe("Preparar antes de ejecutar", ()=>{
    test("Es verdader", ()=>{
        expect(true).toBeTruthy();
    });
    test("Es verdader", ()=>{
        expect(true).toBeTruthy();
    });
})```

// Aplicar todos los test a un archivo
beforeEach(() => {
  return initializeCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

describe('matching cities to foods', () => {
  // aplicar solo a un bloque describe
  beforeEach(() => {
    return initializeFoodDatabase();
  });

  test('Vienna <3 sausage', () => {
    expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);
  });

  test('San Juan <3 plantains', () => {
    expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
  });
});

Setup de pruebas

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