No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Probar peticiones fetch

13/16
Recursos

Aportes 21

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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');
      });
  });```

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

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

隆Hola!
Les comparto el link que encontr茅 del repositorio del proyecto:

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

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');
    });
  });
});

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.

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

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

Esta clase deber铆a estar al final del curso.

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鈥檚 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
{
鈥渆nv鈥: {
鈥渢est鈥: {
鈥減lugins鈥: ["@babel/plugin-transform-runtime"]
}
}
}
3
test(鈥楲lamar 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(鈥榚rror鈥)
}
})

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);
  });

Muy regular este curso honestamente y desactualizado.

Sigo sin entender nada

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 鈥榓rray 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.

[
[鈥榓rg1鈥, 鈥榓rg2鈥橾, // 1a vez
[鈥榓rg3鈥, 鈥榓rg4鈥橾, // 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' ] ] );

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;

Convertir Funciones Fetch a Mock Functions

/
Como vimos en las clases anteriores, podermos 鈥渕ockear鈥 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 馃様):
/