diff --git a/src/components/menu/menu-item/menu-item.component.tsx b/src/components/menu/menu-item/menu-item.component.tsx index 85de143857..82e0f54734 100644 --- a/src/components/menu/menu-item/menu-item.component.tsx +++ b/src/components/menu/menu-item/menu-item.component.tsx @@ -131,6 +131,13 @@ export const MenuItem = ({ "If no text is provided an `ariaLabel` should be given to facilitate accessibility." ); + invariant( + typeof submenu === "boolean" || + submenu === undefined || + (children && typeof submenu === "string" && submenu.length), + "You should not pass `children` when `submenu` is an empty string" + ); + const { inFullscreenView, registerItem, diff --git a/src/components/menu/menu-item/menu-item.test.tsx b/src/components/menu/menu-item/menu-item.test.tsx index 335b0dc196..807e3a453f 100644 --- a/src/components/menu/menu-item/menu-item.test.tsx +++ b/src/components/menu/menu-item/menu-item.test.tsx @@ -1058,3 +1058,21 @@ describe("when MenuItem has a submenu", () => { }); }); }); + +test("should throw when `children` passed and `submenu` is an empty string", () => { + const consoleSpy = jest + .spyOn(global.console, "error") + .mockImplementation(() => {}); + + expect(() => { + render( + + Item One + + ); + }).toThrow( + "You should not pass `children` when `submenu` is an empty string" + ); + + consoleSpy.mockRestore(); +});