diff --git a/components/menu-items/menu-items-group.js b/components/menu-items/menu-items-group.js
index 05895cc24551cb..3418073945f83f 100644
--- a/components/menu-items/menu-items-group.js
+++ b/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 (
diff --git a/components/menu-items/test/__snapshots__/menu-items-group.js.snap b/components/menu-items/test/__snapshots__/menu-items-group.js.snap
new file mode 100644
index 00000000000000..8a9af436d57c76
--- /dev/null
+++ b/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`] = `
+
+`;
diff --git a/components/menu-items/test/menu-items-group.js b/components/menu-items/test/menu-items-group.js
new file mode 100644
index 00000000000000..c0a13fc070eeae
--- /dev/null
+++ b/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(
);
+
+ expect( wrapper.html() ).toBe( null );
+ } );
+
+ test( 'should match snapshot', () => {
+ const wrapper = shallow(
+
+ My item
+
+ );
+
+ expect( wrapper ).toMatchSnapshot();
+ } );
+} );