2

我正在尝试将单元测试用例添加到我的 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异常，我在动作调度调用中添加了一个 catch。现在我得到了，Network Error因为 nock 没有嘲笑这个电话。也试过了，moxios改成axios，。似乎没有工作isomorphic-fetchwhatwg-fetch

我在哪里做错了？

4

1 回答 1

0

我知道它是从 2017 年开始的，但也许有人会遇到同样的问题。

所以问题是里面的箭头函数deleteCommand
返回未定义。这就是为什么你得到

它给出了未定义的

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
于 2020-01-09T00:51:26.447 回答