title: How to get React children from Enzyme
body: <p>I've implemented a "slot" system in React from this article: <a href="https://medium.com/@srph/react-imitating-vue-slots-eab8393f96fd" rel="nofollow noreferrer">Vue Slots in React</a>. However, I'm running into trouble when trying to test the component due to a "mismatch" between the Enzyme wrapper's children and React's children.</p>
  
  <p>This is the function to get a "slot" child from React <code>children</code>. The function works as expected within a app component when provided with the <code>children</code> prop, but doesn't work during testing as the "children" isn't the same format as <code>React.children</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>const getSlot = (children, slot) =&gt; {
    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) =&gt; child.type === slot);
  };
  </code></pre>
  
  <p>The <code>TestComponent</code> isn't directly used in the tests, but is intended to show an example of how the "slots" would be implemented in a component.</p>
  
  <pre><code>const TestComponent = ({ children }) =&gt; {
    const slot = getSlot(children, TestComponentSlot);
  
    return (
      &lt;div id="parent"&gt;
        &lt;div id="permanentContent"&gt;Permanent Content&lt;/div&gt;
        {slot &amp;&amp; &lt;div id="optionalSlot"&gt;{slot}&lt;/div&gt;}
      &lt;/div&gt;
    );
  };
  
  const TestComponentSlot = () =&gt; null;
  TestComponent.Slot = TestComponentSlot;
  </code></pre>
  
  <p>This is the basics of the tests I am trying to write. Essentially, creating a super basic component tree and then checking if the component's children contained the expected "slot" component. However, the <code>getSlot</code> function <strong>always</strong> returns <code>null</code> as the input isn't the same as the input provided by React <code>children</code> when used within the app.</p>
  
  <pre><code>it("Finds slots in React children", () =&gt; {
    const wrapper = mount(
      &lt;div&gt;
        &lt;TestComponent.Slot&gt;Test&lt;/TestComponent.Slot&gt;
      &lt;/div&gt;
    );
  
    // 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);
  });
  </code></pre>
  
  <p>Any help or insights would be greatly appreciated!</p>