用打字稿测试Redux async操作

Question

大家好，我正在尝试用打字稿测试我的异步动作创建者，但我得到了无法解决的类型错误。

这是我的行为：

export const loadCurrentUserRequest = () => ({
  type: LOAD_CURRENT_USER_REQUEST
})
export const loadCurrentUserSuccess = (payload: any) => ({
  type: LOAD_CURRENT_USER_SUCCESS,
  payload
})
export const loadCurrentUserFailure = (payload: any) => ({
  type: LOAD_CURRENT_USER_FAILURE,
  payload
})

这是我的异步动作创建者：

export const loadCurrentUser = () => {
  return async (dispatch: Dispatch<any>) => {
    dispatch(loadCurrentUserRequest())
    try {
      const response = await get(`api/currentuser`)
      if (!response.ok) {
        dispatch(loadCurrentUserFailure({ type: null, message: 'error' }))
      } else {
        const json = await response.json()
        dispatch(loadCurrentUserSuccess(json))
      }
      return response
    } catch (err) {
      dispatch(loadCurrentUserFailure({ type: err.name, message: err.message }))
      logError(err.name, err.message)
      return err
    }
  }
}

" get'函数是我创建的中间件来处理'fetch'get呼叫（它在标题等中添加了一些东西）。

这是我的测试：

  it('create an action to load the current user', () => {
    const middlewares = [thunk]
    const mockStore = configureMockStore(middlewares)
    const store = mockStore()
    const expectActions = [{ type: LOAD_CURRENT_USER_REQUEST }]
    store.dispatch(actions.loadCurrentUser())
    expect(store.getActions()).toEqual(expectActions)
  })

我在控制台中遇到此错误：

Argument of type '(dispatch: Dispatch<any>) => Promise<any>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type '(dispatch: Dispatch<any>) => Promise<any>' but required in type 'AnyAction'.

我不确定我在这里做错了什么，我查看了Redux示例测试Async Action Creators的方法，这是相似的。我无法弄清楚我的问题来自哪里。

我确实知道我必须模拟我的fetch API调用并更新我的expectActions变量，但是因此，代码没有编译。.

Answer 1

这是解决方案：

index.ts：

import fetch from 'node-fetch';
import { ThunkDispatch } from 'redux-thunk';
import { AnyAction } from 'redux';
const logError = (name, message) => console.error(`name: ${name}, message: ${message}`);
const get = url => fetch(url);
export const LOAD_CURRENT_USER_REQUEST = 'LOAD_CURRENT_USER_REQUEST';
export const LOAD_CURRENT_USER_SUCCESS = 'LOAD_CURRENT_USER_SUCCESS';
export const LOAD_CURRENT_USER_FAILURE = 'LOAD_CURRENT_USER_FAILURE';
export const loadCurrentUserRequest = () => ({
  type: LOAD_CURRENT_USER_REQUEST
});
export const loadCurrentUserSuccess = (payload: any) => ({
  type: LOAD_CURRENT_USER_SUCCESS,
  payload
});
export const loadCurrentUserFailure = (payload: any) => ({
  type: LOAD_CURRENT_USER_FAILURE,
  payload
});
export const loadCurrentUser = () => {
  return async (dispatch: ThunkDispatch<any, any, AnyAction>) => {
    dispatch(loadCurrentUserRequest());
    try {
      const response = await get(`api/currentuser`);
      if (!response.ok) {
        dispatch(loadCurrentUserFailure({ type: null, message: 'error' }));
      } else {
        const json = await response.json();
        dispatch(loadCurrentUserSuccess(json));
      }
      return response;
    } catch (err) {
      dispatch(loadCurrentUserFailure({ type: err.name, message: err.message }));
      logError(err.name, err.message);
      return err;
    }
  };
};

单元测试：

import configureStore from 'redux-mock-store';
import thunk, { ThunkDispatch } from 'redux-thunk';
import * as actions from './';
import { AnyAction } from 'redux';
import fetch from 'node-fetch';
jest.mock('node-fetch', () => jest.fn());
const initialState = {};
type State = typeof initialState;
const middlewares = [thunk];
const mockStore = configureStore<State, ThunkDispatch<State, any, AnyAction>>(middlewares);
const store = mockStore(initialState);
describe('action creators', () => {
  describe('#loadCurrentUser', () => {
    afterEach(() => {
      store.clearActions();
    });
    it('load current user success', async () => {
      const userMocked = { userId: 1 };
      (fetch as jest.MockedFunction<any>).mockResolvedValueOnce({
        ok: true,
        json: jest.fn().mockResolvedValueOnce(userMocked)
      });
      await store.dispatch(actions.loadCurrentUser());
      expect(fetch).toBeCalledWith('api/currentuser');
      expect(store.getActions()).toEqual([
        { type: actions.LOAD_CURRENT_USER_REQUEST },
        { type: actions.LOAD_CURRENT_USER_SUCCESS, payload: userMocked }
      ]);
    });
    it('load current user failed', async () => {
      (fetch as jest.MockedFunction<any>).mockResolvedValueOnce({ ok: false });
      await store.dispatch(actions.loadCurrentUser());
      expect(fetch).toBeCalledWith('api/currentuser');
      expect(store.getActions()).toEqual([
        { type: actions.LOAD_CURRENT_USER_REQUEST },
        {
          type: actions.LOAD_CURRENT_USER_FAILURE,
          payload: {
            type: null,
            message: 'error'
          }
        }
      ]);
    });
    it('load current user failed when fetch error', async () => {
      (fetch as jest.MockedFunction<any>).mockRejectedValueOnce(new Error('fetch error'));
      await store.dispatch(actions.loadCurrentUser());
      expect(fetch).toBeCalledWith('api/currentuser');
      expect(store.getActions()).toEqual([
        { type: actions.LOAD_CURRENT_USER_REQUEST },
        {
          type: actions.LOAD_CURRENT_USER_FAILURE,
          payload: {
            type: 'Error',
            message: 'fetch error'
          }
        }
      ]);
    });
  });
});

单位测试结果具有100％覆盖范围：

 PASS  src/stackoverflow/54693637/index.spec.ts
  action creators
    #loadCurrentUser
      ✓ load current user success (8ms)
      ✓ load current user failed (1ms)
      ✓ load current user failed when fetch error (8ms)
  console.error src/stackoverflow/54693637/index.ts:3541
    name: Error, message: fetch error
----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        3.32s, estimated 5s

这是完整的演示：https：//github.com/mrdulin/jest-codelab/tree/master/master/src/stackoverflow/54693637