窥探 redux 调度方法答案

【问题标题】：Spy on redux dispatch method窥探 redux 调度方法
【发布时间】：2018-09-15 06:17:46
【问题描述】：

我是一个开玩笑的新手，我正在为我的 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} />);
    });
    // ...
});

【问题讨论】：

仅供参考，您正在测试 mapDispatchToProps 是否按预期工作。然而，这是 redux 的一部分，你应该相信库本身已经测试了它的功能。就调用 props 而言，通常只测试实际组件。它们很容易被窥探到，而且大多数时候浅渲染也足够了。
不，我正在测试我通过 redux 与 props 匹配的方法中的逻辑是否按预期工作。我只想看到调用那个道具，通过redux添加，有一个调用dispatch传递正确的参数
很公平。请记住，您也可以为mapDispatchToProps 传递一个简单的对象。它自动绑定要调度的每个动作，并且该对象基本上只是成为一个动作列表：const mapDispatchToProps = { selectScenario, otherAction, etc. }; 然后组件将调用this.props.selectScenario。这样就没有什么可以测试的了。如果在调用单个道具时需要发生多个调度或其他副作用，您真的只需要声明mapDispatchToProps 的“长”方式。
@quirimmo 您回滚了更新以添加用于代码格式化的语言标签，这使得这个问题更具可读性。我认为这是合适的，是否有理由不允许对这个问题进行代码格式化？

标签： reactjs redux react-redux jestjs react-tsx

【解决方案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 中操作的所有结构。
然后模拟和回声调度。
检查对象的键以匹配动作数组。

希望这会有所帮助！ ?

【讨论】：

非常感谢您的回答，但这不是我想要的。在这里，您所做的正是@timotgl 在 cmets 中所说的。在这里，您正在测试 mapDispatchToProps 是否正常工作。相反，我只想测试我通过mapDispatchToProps 映射为道具的方法的主体。但是，您在单元测试中再次定义了您的逻辑，并且您正在测试您的单元测试逻辑，而不是您正在为其编写测试的源文件

【解决方案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' 
    }]);
});

所以你手动调用你的道具，然后检查是否在商店中正确调度了动作

【讨论】：

【解决方案3】：

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

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

【讨论】：