使用Typescript测试redux异步操作

// 定义Action类型
interface FetchDataAction {
  type: 'FETCH_DATA';
  payload: {
    data: string;
  };
}

interface FetchDataErrorAction {
  type: 'FETCH_DATA_ERROR';
  payload: {
    error: string;
  };
}

// 定义Reducer类型
type Action = FetchDataAction | FetchDataErrorAction;

interface State {
  data: string;
  error: string | null;
}

const initialState: State = {
  data: '',
  error: null,
};

// 编写Reducer函数
function reducer(state: State = initialState, action: Action): State {
  switch (action.type) {
    case 'FETCH_DATA':
      return {
        ...state,
        data: action.payload.data,
        error: null,
      };
    case 'FETCH_DATA_ERROR':
      return {
        ...state,
        data: '',
        error: action.payload.error,
      };
    default:
      return state;
  }
}

// 创建异步操作
function fetchData(url: string) {
  return async (dispatch: Dispatch<Action>) => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      dispatch({
        type: 'FETCH_DATA',
        payload: {
          data,
        },
      });
    } catch (error) {
      dispatch({
        type: 'FETCH_DATA_ERROR',
        payload: {
          error: error.message,
        },
      });
    }
  };
}

// 编写测试用例
describe('fetchData', () => {
  it('dispatches FETCH_DATA action on successful fetch', async () => {
    const dispatch = jest.fn();
    const fetchMock = jest.spyOn(window, 'fetch');
    fetchMock.mockResolvedValueOnce({
      json: jest.fn().mockResolvedValueOnce('test data'),
    });

    await fetchData('https://example.com')(dispatch);

    expect(dispatch).toHaveBeenCalledWith({
      type: 'FETCH_DATA',
      payload: {
        data: 'test data',
      },
    });
  });

  it('dispatches FETCH_DATA_ERROR action on fetch error', async () => {
    const dispatch = jest.fn();
    const fetchMock = jest.spyOn(window, 'fetch');
    fetchMock.mockRejectedValueOnce(new Error('fetch error'));

    await fetchData('https://example.com')(dispatch);

    expect(dispatch).toHaveBeenCalledWith({
      type: 'FETCH_DATA_ERROR',
      payload: {
        error: 'fetch error',
      },
    });
  });
});