diff --git a/packages/components/menu/__tests__/head-menu.test.tsx b/packages/components/menu/__tests__/head-menu.test.tsx index 2ec7ee5c36..a99cb0d8e0 100644 --- a/packages/components/menu/__tests__/head-menu.test.tsx +++ b/packages/components/menu/__tests__/head-menu.test.tsx @@ -1,5 +1,6 @@ import { mount } from '@vue/test-utils'; -import { HeadMenu } from '@tdesign/components/menu'; +import { defineComponent } from 'vue'; +import { HeadMenu, MenuItem } from '@tdesign/components/menu'; // every component needs four parts: props/events/slots/functions. describe('HeadMenu', () => { @@ -52,4 +53,41 @@ describe('HeadMenu', () => { expect(wrapper.element).toMatchSnapshot(); }); }); + + describe('JSX rendering', () => { + it('should not warn about slot invoked outside of render function when using JSX with dynamic MenuItems', () => { + const warnSpy = vi.spyOn(console, 'warn'); + const menuOptions = [ + { label: '用户信息', key: 'info' }, + { label: '身份验证', key: 'security' }, + ]; + + const MenuComponent = defineComponent({ + setup() { + return () => ( + + {menuOptions.map((menu) => ( + + {menu.label} + + ))} + + ); + }, + }); + + const wrapper = mount(MenuComponent); + expect(wrapper.exists()).toBe(true); + + // Check that no warning about slot invoked outside of render function was logged + const slotWarnings = warnSpy.mock.calls.filter((call) => + call.some( + (arg) => typeof arg === 'string' && arg.includes('Slot "default" invoked outside of the render function'), + ), + ); + expect(slotWarnings.length).toBe(0); + + warnSpy.mockRestore(); + }); + }); }); diff --git a/packages/components/menu/head-menu.tsx b/packages/components/menu/head-menu.tsx index 1e367e3d98..50324b6367 100644 --- a/packages/components/menu/head-menu.tsx +++ b/packages/components/menu/head-menu.tsx @@ -232,7 +232,6 @@ export default defineComponent({ } }); }; - initVMenu(ctx.slots.default?.() || ctx.slots.content?.() || []); return () => { const logo = props.logo?.(h) || ctx.slots.logo?.(); @@ -241,6 +240,7 @@ export default defineComponent({ // TODO: 判断逻辑不够完善 影响封装组件的子菜单样式渲染 暂时先不执行 待调整实现方案 // const content = formatContent(); const content = ctx.slots.default?.() || ctx.slots.content?.() || []; + initVMenu(content); return (