Как получить React детей от фермента

Question

Я реализовал систему «слотов» в React из этой статьи: Vue Slots в React . Тем не менее, у меня возникают проблемы при попытке протестировать компонент из-за «несоответствия» между дочерними оболочками Enzyme и дочерними элементами React.

Это функция для получения дочернего «слота» из React * 1005. *. Функция работает должным образом в компоненте приложения, если предоставляется с children prop, но не работает во время тестирования, так как «children» не имеет тот же формат, что и React.children.

const getSlot = (children, slot) => {
  if (!children) return null;

  if (!Array.isArray(children)) {
    return children.type === slot ? children : null;
  }

  // Find the applicable React component representing the target slot
  return children.find((child) => child.type === slot);
};

TestComponent напрямую не используется в тестах, но предназначен для демонстрации примера того, как «слоты» будут реализованы в компоненте.

const TestComponent = ({ children }) => {
  const slot = getSlot(children, TestComponentSlot);

  return (
    <div id="parent">
      <div id="permanentContent">Permanent Content</div>
      {slot && <div id="optionalSlot">{slot}</div>}
    </div>
  );
};

const TestComponentSlot = () => null;
TestComponent.Slot = TestComponentSlot;

Это основы тестов, которые япытаюсь написать. По сути, создаем супер базовое дерево компонентов и затем проверяем, содержат ли дочерние компоненты компонента ожидаемый компонент «слот». Однако функция getSlot всегда возвращает null, поскольку вход не совпадает с входом, предоставленным React children при использовании в приложении.

it("Finds slots in React children", () => {
  const wrapper = mount(
    <div>
      <TestComponent.Slot>Test</TestComponent.Slot>
    </div>
  );

  // Unsure how to properly get the React children to test method.
  //   Below are some example that don't work...

  // None of these approaches returns React children like function expects.
  //   Some return null and other return Enzyme wrappers.
  const children = wrapper.children();
  const { children } = wrapper.instance();
  const children = wrapper.children().instance();

  // TODO: Eventually get something I can put into function
  const slot = getSlot(children, TestComponentSlot);
});

Любая помощь или идеи будут с благодарностью!

Answer 1

Проблема здесь в том, что когда вы используете энзимный метод children(), он возвращает ShallowWrapper [ 1 ]. Чтобы получить дочерние элементы в качестве компонента React, вы должны получить их непосредственно из метода props.

Итак, найдите дочерние элементы следующим образом:

const children = wrapper.props().children;

Пример CodeSandbox.