Компонент пользовательского интерфейса для тестирования материала с Jest и фермент

Question

Я пытаюсь протестировать компонент React, который использует <ExpansionPanel /> в качестве подкомпонента с Jest и Enzyme.

Для справки console.log (wrapper.debug ()) выглядит следующим образом:

const wrapper = shallow(<SomeComponent/>);
console.log(wrapper.debug());

<Fragment>
  <WithStyles(ForwardRef(ExpansionPanel)) defaultExpanded={true}>
    <WithStyles(ForwardRef(ExpansionPanelSummary)) expandIcon={{...}} aria-controls="panel1a-content" id="panel1a-header">
      <p className="summary text">
        Basic Options
      </p>
    </WithStyles(ForwardRef(ExpansionPanelSummary))>
    <WithStyles(ForwardRef(ExpansionPanelDetails))>
      <Connect(OptionDetails) optionType="basicOptions" />
    </WithStyles(ForwardRef(ExpansionPanelDetails))>
  </WithStyles(ForwardRef(ExpansionPanel))>
  <WithStyles(ForwardRef(ExpansionPanel)) defaultExpanded={false}>
    <WithStyles(ForwardRef(ExpansionPanelSummary)) expandIcon={{...}} aria-controls="panel1a-content" id="panel1a-header">
      <p className="summary text">
        Advanced Options
      </p>
    </WithStyles(ForwardRef(ExpansionPanelSummary))>
    <WithStyles(ForwardRef(ExpansionPanelDetails))>
      <Connect(OptionDetails) optionType="advancedOptions" />
    </WithStyles(ForwardRef(ExpansionPanelDetails))>
  </WithStyles(ForwardRef(ExpansionPanel))>
</Fragment>

Как вы можете видеть, он отображает компоненты пользовательского интерфейса материала как компоненты высшего порядка (обернутые внутри WithStyles). Мне просто интересно, можно ли просто сделать что-то подобное ниже, чтобы проверить, правильно ли выполняет рендеринг компонента.

// Notice how I am explicitly specifying WithStyles(ForwardRef())
expect(wrapper.find('WithStyles(ForwardRef(ExpansionPanel)')).toHaveLength(x);

Я обнаружил действительно похожую проблему, но на данный момент ответов нет. Аналогичный пост (без ответа)

Спасибо вперед.

РЕДАКТИРОВАТЬ
Для пояснения, что я предложил выше работает, но я был просто Интересно, это правильный способ тестирования HOC.

Кроме того, использование энзима dive() на самом деле не работает, потому что фактический компонент, который я тестирую, не является HO C (он думает, что нет подкомпонентов погрузиться в).

Answer 1

Не уверен, что то, что вы предложили, сработает. Что-то вроде этого, вероятно, будет работать лучше.

const expansionPanelElements = wrapper.find(Fragment).filter(item =>item.exists('ExpansionPanel')));
expect(expansionPanelElements.toHaveLength(x));