reactjs - Jest/React/Redux 错误 : Actions may not have an undefined "type" property. 你有没有拼错一个常量？行动: {}

Question

无论我如何尝试编写 Action 测试，这个错误都会困扰我一段时间，它给了我这个:

“操作可能没有未定义的“类型”属性。您是否拼错了常量？操作:{}"

但如果我控制台记录我正在尝试测试的操作，它会打印出按应有定义的类型。我正在使用 Jest 框架来测试 React/Redux 应用程序。

这是我正在测试的操作:

  export const updateUserGenderAction = (valueToUpdate) => {
  return (dispatch) => Promise.all([
    patchUpdateGender(valueToUpdate).then((response) => {
      dispatch(getSuccessData(response, 'GET_USER_DATA'))
    }).catch((error) => {
      dispatch(getErrorData(error, 'GET_USER_ERROR'))
    })
  ])
}

Action 创造者:

export function getSuccessData (response, actionType) {
  return {
    payload: response,
    type: actionType
  }
}

export function getErrorData (err, errorType) {
  Alert.error(err)
  return {
    payload: err,
    type: errorType
  }
}

和测试尝试:

  it('creates updateUserGender action', () => {
    console.log(actions.updateUserGenderAction())
    const expectedActions = [
            { type: 'GET_USER_DATA', payload: userData },
            { type: 'GET_USER_ERROR', payload: userData }
    ]
    return store.dispatch(actions.updateUserGenderAction()).then(() => {
      expect(store.getActions()).toEqual(expectedActions)
    })
  })


  it('calls updateUserGenderAction', async () => {
    actions.updateUserGenderAction = jest.fn(() => {
      return Promise.resolve(getSuccessData(response, 'GET_USER_DATA'))
    })

    let mockStore = configureMockStore()
    let store = mockStore({})
    await store.dispatch(getSuccessData())

    expect(store.getActions()).toEqual(getSuccessData(response, 'GET_USER_DATA'))

  })

和 console.log(actions.updateUserGenderAction()) :

Promise { { payload: { getUserDataAction: [Function: getUserDataAction], updateUserGenderAction: [Object], updateFirstNameAction: [Function: updateFirstNameAction], updateLastNameAction: [Function: updateLastNameAction], updateMiddleNameAction: [Function: updateMiddleNameAction], updateCountryAction: [Function: updateCountryAction], changePasswordAction: [Function: changePasswordAction], updatePrimaryEmailAction: [Function: updatePrimaryEmailAction], updateUsernameAction: [Function: updateUsernameAction], updateChangeAlternateEmailAction: [Function: updateChangeAlternateEmailAction], updateAddPhoneAction: [Function: updateAddPhoneAction], updateEditPhoneAction: [Function: updateEditPhoneAction], getUserSessionAction: [Function: getUserSessionAction], deleteUserSessionAction: [Function: deleteUserSessionAction], updateDefaultMailingAddressAction: [Function: updateDefaultMailingAddressAction], deleteMailingAddressAction: [Function: deleteMailingAddressAction], addMailingAddressAction: [Function: addMailingAddressAction], editMailingAddressAction: [Function: editMailingAddressAction], getSuccessData: [Function: getSuccessData], getErrorData: [Function: getErrorData] }, type: 'GET_USER_DATA' } }

有谁知道我可能遗漏了什么以及如何正确测试这些操作？先感谢您!

Answer 1

您正在调用没有参数的 getSuccessData()，因此 actionType 未定义:

export function getSuccessData(response, actionType) {
  return {
    payload: response,
    type: actionType // `actionType` is undefined
  }
}

Types should typically be defined as string constants , 所以最好在 Action 创建者中指定它:

const GET_USER_DATA = 'GET_USER_DATA';

export function getSuccessData(response) {
  return {
    type: GET_USER_DATA,
    payload: response,
  }
}

另请参阅:http://redux.js.org/docs/recipes/ReducingBoilerplate.html