监视 redux 调度方法

Question

我是一个开玩笑的新手，我正在为我的 React 应用程序编写单元测试，该应用程序使用 redux 并使用 Typescript 编写。

我的容器组件包含这段代码：

const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
    onSelectScenario: (selectedScenario: any) => {
        dispatch(selectScenario(selectedScenario));
    }
});

我想编写一个单元测试来检查当我从测试 (onSelectScenario) 中调用此 prop 时，dispatch 方法将使用正确的参数调用。

知道如何监视这个 dispatch 吗？

这是我调用 prop 方法的单元测试：

it('should dispatch', () => {
    component.props().onSelectScenario('New Selected Scenario');
});

这是测试的设置，我在其中定义了提供模拟商店的容器组件：

const mockStore = configureMockStore();
let store = mockStore({
    scenarios: ['Scenario 1', 'Scenario 2']
});
let component: ShallowWrapper<any, any>;

describe('ScenarioListGroupContainer Component', () => {
    beforeEach(() => {
        component = shallow(<ScenarioListGroupContainer store={store} />);
    });
    // ...
});

Answer 1

我听到你@quirimmo。我就是这样做的。

在分量中-

export const mapDispatchToProps = (dispatch) => ({
  onAction : (data) => dispatch(someAction()),
});

测试中- 从 './component' 导入 {mapDispatchToProps}；从 './actions' 导入 {someAction};

const actions = [ someAction() ];
const mockDispatch = (action) => action; // just echo the action
const mockMDTP = mapDispatchToProps(mockDispatch);
Object.keys(mockMDTP).forEach((key) => {
   expect(actions.contains(mockMDTP[key]())).toBe(true);
  });
});

解释 -

创建一个动作数组。这将包含 MDTP 中操作的所有结构。
然后模拟和回显调度。
检查对象的键以匹配操作数组。

希望这对您有所帮助！

Answer 2

到目前为止我找到的最佳解决方案（任何更好的建议都非常受欢迎）如下，保持我的问题中提供的代码完全相同：

it('should dispatch the select scenario action', () => {
    component.props().onSelectScenario('New Selected Scenario');
    expect(store.getActions()).toEqual([{ 
        type: 'SELECT_SCENARIO', 
        selectedScenario: 'New Selected Scenario' 
    }]);
});

所以你手动调用你的 prop 然后你检查动作是否已经在商店中正确调度

Answer 3

如果它对任何人有帮助，这就是我正在使用的：

const spy = jest.spyOn(store, 'dispatch');

监视 redux 调度方法

Spy on redux dispatch method

reactjs

jestjs

redux

react-redux

react-tsx