React Redux异步Action测试异常：仅触发LOGIN未触发LOGIN_SUCCESS

我来帮你排查下这个异步Action测试的问题，看了你的代码后，发现几个核心的不匹配点，调整后应该就能拿到预期的两个Action了：

1. Action返回结构与预期不匹配 #

你的loginSuccess函数返回的是{ type: LOGIN_SUCCESS, data }，但测试用例里的expectedActions写的是body字段，这是第一个不匹配：

// 你的Action代码（正确结构）
function loginSuccess(data) {
  return { type: LOGIN_SUCCESS, data }; // 字段是data
}

// 测试用例里要改成对应结构
const expectedActions = [
  { type: actions.LOGIN },
  { 
    type: actions.LOGIN_SUCCESS, 
    data: { 
      data: { userName: '8888888888888888', token: '1ca9c02f-d6d2-4eb8-92fd-cec12441f091' },
      vin: '8888888888888888' // 因为你用了Object.assign(response.data, fields)，会带上传入的vin
    } 
  },
];

2. 测试传入的参数与Action依赖不匹配 #

你的login Action里调用的是api.register(fields.vin)，但测试时dispatch传入的是{ id: '8888888888888888' }，没有vin字段，导致api.register拿到的参数是undefined，请求可能根本没正确发送：

// 测试里要传vin字段，和Action里的依赖对应
return store.dispatch(actions.login({ vin: '8888888888888888' })).then(() => {
  expect(store.getActions()).toEqual(expectedActions);
});

3. 请求方法/路径可能不匹配 #

如果你的Api类里的register方法是POST请求（注册接口一般是POST），那测试里的fetchMock.getOnce要改成fetchMock.postOnce，否则模拟的请求不会被命中：

// 改成postOnce（如果实际是POST请求的话）
fetchMock.postOnce('/register', {
  body: {
    data: {
      userName: '8888888888888888',
      token: '1ca9c02f-d6d2-4eb8-92fd-cec12441f091',
    },
  },
  headers: { 'content-type': 'application/json' },
});

4. 优化Action的异步逻辑（可选但推荐） #

你的Action混合了async/await和then/catch，统一用async/await会让逻辑更清晰，也更容易调试：

export function login(fields) {
  return async dispatch => {
    dispatch({ type: LOGIN });
    try {
      const response = await api.register(fields.vin);
      const data = Object.assign(response.data, fields);
      dispatch(loginSuccess(data));
    } catch (error) {
      dispatch(loginError(error));
    }
  };
}

调整完这几点后，再运行测试，应该就能同时触发LOGIN和LOGIN_SUCCESS两个Action了。

内容的提问来源于stack exchange，提问作者Marcel Unger