Question

如何测试Reaect-Redux组件并模拟其上下文和操作？

有了这个，它无法找到任何行动：

    const wrapper = mount(
  <S437TransactionAuth
    store={store}
    s437updateGui="{mock.action.s437updateGUI}"
    setCurrentUserId="{mock.action.setCurrentUserId}"
  />,
        mockContext
    );

这无法找到模拟操作或上下文

    const wrapper = mount(
        <Provider store={store}>
            <S437TransactionAuth
                s437updateGui="{mock.action.s437updateGUI}"
                setCurrentUserId="{mock.action.setCurrentUserId}"
            />
        </Provider>,
        mockContext
    );

标准做法是什么？由于我无法控制的原因，我使用的是Mocha。

Answer 1

我们的标准做法是将连接组件导出为default，将组件本身导出为命名导出。

connect已经针对您进行了测试，因此无需验证它是否实际将内容从Redux存储传递到您的组件。您可以测试的是，您的组件正确使用了该道具，您可以在非连接组件中进行模拟。

您还可以单独测试您在mapStateToProps和mapDispatchToProps中指定的选择器和操作创建者。

最后但并非最不重要的是，您始终可以简单地为测试配置真实商店（在describe来电！中），并将您的主题包装在真实商店的提供商中。但是这条路径可能会导致您必须分配一些操作来设置状态，就像组件期望的那样（比如模拟API调用以获取数据，等等）。

Answer 2

假设您使用enzyme进行挂载，则上下文应该作为

传递

const wrapper = mount(
  <S437TransactionAuth
    // I'm assuming you have put your store in the context so I've removed store={store} for here
    s437updateGui="{mock.action.s437updateGUI}"
    setCurrentUserId="{mock.action.setCurrentUserId}"
  />,
        { context: mockContext }
    );

我个人刚刚使用react-redux Provider而没有对mount的第二个参数做任何事情，就像这样

const wrapper = mount(
        <Provider store={store}>
            <S437TransactionAuth
                s437updateGui="{mock.action.s437updateGUI}"
                setCurrentUserId="{mock.action.setCurrentUserId}"
            />
        </Provider>
    );

此外，如果您还没有使用它，redux-mock-store可以更轻松地测试connect ed组件，但允许您设置初始状态以进行渲染，断言组件中的预期渲染，或使用酶模拟组件上的用户操作，并对模拟存储断言预期的操作。

使用模拟上下文和操作测试React-Redux

2 个答案: