无法测试连接的组件答案

【问题标题】：Can't test connected component无法测试连接的组件
【发布时间】：2020-07-19 13:14:37
【问题描述】：

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

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

所以，当我试图 find() 一些元素来模拟事件时，我得到了一个错误。

在快照显示组件本身，但不是内部标记。

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

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

一个简单的解决方案：正如 Redux DOCS 建议的那样，在不包装 Provider 的情况下测试组件。因此，您只需要为您的组件添加命名导出，如下所示

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",

【问题讨论】：

你试过用import { mount } from 'enzyme';const container = mount(<Provider store={mockStore}><ReportButton{...mockProps}/></Provider>);
是的，我的快照看起来像这样exports[Report Button should render component without crashing 1] = undefined;

标签： reactjs redux react-redux enzyme

【解决方案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 进行测试，因为我认为测试具体实现的组件行为更容易且有趣。

【讨论】：

尝试.dive().find(ReportButton).dive() 深入了解
使用dive() 我只能下到一级ReportButton。当我尝试这个expect(container.find(ReportButton).dive().find('.button').length).toEqual(1); 时，我得到一个错误。可以使用@testing-library/react，但它们的选择器确实不合适，并且将 data-testId 挂在目标元素上看起来不是个好主意