在React& amp;内部使用Enzyme进行嵌套组件测试Redux [英] Nested components testing with Enzyme inside of React & Redux

问题描述

我有一个组件SampleComponent，该组件安装了另一个连接的组件"(即container).当我尝试通过mount ing测试SampleComponent时(因为我需要componentDidMount)，出现错误:

I have a component SampleComponent that mounts another "connected component" (i.e. container). When I try to test SampleComponent by mounting (since I need the componentDidMount), I get the error:

不变违规:在上下文或以下环境中均找不到存储" "Connect(ContainerComponent)"的道具.要么包装根组件 或明确传递商店"作为道具 "Connect(ContainerComponent)".

Invariant Violation: Could not find "store" in either the context or props of "Connect(ContainerComponent)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(ContainerComponent)".

最好的测试方法是什么?

What's the best way of testing this?

推荐答案

我本质上所做的就是将我的redux商店(和Provider)带进来，并将其包装在实用程序组件中，如下所示:

What I essentially did was bring in my redux store (and Provider) and wrapped it in a utility component as follows:

export const CustomProvider = ({ children }) => {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  );
};

然后，我mount SampleComponent并对其进行测试:

then, I mount the SampleComponent and run tests against it:

it('contains <ChildComponent/> Component', () => {
  const wrapper = mount(
    <CustomProvider>
      <SampleComponent {...defaultProps} />
    </CustomProvider>
  );
  expect(wrapper.find(ChildComponent)).to.have.length(1);
});

这篇关于在React& amp;内部使用Enzyme进行嵌套组件测试Redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！