Как найти дочерние компоненты, не задавая HO C, оборачивая их?

Question

Часто, когда я работаю с Material-ui, его расширяемая природа мешает тестированию.

Это потому, что, хотя я использую, скажем:

const MyEventButton = () => (<IconButton />
  <Event />
</IconButton>)

Что Я получаю в тестовом выводе поверхностного рендера:

<WithStyles(ForwardRef(IconButton)) >
  <Event />
</WithStyles(ForwardRef(IconButton)) >

Это обертывание HO C - это не то, о чем я слишком беспокоюсь о своих тестах (то есть я не тестирую что компонент WithStyles или использует ForwardRef), потому что это деталь реализации, которая может измениться без необходимости / необходимости обновления тестов.

В конечном итоге это означает, что я не могу написать свои тесты как:

it('Renders IconButton', () => {
  const wrapper = shallow(<MyEventButton />);
  expect(wrapper.exists('IconButton')).toEqual(true);
}

Я должен сделать:

it('Renders IconButton', () => {
  const wrapper = shallow(<MyEventButton />);
  expect(wrapper.exists('WithStyles(ForwardRef(IconButton))')).toEqual(true);
}

Кажется, я слишком тесно связал свои тесты с материалами, используемыми во внутренней работе.

Есть ли способ тестирует пиринг внутри HO C и получает базовый дочерний компонент? Желательно без необходимости dive или угадывать, где в компоненте он с children().at(0) возни. Использование `wrapper.exists () также не удается по тем же причинам.

Я осмотрел Stackoverflow и inte rnet и не нашел рабочего решения.

Answer 1

Вам не нужно создавать компонент для проверки его существования

Вместо того, чтобы делать:

expect(wrapper.exists('WithStyles(ForwardRef(IconButton))')).toEqual(true);

или компонент

expect(wrapper.exists(<IconButton/>)).toEqual(true);

Просто скажите ферменту вы ожидаете, что функция компонента существует, и она поймет:

expect(wrapper.exists(IconButton)).toEqual(true); // passes