Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Probar peticiones fetch

13/16
Recursos

Aportes 19

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hay que tener mucho cuidado cuando se trabaja con promesas desde jest, porque si no se retorna el resultado de la promesa en el test o se usa un callback para finalizar el test dentro del then siempre van a pasar las pruebas así estén fallando.

test('Llamar una API y retornar datos', () => {
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
    getData('https://google.com')
      .then((response) => {
        expect(response.data).toEqual('123456');
      });
    expect(fetch.mock.calls[0][0]).toEqual('https://google.com');
  });

// posibles soluciones que he utilizado:

// 1. Callback

test('Llamar una API y retornar datos', (done) => {
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
    getData('https://google.com')
      .then((response) => {
        expect(response.data).toEqual('12345');
        done();
      });
    expect(fetch.mock.calls[0][0]).toEqual('https://google.com');
  });

// 2. Retornar promesa

test('Llamar una API y retornar datos', () => {
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
    return getData('https://google.com')
      .then((response) => {
        expect(response.data).toEqual('12345');
      });
  });```

Los docs de Jest son muy claros de entender sobre como maneja la asincronía, de verdad les recomiendo leer el apartado:
https://jestjs.io/docs/en/asynchronous

Hubiera sido genial poder ver un test con alguna librería como axios.

¡Hola!
Les comparto el link que encontré del repositorio del proyecto:

https://github.com/gndx/platzi-store

Es una mejor prácticar e incluso más sencillo de testear nuestro código si les pasamos las dependencias a las funciones. Es decir en vez de esto: function(api) { … }, hacer esto: function(fetch, api) {…}, donde fetch vendría a ser una funcion mock. De esta manera podríamos incluso testear casos de exito o testear errores.

Si desean no sobre-escribir el fetch nativo hay que utilizar esto en la configuracion:

// setupTest.js
require('jest-fetch-mock').enableFetchMocks();

En su setupTest.js. Ahora queda fetch como el nativo y tenemos acceso a fetchMock globalmente, y el unico cambio es que el uso de fetch en nuestras pruebas se cambiaria por fetchMock para no sobre escribir la variable global y separar ambos tipos de fetch:

import getData from '../../../src/utils/getData';

describe('Fetch API', () => {
  beforeEach(() => {
    fetchMock.resetMocks();
  });

  test('Llamar una API y retornar datos', () => {
    fetchMock.mockResponseOnce(JSON.stringify({ data: '12345' }));

    getData('https://google.com').then(res => {
      return expect(res.data).toEqual('12345');
    });
  });
});

Esta clase debería estar al final del curso.

npm install --save-dev jest-fetch-mock

https://github.com/jefflau/jest-fetch-mock#readme

A nivel de experiencia de desarrollo, si os estaís encontrando con errores a la hora de importar las dependencias de desarrollo en nuestro código. Tipo:
'enzyme? should belisted in the project’s dependencies, not devDependencies.
Podemos indicar una nueva regla en el fichero de conf de eslintrc, tal:

  "rules": {
    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
    "react/jsx-filename-extension": 0,
...
}

No entido mucho esto, la parte de el global de fetch-mock, pero bueno hay que verlo varias veces

const getData = (api) => {
  return fetch(api)
    .then(response => response.json())
    .then(response => response)
    .catch(error => error);
};

export default getData;

para usar async await
1 npm install --save-dev @babel/plugin-transform-runtime
2 en .babelrc
{
“env”: {
“test”: {
“plugins”: ["@babel/plugin-transform-runtime"]
}
}
}
3
test(‘Llamar una api y retornar datos’,async ()=>{
fetch.mockResponseOnce(JSON.stringify({data:‘13245’}));
try {
const response = await getData(‘https://google.com’);
expect(response.data).toEqual(‘13245’);
expect(fetch.mock.calls[0][0]).toEqual(‘https://google.com’)
} catch (error) {
expect(error).toMatch(‘error’)
}
})

Para realizar importaciones automaticas, tener abierto el archivo a importar y al colocar el nombre, te ofrecera la opcion de importar automaticamente.

import getData from '../../utils/getData';

describe('Fetch API', () => {
  beforeEach(() => {
    fetch.resetMocks();
  });

  test('Llamar una API y retornar datos', () => {
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
    getData('https://google.com').then((response) => {
      expect(response.data).toEqual('12345');
    });
    expect(fetch.mock.calls[0][0]).toEqual('https://google.com');
  });

});

No entiendo, me pasa el test, pero los objetos a comparar son diferentes.


(node:9112) UnhandledPromiseRejectionWarning: Error: expect(received).toEqual(expected) // deep equality

Expected: "12345"
Received: undefined
(node:9112) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:9112) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 PASS  src/__test__/utils/getData.test.js (6.676 s)
  Fetch API
    √ Llamar una API y retornar datos (42 ms)
test('Llamar una API y retornar datos', () => {
    const URL = 'https://google.com';
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));

    getData(URL).then((response) => {
      expect(response.data).toEqual('12345');
    });

    // Validamos primero que nuestra llamadas a google se estan realizando
    expect(fetch.mock.calls[0][0]).toEqual(URL);
  });

getData.test.js

import getData from '../../utils/getData';

describe('Fetch API ', () => {
  beforeEach(() => {
    fetch.resetMocks();
  });
  
  test('Llamar una API y retornar datos', () => {
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));

    getData('https://google.com')
      .then((response) => {
        expect(response.data).toEqual('12345');
      })
      .catch((err) => console.log(err));
    
    expect(fetch.mock.calls[0][0]).toEqual('https://google.com');
  });
});

setupTest.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
global.fetch = require('jest-fetch-mock');

getdata.js

const getData = (api) => {
  return fetch(api)
    .then(response => response.json())
    .then(data => data)
    .catch(error => error);
};

export default getData;

mockFn.mock.calls

Una mock function nos permite saber cuántas veces se llamó la función y con qué argumentos fue llamada.
Es por eso que mock.calls retorna un ‘array de arrays’ donde cada array es un llamado de la función y cada item es un argumento con el que fue llamado.
Por ejemplo: una función que se llamó dos veces y en cada vez se le pasaron 2 argumentos.

[
[‘arg1’, ‘arg2’], // 1a vez
[‘arg3’, ‘arg4’], // 2a vez
];

Por lo que esta parte

expect(fetch.mock.calls[0][0]).toEqual( 'https://google.com' );

Se puede escribir también como:

expect(fetch.mock.calls).toEqual( [ [ 'https://google.com' ] ] );

Convertir Funciones Fetch a Mock Functions

/
Como vimos en las clases anteriores, podermos “mockear” una funcion normal para que podamos analizarla y manipularla mucha mas a detalle cuando estamos testeando a la misma, pero no podemos mockear una funcion fetch de la misma manera en la que mockeariamos otras funciones, estas son las especiales, por lo que debemos hacer ciertas configuraciones a esa funcion fetch para que pueda ser mockeada como cualquier otra funcion, pero hacer esto manualmente es complicado y poco escalable si tu proyecto crece, por lo que requerimo de una libreria externa que nos ayude en esto, y en este caso esa libreria externa es jest-fetch-mock.
/
Aqui les dejo un par de videos que les explica esto mas a detalle (estan en ingles, sorry 😔):
/