Components: Adding Slot rendering unit tests

components/slot-fill/slot.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, map } from 'lodash';
+import { noop, map, isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -56,8 +56,11 @@ class Slot extends Component {
 			<div ref={ this.bindNode }>
 				{ map( getFills( name ), ( fill ) => {
 					const fillKey = fill.props.instanceId;
-					return Children.toArray( fill.props.children ).map( ( child, childIndex ) => {
-						const childKey = `${ fillKey }---${ child.props.key || childIndex }`;
+					return Children.map( fill.props.children, ( child, childIndex ) => {
+						if ( ! child || isString( child ) ) {
+							return child;
+						}
+						const childKey = `${ fillKey }---${ child.key || childIndex }`;
 						return cloneElement( child, { key: childKey } );
 					} );
 				} ) }

components/slot-fill/test/slot.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import Slot from '../slot';
+import Fill from '../fill';
+import Provider from '../provider';
+
+describe( 'Slot', () => {
+	it( 'should render empty Fills', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken" />
+				<Fill name="chicken" />
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div></div>' );
+	} );
+
+	it( 'should render a string Fill', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken" />
+				<Fill name="chicken">
+					content
+				</Fill>
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div>content</div>' );
+	} );
+
+	it( 'should render a Fill containing an element', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken" />
+				<Fill name="chicken">
+					<span />
+				</Fill>
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div><span></span></div>' );
+	} );
+
+	it( 'should render a Fill containing an array', () => {
+		const element = mount(
+			<Provider>
+				<Slot name="chicken" />
+				<Fill name="chicken">
+					{ [ <span key="1" />, <div key="2" />, 'text' ] }
+				</Fill>
+			</Provider>
+		);
+
+		expect( element.find( 'Slot > div' ).html() ).toBe( '<div><span></span><div></div>text</div>' );
+	} );
+} );