Comment tester axios en plaisantant

Question

J'ai cette action à réagir

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

Comment puis-je tester axios dans ce cas? La plaisanterie ont ce cas d'utilisation sur le site pour async code où ils utilisent une maquette de la fonction mais je ne sais pas si je peux le faire avec axios? ref: https://facebook.github.io/jest/docs/tutorial-async.html

Je l'ai fait jusqu'à présent pour tester qu'il est de retour le type correct

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

Je n'ai aucune idée de comment passer dans la maquette de données et d'essais qu'il renvoie cependant, quiconque a des idées?

Je vous remercie à l'avance

Answer 1

Sans utiliser d'autres bibliothèques:

 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({ ... }));
  // ...
});
 

Il est possible de spécifier le code de réponse:

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

Il est possible de changer la maquette en fonction des paramètres:

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

Voir Jest se moquer de la documentation pour plus d'informations.

Answer 2

J'ai utilisé axios-modèle d'adaptateur. Dans ce cas, le service est décrit dans l' ./chatbot. Dans le simulacre de l'adaptateur de vous indiquer quoi retourner lorsque l'API point de terminaison est consommé.

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

Vous pouvez voir l'ensemble de l'exemple ici:

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

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

Answer 3

Je pourrais le faire en suivant les étapes:

1. Créez un dossier __mocks __ / (comme indiqué par @Januartha commenter)
2. Implémenter un fichier fictif axios.js
3. Utiliser mon module implémenté sur test

La maquette va se passer automatiquement

Exemple de module simulé:

 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

Je l'ai fait avec nock , comme ceci:

 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 5

Pour ceux qui cherchent à utiliser axios-modèle d'adaptateur à la place de la mockfetch exemple dans le redux documentation pour async essais, j'ai réussi a utilisé les suivantes

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: 'test@test.com', 
        password: 'test'
    }).reply(200, {token: 'testToken' });

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

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

});

Afin de tester la réussite de ce cas pour 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
  }
}

Étant donné que cela est fait avec une plaisanterie, le localstorage appel à se moque de lui. C'était en src/setupTests.js:

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