Probar peticiones fetch

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

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 ‘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' ] ] );

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 “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 😔):
/

• Mockear una funcion fetch manualmente
  /
• Mockear una funcion fetch usando jest-fetch-mock