Модульное тестирование асинхронных действий Redux

Я пытаюсь добавить примеры модульных тестов в свои действия с редукцией.

Я пробовал это, это и это

Я использую thunk, promise-middleware в своих действиях

одно из моих действий похоже на это

export function deleteCommand(id) {
  return (dispatch) => {
    dispatch({
      type: 'DELETE_COMMAND',
      payload: axios.post(`${Config.apiUrl}delete`, { _id: id })
    })
  }
}

модульный тест для этого

import configureMockStore from "redux-mock-store"
const middlewares = [thunk, promiseMiddleware()];
const mockStore = configureMockStore(middlewares)

  it('creates DELETE_COMMAND_FULFILLED after deleting entry', (done) => {

    nock('http://localhost:8081/')
      .post('/delete',{
        _id: 1
      })
      .reply(200, {})

    const expectedActions = [{
      type: 'DELETE_COMMAND_FULFILLED',
      payload: {}
    }]

    const store = mockStore({
      command: {
        commands: []
      }
    })

    store.dispatch(actions.deleteCommand({_id: 1}).then(function () {
      expect(store.getActions())
        .toEqual(expectedActions)
      done();
    })

  })

Я использую nock, redux-mock-store, сконфигурированный с thunk, promise middleware

Это дает then of undefined

затем я изменил действие, чтобы вернуть обещание, затем я получил исключение unhandled promise reject, я добавил улов к вызову отправки действия. Теперь я получаю Network Error, потому что nock не издевается над вызовом. Также пробовал moxios, менял axios на isomorphic-fetch, whatwg-fetch. Кажется, не работает

Где я делаю это неправильно?.


javascript unit-testing redux redux-thunk nock
person Sreevisakh    schedule 15.05.2017    source источник
comment
Правильно ли вы настраиваете фиктивный магазин? то есть добавление промежуточного программного обеспечения thunk и promise.   -  person Nick    schedule 15.05.2017
comment
Я также обновил свой вопрос с фиктивным магазином.   -  person Sreevisakh    schedule 16.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я знаю, что это с 2017 года, но, возможно, у кого-то будет такая же проблема.

Итак, проблема в том, что функция стрелки внутри deleteCommand
возвращает значение undefined. Вот почему вы получаете

Это дает тогда неопределенного

TLDR: если вы используете redux-thunk с redux-promise-middleware, вы должны вернуть внутреннюю отправку

вот официальная документация по redux-promise-middleware

Решение очень простое:
Вариант 1. Добавьте return внутрь стрелочной функции.

    export function deleteCommand(id) {
      return (dispatch) => {
        return dispatch({
          type: 'DELETE_COMMAND',
          payload: axios.post(`${Config.apiUrl}delete`, { _id: id })
        })
      }
    }

Вариант 2. Удалите фигурные скобки из функции стрелки.

export function deleteCommand(id) {
  return (dispatch) => 
    dispatch({
      type: 'DELETE_COMMAND',
      payload: axios.post(`${Config.apiUrl}delete`, { _id: id })
    })
}

Теперь вы можете сделать

store.deleteCommand(<some id>).then(...)

В общем стрелочные функции и возврат

  • Вернуть простой объект
// option 1
const arrowFuncOne = () => {
  return {...someProps}
}

// option 2
const arrowFuncTwo = () => ({
   ...someProps
})

// This means that you returning an expression 
//same as

// return a result of other function
const arrowFuncCallFunOne = () => callSomeOtherFunc()
// or
const arrowCallFunkTwo = () => {return callSomeOtherFunc()}


// However
// wrong 
const arrowCallFunkNoReturn = () => {callSomeOtherFunc()}
// in this case the curly braces are just the body of the function  
// and inside this body there is no return at all
person Rami Loiferman    schedule 09.01.2020