Aplicaciones de testing para Async/Await

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

Resumen

Vamos a continuar con nuestro proyecto, En esta clase seguiremos con async/await y le añadiremos nuevas particularidades, En este caso. Que nuestra API cause un error para luego ver cómo manejaremos el error.

Trabajaremos varios ejercicios con async/await. En donde esperamos que las respuestas sean cumplidas para luego evaluar lo que queremos en las expectativas de nuestras pruebas.

Fabián Veliz

student•

Buenas!
Creo que si vamos a utilizar async, hay que resolver el resultado con await.
Les muestro como resolví el test de la API con error:

try {
      // Sabemos que esta request va a devolver un error 500, entonces va a ejecutar el catch con el error.
      await getDataFromApi(`http://httpstat.us/500`);
    } catch(error) {
      expect(error).toEqual(new Error('Request failed with status code 500'));
    }

Espero que les sirva,
Saludos!

fredic yohany rojas

student•

Pienso igual . Yo lo hice asi

try{
      await getDataFromApi(apiError)
    }catch(error){
      expect(error.status).toEqual(404)
    }

Edgar Ubaldo

student•

Tu propuesta es mas entendible, gracias

Jaime Bustamante

student•

¿Por qué al manejar las promesas con async/await estás usando .‘then’ y no simplemnte continuas en la siguiente línea? Me explico:

await getDataFromApi(api)
expect(data.results.length).toBeGraterThan(0)

Digo, si usamos ‘.then’, cuál es el beneficio de declarar la función como async y llamar la promesa con await.

Angel Manuel Rodríguez Salazar

student•

Por convenciones de código. se me ocurren dos formas de escribir la prueba que terminan haciendo exactamente lo mismo:

Como acabas de mencionar:

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

Y como lo hizo el profesor

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

Tan solo son diferencias en cuanto a estilo de programación, ya queda de parte del desarrollador como escribir la prueba.
Independientemente de qué manera hagas las cosas, lo ideal es ser consistente con tu estilo de programación, así el próximo desarrollador que venga tendrá la tarea mas facil entendiendo ese código.

Daniel Páez

student•

Muy afinada tu pregunta y clara la respuesta del compañero, gracias por compartir!

Yo me decante por usar el estilo

const data = await getDataFromApi(getYear);
		expect(data.Dolares).toBeTruthy();

Lo siento más legible.

Manolo Comi

student•

Para los que usan Babel 7

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

y en .babelrc

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

Carlos Delgado

student•

A mi parecer estas ultimas clases sobre el manejo de errores en llamadas a la API no están muy claras y generan más confusión se debería hacer mejores ejemplos reales con diferentes códigos de respuesta

Milton Javier Camelo Arango

student•

test('Error a una API', async () => {
	const apiError = 'https://httpstat.us/404'
	await getDataFromApi(apiError).then(
		(data) => {
			expect(true).toBeTruthy(true) // Nunca entra aca
		}
	).catch(
		(error) => {
			expect(error).toEqual(Error('Request failed with status code 404'))
		}
	)
})

Alejandro González Reyes

student•

Tengo una duda. Cuando hago una peticion a una URL que regresa un codigo de estado 404, y el error lo capturo en un try/catch, Axios me retona un objeto con las estadisticas del error.

Sin embargo, en el navegador solo me muestra un json con el mensaje del error.

Y tu compruebas un Error('Request failded ...')

Son tres escenarios, y mi duda es cual comprobar y además el saber porque la información es tan cambiante de un entorno a otro. Porque el navegador no muestra todo el objeto, o la cadena de Error('Request..').

JUAN FELIPE CONTRERAS DELGADO

student•

Naldo Duran

student•

try {
      // Sabemos que esta request va a devolver un error 500, entonces va a ejecutar el catch con el error.
      await getDataFromApi(`http://httpstat.us/500`);
    } catch(error) {
      expect(error).toEqual(new Error('Request failed with status code 500'));
    }

test('Error a una API', async () => {
	const apiError = 'https://httpstat.us/404'
	await getDataFromApi(apiError).then(
		(data) => {
			expect(true).toBeTruthy(true) // Nunca entra aca
		}
	).catch(
		(error) => {
			expect(error).toEqual(Error('Request failed with status code 404'))
		}
	)
})

Aplicaciones de testing para 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