Async/Await

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

Resumen

En esta clase aprenderemos a añadir pruebas a funciones que pasan por async y await. Para ello, Vamos a seguir utilizando nuestra petición a la API.

Kirlled Anderson Araque

student•

Por si alguien obtuvo el mismo error: "ReferenceError: regeneratorRuntime is not defined" Logré solucionarlo dejando mi archivo .babelrc con el siguiente json:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

Fuente: Babel

Daniel Páez

student•

GRACIAs mister por la ayuda! me ahorraste tiempo!

JUAN FELIPE CONTRERAS DELGADO

student•

Esto funciono para mi

Carlos Azaustre

student•

Aporto a la magistral clase de Oscar, la forma de usar async/await sin utilizar .then 😃

import { getDataFromApi } from '../promises';

describe('Probar Async/Await', () => {
  test('Realizar una petición a una API', async () => {
    const api = 'https://rickandmortyapi.com/api/character/';
    const getRick = 'https://rickandmortyapi.com/api/character/1'

    const data = await getDataFromApi(api);
    expect(data.results.length).toBeGreaterThanOrEqual(0);

    const data2 = await getDataFromApi(getRick)
    expect(data2.name).toEqual('Rick Sanchez');
  });
});```

Bruno Martin Sendras

student•

Carlos, qué sorpresa encontrarte aquí! Seguí muchos de tus tutos de React.js en Youtube! Estaba por estaba por hacer el mismo aporte. Quisiera sumar lo siguiente: La razón de que pueda escribirse así, es que await produce la interrupción del programa en el punto de ejecución de getDataFromApi(), que devuelve una promesa, transformando así el flujo asincrónico del código en un flujo sincrónico, esperando en ese punto por la resolución de dicha promesa. Es debido a esto que no es necesario el uso del callback done() para indicarle a jest que la prueba ha concluido. Vale aclarar que así, como .then(), await extrae el valor al que la promesa se ha resuelto, y es por eso que podemos escribirlo como const data = await getDataFromApi(...).

Un gusto verte por aqui! Saludos!

Markoz Peña Mendez

student•

Si alguien tuvo el error "ReferenceError: regeneratorRuntime is not defined" no es necesario instalar packages como @babel/runtime y @babel/plugin-transform-runtime, solo deben de hacer un pequeño cambio en su archivo .babelrc

.babelrc

{
   "presets": [
        ["@babel/preset-env", {
             "targets": {
                "node": "current"
             }
       }]
    ]
}

lo que hace targets básicamente es apuntar a nuestra version de node actual. Si usted tiene version de node que soporte async/await no necesita transpilar esa feature en especifico, de lo contrario que no cuente con una version de node que no soporte esa feature si tendrá que recurrir a instalar los primeros packages que mencione al inicio : )

Juan Pablo Celiz

student•

Usted es crack, aquí tiene su like buen hombre 💚

Jenny Aguilar

student•

A mayo de 2021, esta solución está plenamente vigente. Gracias!!!

Carlos Pérez

student•

Usando los beneficios de ES6, queda mas limpio.

describe('Testing using promises with async/await', () => {
	test('Calling an API', async () => {
		const { results } = await getData('https://rickandmortyapi.com/api/character/')
		expect(results.length).toBeGreaterThan(0);
		
		const { name } = await getData('https://rickandmortyapi.com/api/character/1')
		expect(name).toEqual('Rick Sanchez');
		
	})
})

Martín Richard Efio Rivas

student•

Genial.

Bruno Martin Sendras

student•

Se me ocurrió que podía escribir una forma de validar cualquier objeto plano haciendo una función reutilizable que solo trabaje sobre un subconjunto de propiedades. De esta forma podemos usar la llamada real al Api, y crear el snapshot dinámicamente. Solo necesitamos pasarle un array de strings que contenga los nombres de los campos que quiero validar. Aquí les dejo el código:

promises.js

import axios from "axios";

export const getDataFromApi = async url =>
  axios.get(url).then(({ data }) => data);

snapshot.js

// Creamos nuestro snapshot dinamicamente según un subconjunto de los datos.
export const formatSnapshot = (data, props) => {
  const snapshot = props.reduce((anterior, prop) => {
    if (!data.hasOwnProperty(prop)) {
      throw new Error(
        `No se puede formatear.\nEl objeto recibido no tiene la propiedad \"${prop}\"`
      );
    }

    return {
      ...anterior,
      [`${prop}`]: data[`${prop}`]
    };
  }, {});
  return snapshot;
};

test/snapshot.test.js

import { formatSnapshot } from '../snapshot';
import { getDataFromApi } from '../promises';

describe('Comprobando instanteaneas', () => {
    test('Snapshot de objetos JSON planos', async () => {
        const API_URL_RICK = "https://rickandmortyapi.com/api/character/1";
        const rick = await getDataFromApi(API_URL_RICK);
        const expectedProps = ['id', 'name', 'status', 'species', 'gender'];
        expect(formatSnapshot(rick, expectedProps)).toMatchSnapshot();
    })
})

spapshot generado snapshots/snapshot.test.js.snap ` // Jest Snapshot v1, https://goo.gl/fbAQLP

exports[Comprobando instanteaneas Snapshot de objetos JSON planos 1] = Object { "gender": "Male", "id": 1, "name": "Rick Sanchez", "species": "Human", "status": "Alive", }; ` La primera vez que se corre la prueba se crea el snapshot con el objeto recibido. La segunda vez si los datos recibidos cambian (por ejemplo cambiando la url al personaje con id 2), veremos que el test ya no pasa. Con esto, solo seleccionando el conjunto de campos y la url generamos los snapshots de forma generica, pudiendo utilizar subconjuntos y reutilizando la funcion de formateo.

Saludos, espero que les guste!

Juan Jose Vega

student•

Súper pro eso 🔥🔥🔥

Lans Quintero

student•

wow, genial!!

Milton Javier Camelo Arango

student•

Este curso usa Babel pollify, es mejor usar @babel/runtime, en las versiones actuales.

Para usarse se añade al proyecto de la siguiente manera npm install @babel/runtime yarn add @babel/runtime

OJO: Estas no son dependencias de desarrollo

Tambien tienen que instalar su plugin para añadirlo a el archivo .babelrc npm install @babel/plugin-transform-runtime --save-dev yarn add @babel/plugin-transform-runtime --dev

Y para añadirlo al .babelrc

<code>
{
	"presets": ["@babel/preset-env"],
	"plugins":["@babel/plugin-transform-runtime"]
}

Para mas informacion https://babeljs.io/docs/en/babel-plugin-transform-runtime

Geordano Polanco Rodríguez

student•

Es un poco confuso lo que haces utilizando await y then. await y then resuelven la promesa, con lo cual con que utilices uno de ellos es suficiente.

const data = await getDataFromApi(api);
expect(data.results.length).toBeGreaterThan(0);

O bien con then

getDataFromApi(api).then(() => {
	expect(data.results.length).toBeGreaterThan(0)
} );

Me parece innecesario utilizar ambos métodos.

Javier Fuentes Mora

teacher•

se le fue la onda en verdad se equivoco

Joel Alejandro Morales García

student•

Aquí me surgió una duda, no se supone que Al usar await, no es necesario utilizar el then? Simplemente deberíamos asignar el valor retornado de la llamada a la función, o eso es requerimiento de Jest?

Joel Alejandro Morales García

student•

Ya vi en la documentación el ejemplo que usan y si usan el await para retornar el dato, aquí el ejemplo 😃

test('the data is peanut butter', async () => {
  expect.assertions(1);
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

Henry Tabima Giraldo

student•

Yo también esperaba que lo usara como en la documentación. Aunque igual me parece interesante, pues muestra que con el await ya no es necesaria la funcion done()

David Pérez

student•

Para todos los que están viendo este video en 2020 usar await y .then es redundante en una promesa.

Alejandro González Reyes

student•

Si aplicas teoría básica de async/await claramente se dice que await espera hasta que la promesa se resuleva, ya sea de forma satisfactoria o fallida. Por tanto ya no hay necesidad de indicar a jEST cuando la promesa se resolvió. Esta es la gran ventaja de usar este feature de JS.

Por otra parte, no es necesario hacer uso de then. ya que en el ejemplo no tenemos promesas encadenadas.

Antonio Madrid

student•

Buen y sencillo recordatorio, grazie.

Eric Gomez

student•

En caso de tener el Error: ++ReferenceError: regeneratorRuntime is not defined++

Usa mi configuración:

npm i --save-dev @babel/plugin-transform-runtime

en .babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime"]
}

import { DataFromApi } from '../promise';

describe('Probar Async/Await', () => {
  test('Realizar una petición a una API', async () => {
    const api = 'https://rickandmortyapi.com/api/character/';
    const getRick = 'https://rickandmortyapi.com/api/character/1'

    const data = await DataFromApi(api);
    expect(data.results.length).toBeGreaterThanOrEqual(0);

    const data2 = await DataFromApi(getRick)
    expect(data2.name).toEqual('Rick Sanchez');
  });
});

Edgar Lopez Arroyo

student•

Fue muy util :D

Derek Samuel Paúl Peña

student•

Si tienen problemas con el timeout de jest, pásenle un tercer valor a "test", así:

test('should be a x', async () => {
    await getDataFromApi(url).then((data) => {
      console.log(data);
      expect(data).toBe('x');
    });
  }, 300000); <= TIMEOUTE OPTION

David Brito

student•

Para los alumnos del 2019 que reciban errores del tipo “ReferenceError: regeneratorRuntime is not defined”:

Hay que añadir al archivo .babelrc el preset:

["babel-preset-env", {
      "targets": { "browsers": ["last 2 chrome versions"] },
      "useBuiltIns": "usage"
    }]```

Julio César Prieto Pólito

student•

Una pregunta, estoy utilizando la API de The Legend of Zelda para probar los ejercicios y pasan los tests pero a veces nop... es decir, puedo correrlo una vez y pasan, puedo correrlo otra vez (sin modificar el código desde luego) y no siempre pasan, ¿a qué se debe?, muchas gracias.

Kevin Fiorentino

student•

Hola! Primero, ¿Me compartes por favor esa API de Zelda? tengo curiosidad de verla, soy fanatico. Segundo, tu problema puede deberse a un tema de asincronisidad. A veces las solicitudes a una API demoran más o a veces demoran menos. Eso hace que tu código funcione a veces si y no. Comparte el código así te ayudamos. Saludos!

Alejandro González Reyes

student•

Podrían ayudarme con este test

Milton Fabián Ospina León

student•

Desde la clase 14(Promesas) uso mi propia promesa:

export function miPromesa(p) {
    return new Promise((response, reject) => {
        if (p!=1) {
            response("OK");
        }
        else {
            reject("OUCH");
        }
    });
}

Es una promesa sencilla que en caso de pasarle como parametro el 1 la rechaza con el valor "OUCH"; en caso contrario responde "OK". y usando async/await para probarla:

describe('Prueba a miPromesa', () => {
    test('probar miPromesa sin parametro; debe funcionar', async () => {
        expect(await miPromesa()).toBe('OK');
    });
    test('Probar miPromesa con parametro=1; debe fallar', async () => {
        try {
            await miPromesa(1);
        } catch (error) {
            expect(error).toBe('OUCH');
        }
    });
    test('Probar miPromesa con parametro!=1, debe funcionar', async () => {
        expect(await miPromesa(2)).toBe('OK');
    });
});

Michael Merchan

student•

Si a alguien le salio un error le comparto lo siguiente en .babelrc

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "current"
          }
        }
      ]
    ]
  }

Juan Burns

student•

Algo que está bueno aclarar para evitar futuros dolores de cabeza es que, el "await" siempre va a funcionar siempre que se haya declarado como "async" a la función mas próxima que lo envuelve, recuerdenlo, es muy importante tenerlo presente. Saludos!.

Leonardo Pineda

student•

Compañeros, éste es mi aporte, espero sea útil. Saludos.

import { getDataFromApi } from "../src/promesas";

const c = console.log

describe('Probando Promesas', () => {
    test('api de rick-and-morty', async () => {
        const getCharacters :string = 'https://rickandmortyapi.com/api/character/'
        const idCharacter:number = 1
        const getCharacter:string = `https://rickandmortyapi.com/api/character/${idCharacter}`
        
        let { results } = await getDataFromApi(getCharacters)
        let { name } = await getDataFromApi(getCharacter)
        
        /* c(
            results,
            name
        ) */

        const len = results.length
        expect(len).toBeGreaterThan(0)
        expect(name).toEqual('Rick Sanchez')
    } )

José Alexander Guerra Tejada

student•

Alguno se topo con este error ??

● Probar Async/Await › encountered a declaration exception

    ReferenceError: regeneratorRuntime is not defined

      3 | 
      4 | describe('Probar Async/Await', () => {
    > 5 |   test('Realizar una petición a una API', async () => {
        |       ^
      6 |     const api = 'https://rickandmortyapi.com/api/character/';
      7 |     const getRick = 'https://rickandmortyapi.com/api/character/1'

Jorge Méndez Ortega

student•

Si lo encontre el error que comentas pero esto se puede solucionar haciendo un import de babel-polyfill

`` import "babel-polyfill";

Wilson Alejandro Gonzalez Gaitan

student•

Para ese error me toco hacer lo siguiente

Primero instalar

<npm install --save @babel/polyfill>

luego hacer el import quedando asi

<import { getDataFromApi } from '../promise';
import '@babel/polyfill';
describe('Probar Async/Await', () => {
    test('Realizar una peticion a una api', async () => {
        const api = 'https://rickandmortyapi.com/api/character/';
        const getRick = 'https://rickandmortyapi.com/api/character/1'
        await getDataFromApi(api).then(data => {
            expect(data.results.length).toBeGreaterThan(0);
        });
        await getDataFromApi(getRick).then(data => {
            expect(data.name).toEqual('Rick Sanchez');
        });
    });
});>

import { getDataFromApi } from '../promises';

describe('Probar Async/Await', () => {
  test('Realizar una petición a una API', async () => {
    const api = 'https://rickandmortyapi.com/api/character/';
    const getRick = 'https://rickandmortyapi.com/api/character/1'

    const data = await getDataFromApi(api);
    expect(data.results.length).toBeGreaterThanOrEqual(0);

    const data2 = await getDataFromApi(getRick)
    expect(data2.name).toEqual('Rick Sanchez');
  });
});```

describe('Testing using promises with async/await', () => {
	test('Calling an API', async () => {
		const { results } = await getData('https://rickandmortyapi.com/api/character/')
		expect(results.length).toBeGreaterThan(0);
		
		const { name } = await getData('https://rickandmortyapi.com/api/character/1')
		expect(name).toEqual('Rick Sanchez');
		
	})
})

// Creamos nuestro snapshot dinamicamente según un subconjunto de los datos.
export const formatSnapshot = (data, props) => {
  const snapshot = props.reduce((anterior, prop) => {
    if (!data.hasOwnProperty(prop)) {
      throw new Error(
        `No se puede formatear.\nEl objeto recibido no tiene la propiedad \"${prop}\"`
      );
    }

    return {
      ...anterior,
      [`${prop}`]: data[`${prop}`]
    };
  }, {});
  return snapshot;
};

import { formatSnapshot } from '../snapshot';
import { getDataFromApi } from '../promises';

describe('Comprobando instanteaneas', () => {
    test('Snapshot de objetos JSON planos', async () => {
        const API_URL_RICK = "https://rickandmortyapi.com/api/character/1";
        const rick = await getDataFromApi(API_URL_RICK);
        const expectedProps = ['id', 'name', 'status', 'species', 'gender'];
        expect(formatSnapshot(rick, expectedProps)).toMatchSnapshot();
    })
})

import { DataFromApi } from '../promise';

describe('Probar Async/Await', () => {
  test('Realizar una petición a una API', async () => {
    const api = 'https://rickandmortyapi.com/api/character/';
    const getRick = 'https://rickandmortyapi.com/api/character/1'

    const data = await DataFromApi(api);
    expect(data.results.length).toBeGreaterThanOrEqual(0);

    const data2 = await DataFromApi(getRick)
    expect(data2.name).toEqual('Rick Sanchez');
  });
});

describe('Prueba a miPromesa', () => {
    test('probar miPromesa sin parametro; debe funcionar', async () => {
        expect(await miPromesa()).toBe('OK');
    });
    test('Probar miPromesa con parametro=1; debe fallar', async () => {
        try {
            await miPromesa(1);
        } catch (error) {
            expect(error).toBe('OUCH');
        }
    });
    test('Probar miPromesa con parametro!=1, debe funcionar', async () => {
        expect(await miPromesa(2)).toBe('OK');
    });
});

import { getDataFromApi } from "../src/promesas";

const c = console.log

describe('Probando Promesas', () => {
    test('api de rick-and-morty', async () => {
        const getCharacters :string = 'https://rickandmortyapi.com/api/character/'
        const idCharacter:number = 1
        const getCharacter:string = `https://rickandmortyapi.com/api/character/${idCharacter}`
        
        let { results } = await getDataFromApi(getCharacters)
        let { name } = await getDataFromApi(getCharacter)
        
        /* c(
            results,
            name
        ) */

        const len = results.length
        expect(len).toBeGreaterThan(0)
        expect(name).toEqual('Rick Sanchez')
    } ) 

● Probar Async/Await › encountered a declaration exception

    ReferenceError: regeneratorRuntime is not defined

      3 | 
      4 | describe('Probar Async/Await', () => {
    > 5 |   test('Realizar una petición a una API', async () => {
        |       ^
      6 |     const api = 'https://rickandmortyapi.com/api/character/';
      7 |     const getRick = 'https://rickandmortyapi.com/api/character/1'

<import { getDataFromApi } from '../promise';
import '@babel/polyfill';
describe('Probar Async/Await', () => {
    test('Realizar una peticion a una api', async () => {
        const api = 'https://rickandmortyapi.com/api/character/';
        const getRick = 'https://rickandmortyapi.com/api/character/1'
        await getDataFromApi(api).then(data => {
            expect(data.results.length).toBeGreaterThan(0);
        });
        await getDataFromApi(getRick).then(data => {
            expect(data.name).toEqual('Rick Sanchez');
        });
    });
});>

Async/Await

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