2

在考虑标题问题时，我非常糟糕，对此感到抱歉。

我的问题：

我正在对我的异步 redux 操作进行单元测试，就像docs 中建议的那样。我使用 模拟 API 调用nock并使用redux-mock-store. 到目前为止它工作得很好，但我有一个测试失败了，即使它确实有效。分派的动作既没有出现在返回的数组中，store.getActions()也没有在 中改变状态store.getState()。我确信它确实会发生，因为当我手动测试并使用 Redux Dev Tools 观察它时，我可以看到它。

在这个动作调度中唯一不同的是，它是在另一个承诺的捕获中的一个承诺中调用的。（我知道这听起来很混乱，只要看看代码！）

我的代码是什么样的：

那个行动：

export const login = (email, password) => {
    return dispatch => {
        dispatch(requestSession());
        return httpPost(sessionUrl, {
            session: {
                email,
                password
            }
        })
        .then(data => {
            dispatch(setUser(data.user));
            dispatch(push('/admin'));
        })
        .catch(error => {
            error.response.json()
            .then(data => {
                dispatch(setError(data.error))
            })
        });
    };
}

此httpPost方法只是一个包装器fetch，如果状态码不在 200-299 范围内则抛出，并且如果它没有失败，则已经将 json 解析为一个对象。如果它看起来相关，我可以在此处添加它，但我不想让它变得更长。

没有出现的动作是dispatch(setError(data.error))。

考试：

it('should create a SET_SESSION_ERROR action', () => {
    nock(/example\.com/)
    .post(sessionPath, {
        session: {
            email: fakeUser.email,
            password: ''
        }
    })
    .reply(422, {
        error: "Invalid email or password"
    })

    const store = mockStore({
        session: {
            isFetching: false,
            user: null,
            error: null
        }
    });

    return store.dispatch(actions.login(
        fakeUser.email,
        ""))
        .then(() => {
            expect(store.getActions()).toInclude({
                type: 'SET_SESSION_ERROR',
                error: 'Invalid email or password'
            })
        })
});

感谢您的阅读。

编辑：

setError动作：

const setError = (error) => ({
  type: 'SET_SESSION_ERROR',
  error,
});

httpPost方法：

export const httpPost = (url, data) => (
  fetch(url, {
    method: 'POST',
    headers: createHeaders(),
    body: JSON.stringify(data),
  })
    .then(checkStatus)
    .then(response => response.json())
);

const checkStatus = (response) => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
};
4

1 回答 1

2

因为您在 catch 方法中使用了嵌套的异步函数 - 您需要返回承诺：

.catch(error => {
  return error.response.json()
  .then(data => {
    dispatch(setError(data.error))
  })
});

否则，将在您的断言之后调用 dispatch。

查看原始示例：
https ://jsfiddle.net/d5fynntw/ - 不返回
https://jsfiddle.net/9b1z73xs/ - 有返回

于 2016-08-01T19:08:22.947 回答