fix(menu-item): ensure that it does not render children when `submenu…

…` is an empty string

Adds invariant to ensure that the component does not render when `children` are passed but `submenu`
is an empty string

fix #7010

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,

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(
+      <MenuContext.Provider value={{ ...menuContextValues }}>
+        <MenuItem submenu="">Item One</MenuItem>
+      </MenuContext.Provider>
+    );
+  }).toThrow(
+    "You should not pass `children` when `submenu` is an empty string"
+  );
+
+  consoleSpy.mockRestore();
+});