Question

我是jest的新手，我正在为我的反应应用程序编写单元测试，该应用程序使用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()),
});

在测试中 从＆＃39; ./ component＆＃39;中导入{mapDispatchToProps}; 从＆＃39; ./ actions＆＃39;;

导入{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中所有操作的结构。
然后嘲笑并回复调度。
检查对象的键以匹配actions数组。

希望这有帮助！

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' 
    }]);
});

因此，您手动调用您的道具，然后检查是否已在商店中正确调度该行动

Answer 3

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

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

窥探redux调度方法

3 个答案: