jest redux-thunk 测试是不是调度了相同模块的操作

Posted 2023-02-22

【中文标题】jest redux-thunk 测试是不是调度了相同模块的操作

【英文标题】：jest redux-thunk test if action of same module is dispatchedjest redux-thunk 测试是否调度了相同模块的操作

【发布时间】：2017-06-18 19:44:51

【问题描述】：

我正在尝试为 redux 动作创建者编写一个测试，该创建者调度在同一文件中定义的另一个动作。很难解释，所以举个例子：

// actions/timer.js

export const onClickButton = () => 
  return dispatch => 
    // ... do something
    dispatch(someAction);
    dispatch(onTimerStart()); // This is the action creator stated below
  ;
;

export const onTimerStart = () => 
  return dispatch => 
    // ... do something
    dispatch(someAction);
  ;
;

我正在使用 jest，我想确保在调用 onClickButton 时调度 onTimerStart 操作。 （在我的实际代码中，这些动作创建者需要一些参数，并基于这些参数，onTimerStart 应该或不应该被调度）

我似乎不知道如何模拟 onTimerStart，所以我可以测试它是否被调用。

【问题讨论】：

嗨@Bram：我也有类似的问题，你找到解决问题的方法了吗？如果是，请分享结果

【参考方案1】：

您可以使用“redux-mock-store”并断言您的预期操作已被调度，而不是模拟 onTimerStart()。

这是一个粗略的例子。

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import * as timerActions from './actions/timerActions';
import * as types from './constants/actionTypes';
import  InitialAppState  from './reducers/initialState';

const createMockStore = configureMockStore([thunk]);

describe('timerActions', () => 

    it('successful call should dispatch someAction', () => 

        // Arrange.
        const expectedActions = [
             type: types.someAction,
        ];

        const store = createMockStore(InitialAppState);

        // Act.
        store.dispatch(actions.onClickButton());

        // Assert.
        const dispatchedActions = store.getActions();
        expect(dispatchedActions).toEqual(expectedActions);
    );

);

使用此示例，您只需添加您提到的参数，并从正确的位置导入您的 actionCreators、actionTypes 和 initialState。

请注意，此示例是用 typescript 编写的。

【讨论】：

嗨，尼克，谢谢你的例子。如果有一个调度，您的示例将有效。但是，当有多个分派时，断言总是采用最后一个分派，所以我试图弄清楚如何在相同的操作中测试多个分派。我不能在 cmets 中干净地发布代码，但是给你一个原始问题的例子，第二个动作“onTimerStart”是一个单独的调度（有效），而“onClickButton”有两个调度，开玩笑只捕获第二个.

@AndriyKulak，听起来您正在尝试测试异步操作。请参阅 redux 文档了解如何执行此操作 - redux.js.org/docs/recipes/…

【参考方案2】：

您可以使用jest.fn() 为调度创建一个模拟。

然后，调用 action creator 一次以获取“thunk”（以 dispatch 作为参数的返回函数）。

这样，使用您的模拟调度作为参数调用返回的函数。

您可以使用 dispatch.mock.calls 查看调度调用。

(1) 模拟函数

const dispatch = jest.fn();

(2) (3) 获取 thunk 并调用它

const thunk = onClickButton();
thunk(dispatch);

(4) 检查调度调用

// indices mean: [the second call] [the first argument of that call]
dispatch.mock.calls[1][0]