menu: TypeError: Cannot read property 'split' of undefined

during jest test (works fine in normal usage), ant design horizontal menu is throwing TypeError: Cannot read property 'split' of undefined here:

  at node_modules/rc-menu/lib/DOMWrap.js:82:31
          at Array.filter (<anonymous>)
      at DOMWrap._this.getMenuItemNodes (node_modules/rc-menu/lib/DOMWrap.js:81:41)
      at DOMWrap._this.setChildrenWidthAndResize (node_modules/rc-menu/lib/DOMWrap.js:165:33)
      at DOMWrap.componentDidMount (node_modules/rc-menu/lib/DOMWrap.js:227:10)

https://github.com/react-component/menu/blob/master/src/DOMWrap.jsx#L77

The menu in my code has no explicit submenu items defined, its just a single level header menu…though when inspecting I see ant design adding a “ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu” with “display:none;” for no apparent reason. See the first example “Navigation One” here for an example: https://ant.design/components/menu

<ul class="ant-menu ant-menu-light ant-menu-root ant-menu-horizontal" role="menu">
   <!-- Why is this empty submenu even here? -->
   <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="display: none;"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li>
   <li class="ant-menu-item ant-menu-item-selected" role="menuitem"><i class="anticon anticon-mail"><svg viewBox="64 64 896 896" class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i>Navigation One</li>
   ...

Can rc-menu be optimized to not create display:none submenu elements if there are no submenu explicitly defined? or is that an ant design issue?

I am too new to understand why this error only happens during test but is there anything that you think could be done to prevent the Cannot read property 'split' of undefined in this case? It seems related to submenu which I am not using so I am hoping some optimization somehow could avoid the problem entirely.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 16 (7 by maintainers)

Most upvoted comments

please consider using enzyme.

Switching react-test-renderer to enzyme seems to work! Thank you for your help.

@Enalmada seems like it’s caused by createComponentWithPrerequisites, which is using react-test-renderer.

rc component which antd deps on use some DOM native props. This means react-test-renderer can not handle that.

ref: https://github.com/ant-design/ant-design/issues/12439#issuecomment-428132092