reactjs - react - ¿Cómo puedo probar axios en broma?

react native axios example

Question

Tengo esta acción en reaccionar

export function fetchPosts() {
    const request = axios.get(`${WORDPRESS_URL}`);
    return {
        type: FETCH_POSTS,
        payload: request
    }
}

¿Cómo pruebo los axios en este caso? No tengo este caso de uso en el sitio para el código asíncrono donde usan una función simulada, pero no sé si puedo hacer esto con axios. ref: https://facebook.github.io/jest/docs/tutorial-async.html

He hecho esto hasta ahora para probar que está devolviendo el tipo correcto

it(''should dispatch actions with the correct type'', () => {
    store.dispatch(fetchPosts());
    let action = store.getActions();
    expect(action[0].type).toBe(FETCH_POSTS);
});

No tengo idea de cómo pasar los datos simulados y la prueba que devuelve, sin embargo, ¿alguien tiene alguna idea?

Gracias de antemano

Answer 1

He hecho esto con nock , como así:

import nock from ''nock''
import axios from ''axios''
import httpAdapter from ''axios/lib/adapters/http''

axios.defaults.adapter = httpAdapter

describe(''foo'', () => {
    it(''bar'', () => {
        nock(''https://example.com:443'')
            .get(''/example'')
            .reply(200, ''some payload'')

        // test...
    })
})

Answer 2

Para aquellos que buscan utilizar el adaptador de simulación de axios en lugar del ejemplo de simulación en la documentación de redux para pruebas asíncronas , utilicé con éxito lo siguiente

actions.test.js :

describe(''SignInUser'', () => {
  var history = {
    push: function(str) {
        expect(str).toEqual(''/feed'');
    }
  }

  it(''Dispatches authorization'', () => {
    let mock = new MockAdapter(axios);
    mock.onPost(`${ROOT_URL}/auth/signin`, { 
        email: ''[email protected]'', 
        password: ''test''
    }).reply(200, {token: ''testToken'' });

    const expectedActions = [ { type: types.AUTH_USER } ];
    const store = mockStore({ auth: [] });

    return store.dispatch(actions.signInUser({ 
      email: ''[email protected]'', 
      password: ''test'',
    }, history)).then(() => {
        expect(store.getActions()).toEqual(expectedActions);
  });

});

Para probar un caso exitoso para signInUser en actions/index.js :

export const signInUser = ({ email, password }, history) => async dispatch => {
  const res = await axios.post(`${ROOT_URL}/auth/signin`, { email, password })
    .catch(({ response: { data } }) => {
        ...
  });

  if (res) {
    dispatch({ type: AUTH_USER });                 // test verified this
    localStorage.setItem(''token'', res.data.token); // test mocked this
    history.push(''/feed'');                         // test mocked this
  }
}

Dado que esto se está haciendo con broma, la llamada al almacén local tuvo que ser burlada. Esto fue en src/setupTests.js :

const localStorageMock = {
  removeItem: jest.fn(),
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;

Answer 3

Podría hacer eso siguiendo los pasos:

1. Cree una carpeta __mocks __ / (como señala el comentario de @Januartha)
2. Implementar un archivo simulado axios.js .
3. Usar mi módulo implementado en prueba

El simulacro sucederá automáticamente.

Ejemplo del módulo simulado:

module.exports = {
    get: jest.fn((url) => {
        if (url === ''/something'') {
            return Promise.resolve({
                data: ''data''
            });
        }
    }),
    post: jest.fn((url) => {
        if (url === ''/something'') {
            return Promise.resolve({
                data: ''data''
            });
        }
        if (url === ''/something2'') {
            return Promise.resolve({
                data: ''data2''
            });
        }
    }),
    create: jest.fn(function () {
        return this;
    })
};

Answer 4

Sin usar ninguna otra librería:

import * as axios from "axios";

// Mock out all top level functions, such as get, put, delete and post:
jest.mock("axios");

// ...

it("good response", () => {
  axios.get.mockImplementation(() => Promise.resolve({ data: {...} }));
  // ...
});

it("bad response", () => {
  axios.get.mockImplementation(() => Promise.reject({ ... }));
  // ...
});

Es posible especificar el código de respuesta:

axios.get.mockImplementation(() => Promise.resolve({ status: 200, data: {...} }));

Es posible cambiar el simulacro basado en los parámetros:

axios.get.mockImplementation((url) => {
    if (url === ''www.example.com'') {
        return Promise.resolve({ data: {...} });
    } else {
        //...
    }
});

Ver Jest mocking docs para más información.

Answer 5

Utilicé axios-mock-adapter. En este caso el servicio se describe en ./chatbot. En el adaptador simulado, especifique qué devolver cuando se consume el punto final de la API.

import axios from ''axios'';
import MockAdapter from ''axios-mock-adapter'';
import chatbot from ''./chatbot'';

describe(''Chatbot'', () => {
    it(''returns data when sendMessage is called'', done => {
        var mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onGet(''https://us-central1-hutoma-backend.cloudfunctions.net/chat'').reply(200, data);

        chatbot.sendMessage(0, ''any'').then(response => {
            expect(response).toEqual(data);
            done();
        });
    });
});

Puedes ver el ejemplo completo aquí:

Servicio: https://github.com/lnolazco/hutoma-test/blob/master/src/services/chatbot.js

Prueba: https://github.com/lnolazco/hutoma-test/blob/master/src/services/chatbot.test.js