1

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

我的容器组件带有这段代码：

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

我想编写一个单元测试，检查当我从测试（onSelectScenario）调用这个道具时，该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} />);
    });
    // ...
});
4

3 回答 3

3

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

const spy = jest.spyOn(store, 'dispatch');
于 2020-10-19T10:36:47.983 回答
1

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

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

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

于 2018-04-06T00:02:40.787 回答
0

我听到你@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);
  });
});

解释 -

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

希望这可以帮助 ！

于 2018-04-05T15:51:19.060 回答