Components: Stop rendering MenuItemsGroup when no menu items provided

components/menu-items/menu-items-group.js

@@ -16,16 +16,24 @@ import './style.scss';
 import { NavigableMenu } from '../navigable-container';
 import withInstanceId from '../higher-order/with-instance-id';
 
-function MenuItemsGroup( {
-	label,
+export function MenuItemsGroup( {
 	children,
-	instanceId,
 	className = '',
 	filterName,
+	instanceId,
+	label,
 } ) {
+	const childrenArray = Children.toArray( children );
+	const menuItems = filterName ?
+		applyFilters( filterName, childrenArray ) :
+		childrenArray;
+
+	if ( ! Array.isArray( menuItems ) || ! menuItems.length ) {
+		return null;
+	}
+
 	const labelId = `components-menu-items-group-label-${ instanceId }`;
 	const classNames = classnames( className, 'components-menu-items-group' );
-	const menuItems = filterName ? applyFilters( filterName, Children.toArray( children ) ) : children;
 
 	return (
 		<div className={ classNames }>

components/menu-items/test/__snapshots__/menu-items-group.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItemsGroup should match snapshot 1`] = `
+<div
+  className="components-menu-items-group"
+>
+  <div
+    className="components-menu-items-group__label"
+    id="components-menu-items-group-label-1"
+  >
+    My group
+  </div>
+  <NavigableMenu
+    aria-labelledby="components-menu-items-group-label-1"
+    orientation="vertical"
+  >
+    <p
+      key=".0"
+    >
+      My item
+    </p>
+  </NavigableMenu>
+</div>
+`;

components/menu-items/test/menu-items-group.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { MenuItemsGroup } from '../menu-items-group';
+
+describe( 'MenuItemsGroup', () => {
+	test( 'should render null when no children provided', () => {
+		const wrapper = shallow( <MenuItemsGroup /> );
+
+		expect( wrapper.html() ).toBe( null );
+	} );
+
+	test( 'should match snapshot', () => {
+		const wrapper = shallow(
+			<MenuItemsGroup
+				label="My group"
+				instanceId="1"
+			>
+				<p>My item</p>
+			</MenuItemsGroup>
+		);
+
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );