无法测试连接的组件

Question

我有下一个问题：在每个测试用例之前，我创建一个容器

const container = shallow(<Provider store={mockStore}><ReportButton{...mockProps}/></Provider>).dive();

因此，当我尝试查找（）一些元素以模拟事件时，出现错误。

在快照显示的组件本身中，而不在内部标记中。

<ReportButton
  category={Array []}
  count={100}
  dataId=""
  filter={Object {}}
  fullReport={false}
  isEmpty={false}
  loading={false}
  period_tariff_is_active={true}
  type=""
/>

而且我根本无法进入组件。

一个简单的解决方案：按照Redux DOCS的建议，无需在Provider中包装就可以测试组件。因此，您只需要为组件添加名为export的出口，就可以完成下面的操作

export default connect(mapStateToProps, mapDispatchToProps)(ReportButton);
export {ReportButton};

恭喜，您现在可以测试您的组件了。

但是，如果您使用react-redux钩子（例如useSelect），则此技巧将不起作用，因为您的组件将自动包装在connect中。您将像这样导出组件：

export default ReportButton;

所以问题又回来了。而且我不知道如何解决它。

使用的软件包列表：

"react": "^16.9.0",
"redux": "^4.0.4",
"react-redux": "^7.1.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",

Answer 1

我用酶测试了海关提供者。测试看起来像：

wrapper = Enzyme.shallow(
      <StorageProvider storage={storageMock}>
        <StorageContext.Consumer>
          {(storage: StorageService | null): React.ReactElement => 

            <HelperComponent storage={storage} />}

        </StorageContext.Consumer>
      </StorageProvider>,
    );

expect(
  wrapper
    .dive()
    .find(StorageContext.Consumer)
    .dive()
    .find(HelperComponent),
  ).toHaveLength(1);

所以您可以尝试使用.dive。

---

我可以建议的另一种解决方案是使用@testing-library/react进行测试，因为我认为测试具体实现的组件行为更容易且有趣。