Question

我在本文Vue Slots in React的React中实现了一个“插槽”系统。但是，由于酶包装器的子级和React的子级之间的“不匹配”，在尝试测试组件时遇到了麻烦。

这是从React children获取“ slot”子级的功能。随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 example。

如何从酶中获得反应孩子

1 个答案: