Implementando pruebas a promesas

Cursos Empresas Blog Live Conf Precios

David Flores

teacher•

para lo typos, les recomiendo este plugin Code Spell Checker

Rafael Alvarez Cardona

student•

Genial tu aporte David :D

Bernardo Aguayo Ortega

student•

GRacias!!!

Julian Franco

student•

Para tener soporte de intellisense en VSCode se puede instalar npm i -D @types/jest y van a poder autocompletar las funciones que vienen en el package sin instalar una extension y no agrega peso al bundle de produccion.

Tambien van a poder autocompletar las funciones validas utilizando CTRL + Spacebar:

test('nombre', () => {
  expect(value). // CTRL+Spacebar aca para ver opciones validas
})

Como tienen instalados los tipos, tambien pueden hover por encima de las funciones y van a obtener los argumentos que toman, los tipos de esos argumentos, y una descripcion de que es lo que hace cada funcion.

Israel Blas

student•

Tqm Julian

David Alejandro Velázquez Villegas

student•

Hola, me entró la duda de porque en el caso de probar funciones asíncronas teníamos que hacer un return dentro de la función anónima e investigando me encontré con esta sección dentro de la documentación de jest se las comparto por si le quieren echar un ojo https://jestjs.io/docs/asynchronous

Rulo Code

student•

Probando promesas .then

test('Probar una promesa', ()=&gt; {
    return reverseString2('hola')
        .then(string =&gt; {
            expect(string).toBe('aloh')
        })
})

Probando promesa await

test('Probar async/await', async ()=&gt;{
    const string = await reverseString2('hola');
    expect(string).toBe('aloh')
})

Correr algo antes y después de nuestras pruebas

afterEach( () =&gt; console.log('Despues de cada prueba') );
afterAll( () =&gt; console.log('Despues de todas las pruebas') );
beforeEach( () =&gt; console.log('antes de cada prueba') );
beforeAll( () =&gt; console.log('antes de todas las pruebas') );

Bernardo Aguayo Ortega

student•

Gracias Camilo!!! por cierto vi ua publicación de Freddy y sales! Felicidades!!

roy vargas

student•

Hola! Les comparto otra manera de probar las promesas:

Alan David R.L.

student•

Implementando pruebas a código asíncrono

const reverseStringPromise = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject(Error("There is no string"));
    }
    resolve(str.split("").reverse().join(""));
  });
};

// Test promises
test("The promise should return a reversed word", () => {
  return reverseStringPromise("Platzi").then(str => {
    expect(str).toBe("iztalP");
  });
});

// Test async-await
test("The async-await block code should return a reversed word", async () => {
  const str = await reverseStringPromise("adidas");
  expect(str).toBe("sadida");
});

// Funcion que se ejecuta despues de cada prueba
afterEach(() => console.log("After each test"));
// Funcion que se ejetuta despues de todas las pruebas
afterAll(() => console.log("All the test ended."));

// Funcion que se ejecuta antes de cada prueba
beforeEach(() => console.log("Before each test"));
// Funcion que se ejecuta antes de todas las pruebas
beforeAll(() => console.log("Beginning of all the tests"));

Juan Gaybre Flores

student•

Para practicar hice una Promise con un random, de ese valor random depende si pasa la prueba o no 😄

OSCAR DARIO PAZ BENAVIDES

student•

nice

Bryson Steven Mosquera Florez

student•

En la prueba de las promesas no es necesario retornar la función de reverseString2, ya que la prueba como tal se realiza dentro del then:

const reverseString2 = str => {
  return new Promise((resolve, reject) => {
    if(!str) {
      reject(Error('Error'));
    }

    resolve(str.split('').reverse().join(''));
  });
};

test('Probando una promesa', () => {
  reverseString2('Hola')
    .then(string => {
      expect(string).toBe('aloH');
    });
});

Jose Montoya

student•

Para Jest en general les recomiendo este plugin de vscode, tiene snippets, linteo, permite ejecutar un debugg de cada test e incluso va indicando cuales ya corriste de manera exitosa. VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

Jorge Eliecer Rangel Jimenez

student•

Probando promise y async/await

const reverseStringPromise = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject(Error("Error"));
    }
    resolve(
      str
        .split("")
        .reverse()
        .join("")
    );
  });
};

test("Probar una promesa", () => {
  return reverseStringPromise("hola").then(string => {
    expect(string).toBe("aloh");
  });
});

test("Probar async/await", async () => {
  const string = await reverseStringPromise("hola");
  expect(string).toBe("aloh");
});

afterEach(() => {
  console.log("Despues de cada prueba");
});

afterAll(() => {
  console.log("Despues de todas las pruebas");
});

beforeEach(() => {
  console.log("Antes de cada prueba");
});

beforeAll(() => {
  console.log("Antes de todas las pruebas");
});

Juan David Ramirez Mendoza

student•

No hay una forma de probar el bloque **catch **para saber que mi unidad de código está lanzando la excepción que debería lanzar?

Samuel Miranda Martínez

student•

Hola, puedes intentar algo así:

  test("Probando promesas", () => {
    return reverseString2("Hola")
      .then((string) => {
        expect(string).toBe("aloH");
      })
      .catch((string) => {
        expect(string).toStrictEqual(Error("Error"));
      })
  });

Jair Israel Avilés Eusebio

student•

Yo lo haria de la siguiente manera:

test('Should fail Promise', () => {
  return reverseString2('Hello').then(() => {
     // Si la Promesa se resuelve, se lanzaria una excepcion 
     expect.fail('An error should thrown');
  }).catch((err) => {
     // Definir las aserciones para el escenario de falla
     expect(err.message).toBe('error message');
   });
});

Andres Roberto Coello Goyes

student•

const reverseString2 = (str) => {
    return new Promise( (resolve, reject) => {
        if(!str || str == ''){
            reject(new Error('no existe el texto'));
        }else{
            resolve(str.split("").reverse().join(""));
        }
    })
}

test('probando promesas', () => {
    return reverseString2('Hola')
        .then(string => {
            expect(string).toBe('aloH');
        })
})

Irungaray Agustin

student•

Dejo los tests escritos hasta ahora:

const text = "Hello World";
const fruits = ['apple', 'mellon', 'banana'];

// Strings
test('Should render a Hello World', () => {
  expect(text).toMatch(/Hello World/)
});

// Arrays
test('Do we have Banana?', () => {
  expect(fruits).toContain('banana')
});

test('> than', () => {
  expect(10).toBeGreaterThan(9)
})

// Boolean
test('True', () => {
  expect(true).toBeTruthy()
});

// Callbacks
const reverseString = (str, callback) => {
  callback(str.split("").reverse().join(""))
};

test('Test Callback', () => {
  reverseString('Hola', (str) => {
    expect(str).toBe('aloH')
  })
});

// Promises
const reversePromiseString = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject(Error('Error'))
    }
    resolve(str.split("").reverse().join(""))
  });
};

test('Test Promise',  () => {
  return reversePromiseString('Hola')
    .then(string => {
      expect(string).toBe('aloH')
    });
});

// Async & Await
test('Test async/Await', async ()  => {
  const string = await reversePromiseString('Hola');
  expect(string).toBe('aloH')
});

// Run code we need after each test
afterEach(() => console.log('After each test'));
afterAll(() => console.log('After all tests'));

// Run code we need before each test
beforeEach(() => console.log('Before each test'));
beforeAll(() => console.log('Before all tests'));

Emmanuel Rodríguez

student•

Scoping Para agrupar cada grupo de test , es posible utilizar el bloque describe .

beforeAll(() => console.log('1 - beforeAll'));
afterAll(() => console.log('1 - afterAll'));
beforeEach(() => console.log('1 - beforeEach'));
afterEach(() => console.log('1 - afterEach'));
test('', () => console.log('1 - test'));
describe('Scoped / Nested block', () => {
  beforeAll(() => console.log('2 - beforeAll'));
  afterAll(() => console.log('2 - afterAll'));
  beforeEach(() => console.log('2 - beforeEach'));
  afterEach(() => console.log('2 - afterEach'));
  test('', () => console.log('2 - test'));
});

// 1 - beforeAll
// 1 - beforeEach
// 1 - test
// 1 - afterEach
// 2 - beforeAll
// 1 - beforeEach
// 2 - beforeEach
// 2 - test
// 2 - afterEach
// 1 - afterEach
// 2 - afterAll
// 1 - afterAll

Jorge De Jesus Tejeda Bello

student•

Si por alguna razón al utilizar Async/Await y corren la prueba reciben el siguiente error

ReferenceError: regeneratorRuntime is not defined

deben agregar en el archivo .babelrc el siguiente objeto

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

'node':current es para que detecte la version de node que tengas instaladas y detectara automaticamente si tienes Async/Await

despues de esto vamos a instalar

nom i @babel/preset-env -D

Jon Ander Oribe

student•

A mi me daba fallaba React con esa configuración, pero me empezó a funcionar con una muy cercana. Os la dejo aquí por si es útil.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "targets":{
     "node":"current"
  },
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

Diego Toro Cárdenas

student•

Recordé una clase de Webpack donde enseñan a usar Babel.

Amgonzalez@altec.com.ar

student•

Para quien lo necesite la aplicacion con todos los TEST vistos hasta esta clase. Repositorio GIT una vez descargada: npm install y npm jest para iniciar. descargar

Irving Juárez

student•

Yo creo que el afterAll, beforeAll, etc son un poco mas utiles cuando a nuestras pruebas les establecemos un scope usando describe. Describe nos ayuda a agrupar una seria de pruebas, se usa de la siguiente forma:

describe("title of the group", () => {
  test("...", () => {})

  test("...", () => {})

  test("...", () => {})
})

Sergio Estrella

teacher•

Algo a tener en cuenta al hacer tests a procesos asíncronos es que podemos delimitar el numero de callbacks que esperamos sean llamados. . Esto lo podemos hacer con el método que aparece abajo, designando el número de callbacks o assertions que esperamos pasen.

expect.assertions(3)

Por ejemplo, si la función doAsync llama dos callbacks, podemos numerar que esperamos 2 assertions, como se muestra en el ejemplo.

test('doAsync calls both callbacks', () => {
  expect.assertions(2);
  function callback1(data) {
    expect(data).toBeTruthy();
  }
  function callback2(data) {
    expect(data).toBeTruthy();
  }

  doAsync(callback1, callback2);
});

Si quieren saber más acerca de los métodos que tiene expect, les dejo acá la documentación oficial de Jest ;)

Reinaldo Mendoza

student•

Buenisimo

Jair Israel Avilés Eusebio

student•

Aqui esta la liga para mayor detalle de las funciones auxiliares hooks. No confudnir con las funciones de react hooks.

Michelle Elizabeth Pérez Sosa

student•

Si es que les falla el async/await a mi me sirvió crear un archivo setupTest.js importando dentro runtime (import 'regenerator-runtime/runtime') y llamando a este archivo desde el package.json como "jest": { "setupFilesAfterEnv": [ "./setupTests.js" ] }

justo después de las devDependencies

Diego Toro Cárdenas

student•

De pronto estas respuestas se complementan.

afterEach( () =&gt; console.log('Despues de cada prueba') );
afterAll( () =&gt; console.log('Despues de todas las pruebas') );
beforeEach( () =&gt; console.log('antes de cada prueba') );
beforeAll( () =&gt; console.log('antes de todas las pruebas') );

const reverseStringPromise = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject(Error("There is no string"));
    }
    resolve(str.split("").reverse().join(""));
  });
};

// Test promises
test("The promise should return a reversed word", () => {
  return reverseStringPromise("Platzi").then(str => {
    expect(str).toBe("iztalP");
  });
});

// Test async-await
test("The async-await block code should return a reversed word", async () => {
  const str = await reverseStringPromise("adidas");
  expect(str).toBe("sadida");
});

// Funcion que se ejecuta despues de cada prueba
afterEach(() => console.log("After each test"));
// Funcion que se ejetuta despues de todas las pruebas
afterAll(() => console.log("All the test ended."));

// Funcion que se ejecuta antes de cada prueba
beforeEach(() => console.log("Before each test"));
// Funcion que se ejecuta antes de todas las pruebas
beforeAll(() => console.log("Beginning of all the tests"));

const reverseString2 = str => {
  return new Promise((resolve, reject) => {
    if(!str) {
      reject(Error('Error'));
    }

    resolve(str.split('').reverse().join(''));
  });
};

test('Probando una promesa', () => {
  reverseString2('Hola')
    .then(string => {
      expect(string).toBe('aloH');
    });
});

const reverseStringPromise = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject(Error("Error"));
    }
    resolve(
      str
        .split("")
        .reverse()
        .join("")
    );
  });
};

test("Probar una promesa", () => {
  return reverseStringPromise("hola").then(string => {
    expect(string).toBe("aloh");
  });
});

test("Probar async/await", async () => {
  const string = await reverseStringPromise("hola");
  expect(string).toBe("aloh");
});

afterEach(() => {
  console.log("Despues de cada prueba");
});

afterAll(() => {
  console.log("Despues de todas las pruebas");
});

beforeEach(() => {
  console.log("Antes de cada prueba");
});

beforeAll(() => {
  console.log("Antes de todas las pruebas");
});

  test("Probando promesas", () => {
    return reverseString2("Hola")
      .then((string) => {
        expect(string).toBe("aloH");
      })
      .catch((string) => {
        expect(string).toStrictEqual(Error("Error"));
      })
  });

test('Should fail Promise', () => {
  return reverseString2('Hello').then(() => {
     // Si la Promesa se resuelve, se lanzaria una excepcion 
     expect.fail('An error should thrown');
  }).catch((err) => {
     // Definir las aserciones para el escenario de falla
     expect(err.message).toBe('error message');
   });
});

const reverseString2 = (str) => {
    return new Promise( (resolve, reject) => {
        if(!str || str == ''){
            reject(new Error('no existe el texto'));
        }else{
            resolve(str.split("").reverse().join(""));
        }
    })
}

test('probando promesas', () => {
    return reverseString2('Hola')
        .then(string => {
            expect(string).toBe('aloH');
        })
})

const text = "Hello World";
const fruits = ['apple', 'mellon', 'banana'];

// Strings
test('Should render a Hello World', () => {
  expect(text).toMatch(/Hello World/)
});

// Arrays
test('Do we have Banana?', () => {
  expect(fruits).toContain('banana')
});

test('> than', () => {
  expect(10).toBeGreaterThan(9)
})

// Boolean
test('True', () => {
  expect(true).toBeTruthy()
});

// Callbacks
const reverseString = (str, callback) => {
  callback(str.split("").reverse().join(""))
};

test('Test Callback', () => {
  reverseString('Hola', (str) => {
    expect(str).toBe('aloH')
  })
});

// Promises
const reversePromiseString = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject(Error('Error'))
    }
    resolve(str.split("").reverse().join(""))
  });
};

test('Test Promise',  () => {
  return reversePromiseString('Hola')
    .then(string => {
      expect(string).toBe('aloH')
    });
});

// Async & Await
test('Test async/Await', async ()  => {
  const string = await reversePromiseString('Hola');
  expect(string).toBe('aloH')
});

// Run code we need after each test
afterEach(() => console.log('After each test'));
afterAll(() => console.log('After all tests'));

// Run code we need before each test
beforeEach(() => console.log('Before each test'));
beforeAll(() => console.log('Before all tests'));

beforeAll(() => console.log('1 - beforeAll'));
afterAll(() => console.log('1 - afterAll'));
beforeEach(() => console.log('1 - beforeEach'));
afterEach(() => console.log('1 - afterEach'));
test('', () => console.log('1 - test'));
describe('Scoped / Nested block', () => {
  beforeAll(() => console.log('2 - beforeAll'));
  afterAll(() => console.log('2 - afterAll'));
  beforeEach(() => console.log('2 - beforeEach'));
  afterEach(() => console.log('2 - afterEach'));
  test('', () => console.log('2 - test'));
});

// 1 - beforeAll
// 1 - beforeEach
// 1 - test
// 1 - afterEach
// 2 - beforeAll
// 1 - beforeEach
// 2 - beforeEach
// 2 - test
// 2 - afterEach
// 1 - afterEach
// 2 - afterAll
// 1 - afterAll

test('doAsync calls both callbacks', () => {
  expect.assertions(2);
  function callback1(data) {
    expect(data).toBeTruthy();
  }
  function callback2(data) {
    expect(data).toBeTruthy();
  }

  doAsync(callback1, callback2);
});

Implementando pruebas a promesas

Bienvenida

Bienvenido al Curso de Jest

¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

Introducción a Jest

Preparación del entorno con Jest

Implementando pruebas para Boolean y Array

Implementando pruebas a promesas

Watch y Coverage

Usando Jest con React

Preparar proyecto

Crear mocks

Implementar provider mock

Snapshot

Probar Actions

Probar Reducers

Probar peticiones fetch

Deploy y CI con Travis

Jest + CI

Probando el proyecto antes de hacer deploy

Recapitulación y cierre