如何使用 Jest 测试 Thunk 动作？

Question

我不熟悉使用 Jest 对 Redux-Thunk 异步操作进行单元测试。

这是我的代码：

export const functionA = (a, b) => (dispatch) => {
    dispatch({ type: CONSTANT_A, payload: a });
    dispatch({ type: CONSTANT_B, payload: b });
}

如何使用 Jest 测试此功能？

Answer 1

您在 Redux 文档中有一个示例：http://redux.js.org/docs/recipes/WritingTests.html#async-action-creators

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

const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)

describe('async actions', () => {
    
  it('should dispatch actions of ConstantA and ConstantB', () => {
    const expectedActions = [
      {type: 'CONSTANT_A', payload: 'a'},
      {type: 'CONSTANT_B', payload: 'b'} 
    ]

    const store = mockStore({ yourInitialState })
    store.dispatch(functionA('a', 'b'))

    expect(store.getActions()).toEqual(expectedActions)
  })
})

Answer 2

此外，为了更方便，您可以使用此模块：https://www.npmjs.com/package/redux-thunk-tester

示例：

import React from 'react';
import {createStore, applyMiddleware, combineReducers} from 'redux';
import {reducer} from './example';
import ReduxThunkTester from 'redux-thunk-tester';
import thunk from 'redux-thunk';

const request = (ms) => new Promise((resolve) => {
  setTimeout(() => resolve('success response'), ms);
});

const resultRequestAction = (value) => ({ type: SOME_BACKEND_REQUEST, payload: value });
const toggleLoadingAction = (value) => ({ type: TOGGLE_LOADING, payload: value });

const asyncThunkWithRequest = () => async (dispatch) => {
  try {
    dispatch(toggleLoadingAction(true));
    const result = await request(200);
    dispatch(resultRequestAction(result));
  } finally {
    dispatch(toggleLoadingAction(false));
  }
};

const createMockStore = () => {
  const reduxThunkTester = new ReduxThunkTester();

  const store = createStore(
    combineReducers({exampleSimple: reducer}),
    applyMiddleware(
      reduxThunkTester.createReduxThunkHistoryMiddleware(),
      thunk
    ),
  );

  return {reduxThunkTester, store};
};

describe('Simple example.', () => {
  test('Success request.', async () => {
    const {store, reduxThunkTester: {getActionHistoryAsync, getActionHistoryStringifyAsync}} = createMockStore();

    store.dispatch(asyncThunkWithRequest());

    const actionHistory = await getActionHistoryAsync(); // need to wait async thunk (all inner dispatch)

    expect(actionHistory).toEqual([
      {type: 'TOGGLE_LOADING', payload: true},
      {type: 'SOME_BACKEND_REQUEST', payload: 'success response'},
      {type: 'TOGGLE_LOADING', payload: false},
    ]);

    expect(store.getState().exampleSimple).toEqual({
      loading: false,
      result: 'success response'
    });

    console.log(await getActionHistoryStringifyAsync({withColor: true}));
  });
});

Answer 3

我建议你写这样的东西来避免异步问题：

return store
  .dispatch(actionCreators.login({}))
  .then(() => expect(store.getActions()).toEqual(expectedActions));

如何使用 Jest 测试 Thunk 动作？

How can I test Thunk actions with Jest?

unit-testing

jestjs

redux

redux-thunk