reactjs - 监视 redux 调度方法

Question

我是一个 Jest 新手，我正在为我的 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

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

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