działania test Redux że wywołuje API

Question

Jaki jest najlepszy sposób, aby przetestować tę funkcję

export function receivingItems() { 
    return (dispatch, getState) => { 
    axios.get('/api/items') 
     .then(function(response) { 
     dispatch(receivedItems(response.data)); 
     }); 
    }; 
} 

Obecnie jest to co mam

describe('Items Action Creator',() => { 
    it('should create a receiving items function',() => { 
    expect(receivingItems()).to.be.a.function; 
    }); 
}); 

Answer 1

Od Redux “Writing Tests” receptury:

Dla twórców działania asynchronicznych z wykorzystaniem Redux Thunk lub inne oprogramowanie warstwy pośredniej, najlepiej całkowicie drwić sklep Redux do testów. Nadal możesz używać applyMiddleware() z fałszywym sklepem, jak pokazano poniżej (możesz znaleźć następujący kod w redux-mock-store). Możesz także użyć nock, aby sfałszować żądania HTTP.

function fetchTodosRequest() { 
    return { 
    type: FETCH_TODOS_REQUEST 
    } 
} 

function fetchTodosSuccess(body) { 
    return { 
    type: FETCH_TODOS_SUCCESS, 
    body 
    } 
} 

function fetchTodosFailure(ex) { 
    return { 
    type: FETCH_TODOS_FAILURE, 
    ex 
    } 
} 

export function fetchTodos() { 
    return dispatch => { 
    dispatch(fetchTodosRequest()) 
    return fetch('http://example.com/todos') 
     .then(res => res.json()) 
     .then(json => dispatch(fetchTodosSuccess(json.body))) 
     .catch(ex => dispatch(fetchTodosFailure(ex))) 
    } 
} 

można zbadać następująco:

import expect from 'expect' 
import { applyMiddleware } from 'redux' 
import thunk from 'redux-thunk' 
import * as actions from '../../actions/counter' 
import * as types from '../../constants/ActionTypes' 
import nock from 'nock' 

const middlewares = [ thunk ] 

/** 
* Creates a mock of Redux store with middleware. 
*/ 
function mockStore(getState, expectedActions, done) { 
    if (!Array.isArray(expectedActions)) { 
    throw new Error('expectedActions should be an array of expected actions.') 
    } 
    if (typeof done !== 'undefined' && typeof done !== 'function') { 
    throw new Error('done should either be undefined or function.') 
    } 

    function mockStoreWithoutMiddleware() { 
    return { 
     getState() { 
     return typeof getState === 'function' ? 
      getState() : 
      getState 
     }, 

     dispatch(action) { 
     const expectedAction = expectedActions.shift() 

     try { 
      expect(action).toEqual(expectedAction) 
      if (done && !expectedActions.length) { 
      done() 
      } 
      return action 
     } catch (e) { 
      done(e) 
     } 
     } 
    } 
    } 

    const mockStoreWithMiddleware = applyMiddleware(
    ...middlewares 
)(mockStoreWithoutMiddleware) 

    return mockStoreWithMiddleware() 
} 

describe('async actions',() => { 
    afterEach(() => { 
    nock.cleanAll() 
    }) 

    it('creates FETCH_TODOS_SUCCESS when fetching todos has been done', (done) => { 
    nock('http://example.com/') 
     .get('/todos') 
     .reply(200, { todos: ['do something'] }) 

    const expectedActions = [ 
     { type: types.FETCH_TODOS_REQUEST }, 
     { type: types.FETCH_TODOS_SUCCESS, body: { todos: ['do something'] } } 
    ] 
    const store = mockStore({ todos: [] }, expectedActions, done) 
    store.dispatch(actions.fetchTodos()) 
    }) 
}) 

Answer 2

użyłbym zalążek axios (na przykład za pomocą mock-require) i napisać test, który faktycznie wywołuje receivingItems()(dispatch, getState) i zapewnia, że ​​dispatch jest wywoływana z poprawnymi danymi.

Answer 3

że rozwiązano to w różny sposób: wstrzyknięcie Axios jako zależność działania. Preferuję to podejście w stosunku do "zmieniających" zależności.

Użyłem tego samego podejścia do testowania komponentów połączonych z redukcją. Podczas eksportu działań eksportuję dwie wersje: jedną z (do użycia dla komponentów) i jedną bez (do testowania) zależności wiązania.

Oto jak mój plik actions.js wygląda następująco:

import axios from 'axios' 

export const loadDataRequest =() => { 
    return { 
    type: 'LOAD_DATA_REQUEST' 
    } 
} 
export const loadDataError =() => { 
    return { 
    type: 'LOAD_DATA_ERROR' 
    } 
} 
export const loadDataSuccess = (data) =>{ 
    return { 
    type: 'LOAD_DATA_SUCCESS', 
    data 
    } 
} 
export const loadData = (axios) => { 
    return dispatch => { 
    dispatch(loadDataRequest()) 
    axios 
     .get('http://httpbin.org/ip') 
     .then(({data})=> dispatch(loadDataSuccess(data))) 
     .catch(()=> dispatch(loadDataError())) 
    } 
} 
export default { 
    loadData: loadData.bind(null, axios) 
} 

Następnie testuje z jest (actions.test.js):

import { loadData } from './actions' 

describe('testing loadData',()=>{ 
    test('loadData with success', (done)=>{ 

    const get = jest.fn() 
    const data = { 
     mydata: { test: 1 } 
    } 
    get.mockReturnValue(Promise.resolve({data})) 

    let callNumber = 0 
    const dispatch = jest.fn(params =>{ 
     if (callNumber===0){ 
     expect(params).toEqual({ type: 'LOAD_DATA_REQUEST' }) 
     } 
     if (callNumber===1){ 
     expect(params).toEqual({ 
      type: 'LOAD_DATA_SUCCESS', 
      data: data 
     }) 
     done() 
     } 
     callNumber++ 
    }) 
    const axiosMock = { 
     get 
    } 
    loadData(axiosMock)(dispatch) 
    }) 
}) 

Podczas korzystania działania wewnątrz komponentu importować

import Actions from './actions'

I: wszystko wysyłka:

Actions.loadData() // this is the version with axios binded.