Javascript redux thunk结构和测试副作用

我使用的是

redux thunk

，不确定副作用（

showarterror

函数）的结构是否正确。虽然我的jest测试设置乍一看似乎很好，但我发现了一个错误：

jest.fn（）值必须是模拟函数或间谍。收到：未定义`

showAlertError

函数是否位于正确的位置，或者应该位于action creator或其他位置？另外，如果这是它的正确位置，那么我如何测试它是否被调用

export const submitTeammateInvitation = (data) => {
  const config = {
   // config code
  };

  return async (dispatch) => {
    dispatch(submitTeammateInvitationRequest(data));

    try {
      const response = await fetch(inviteTeammateEndpoint, config);
      const jsonResponse = await response.json();
      if (!response.ok) {
        showErrorAlert(jsonResponse);
        dispatch(submitTeammateInvitationError(jsonResponse));

        throw new Error(response.statusText);
      }

      dispatch(submitTeammateInvitationSuccess(jsonResponse));
    } catch (error) {
      if (process.env.NODE_ENV === 'development') {
        console.log('Request failed', error);
      }
    }
  };
};

试验

---

您可以手动模拟报警功能。以下是解决方案：

actionCreators.ts

：

从“节点获取”导入获取；
从“/showErrorAlert”导入{showErrorAlert}；
const SUBMIT_TEAMATE_investment_REQUEST='SUBMIT_TEAMATE_investment_REQUEST'；
const SUBMIT_TEAMATE_investment_SUCCESS='SUBMIT_TEAMATE_investment_SUCCESS'；
const SUBMIT_TEAMATE_INVITATION_ERROR='SUBMIT_TEAMATE_INVITATION_ERROR'；
export const submitTeammateInvitationRequest=data=>（{type:SUBMIT\u TEAMATE\u INVITATION\u REQUEST，负载：{data}}）；
export const submitTeammateInvitationSuccess=data=>（{type:SUBMIT\u TEAMATE\u INVITATION\u SUCCESS，负载：{data}}）；
export const submitTeammateInvitationError=data=>（{type:SUBMIT\u TEAMATE\u INVITATION\u ERROR，负载：{data}}）；
export const submitTeammateInvitation=数据=>{
常量配置={
//配置代码
};
常量受邀端点https://github.com/mrdulin';
返回异步调度=>{
发送（提交的邀请请求（数据））；
试一试{
const response=wait fetch（端点，配置）；
const jsonResponse=await response.json（）；
如果（！response.ok）{
紧急警报（jsonResponse）；
派遣（提交邀请人（jsonResponse））；
抛出新错误（response.statusText）；
}
发送（提交邀请成功（jsonResponse））；
}捕获（错误）{
if（process.env.NODE_env===‘development’）{
日志（'请求失败'，错误）；
}
}
};
};

淋浴警报.ts

：

导出函数警报（jsonResponse）{
log（jsonResponse）；
}

actionCreators.spec.ts

：

导入{
提交的邀请函，
已提交的邀请请求，
提交邀请成功，
提交邀请人
}来自“/actionCreators”；
从“redux模拟存储”导入createMockStore；
从'redux-thunk'导入thunk，{ThunkDispatch}；
从“节点获取”导入获取；
从'redux'导入{AnyAction}；
从“/showErrorAlert”导入{showErrorAlert}；
const{Response}=jest.requireActual（'node-fetch'）；
mock（'node-fetch'）；
jest.mock（'./bathrorAlert.ts'，（）=>{
返回{
淋浴警报：jest.fn（）
};
});
const middleware=[thunk]；
const mockStore=createMockStore
您可以手动模拟
淋浴警报
功能。以下是解决方案：

actionCreators.ts
：

从“节点获取”导入获取；
从“/showErrorAlert”导入{showErrorAlert}；
const SUBMIT_TEAMATE_investment_REQUEST='SUBMIT_TEAMATE_investment_REQUEST'；
const SUBMIT_TEAMATE_investment_SUCCESS='SUBMIT_TEAMATE_investment_SUCCESS'；
const SUBMIT_TEAMATE_INVITATION_ERROR='SUBMIT_TEAMATE_INVITATION_ERROR'；
export const submitTeammateInvitationRequest=data=>（{type:SUBMIT\u TEAMATE\u INVITATION\u REQUEST，负载：{data}}）；
export const submitTeammateInvitationSuccess=data=>（{type:SUBMIT\u TEAMATE\u INVITATION\u SUCCESS，负载：{data}}）；
export const submitTeammateInvitationError=data=>（{type:SUBMIT\u TEAMATE\u INVITATION\u ERROR，负载：{data}}）；
export const submitTeammateInvitation=数据=>{
常量配置={
//配置代码
};
常量受邀端点https://github.com/mrdulin';
返回异步调度=>{
发送（提交的邀请请求（数据））；
试一试{
const response=wait fetch（端点，配置）；
const jsonResponse=await response.json（）；
如果（！response.ok）{
紧急警报（jsonResponse）；
派遣（提交邀请人（jsonResponse））；
抛出新错误（response.statusText）；
}
发送（提交邀请成功（jsonResponse））；
}捕获（错误）{
if（process.env.NODE_env===‘development’）{
日志（'请求失败'，错误）；
}
}
};
};

淋浴警报.ts
：

导出函数警报（jsonResponse）{
log（jsonResponse）；
}

actionCreators.spec.ts
：

导入{
提交的邀请函，
已提交的邀请请求，
提交邀请成功，
提交邀请人
}来自“/actionCreators”；
从“redux模拟存储”导入createMockStore；
从'redux-thunk'导入thunk，{ThunkDispatch}；
从“节点获取”导入获取；
从'redux'导入{AnyAction}；
从“/showErrorAlert”导入{showErrorAlert}；
const{Response}=jest.requireActual（'node-fetch'）；
mock（'node-fetch'）；
jest.mock（'./bathrorAlert.ts'，（）=>{
返回{
淋浴警报：jest.fn（）
};
});
const middleware=[thunk]；
const mockStore=createMockStore

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

import { showAlertError } from '../../../../_helpers/alerts';
jest.mock('../../../../_helpers/alerts');

const middlewares = [thunk];
const createMockStore = configureMockStore(middlewares);

describe('submitTeammateInvitation', () => {
   it('dispatches the correct actions on a failed fetch request', () => {
     fetch.mockResponse(
      JSON.stringify(error),
      { status: 500, statusText: 'Internal Server Error' }
    );

    const store = createMockStore({});
    const expectedActions = [
      submitTeammateInvitationRequestObject,
      submitTeammateInvitationErrorObject
    ];
    const showAlertError = jest.fn();

    return store.dispatch(submitTeammateInvitation(inviteTeammateEndpoint))
      .then(() => {
        expect(showAlertError).toBeCalled(); // this doesn't work
        expect(store.getActions()).toEqual(expectedActions); // this works
      });
  });
});