fix: message warning when not set icon

antdv-demo

@@ -1 +1 @@
-Subproject commit 7b17d6c0f051c4f7b45e48fac67cbe10815f7cc7
+Subproject commit b756b4f33a902f1a919bc30b7b13d005a5277616

components/message/__tests__/index.test.js

@@ -1,4 +1,3 @@
-import { mount } from '@vue/test-utils';
 import { asyncExpect } from '@/tests/utils';
 import message from '..';
 import SmileOutlined from '@ant-design/icons-vue/SmileOutlined';
@@ -59,7 +58,9 @@ describe('message', () => {
       expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
       hide2();
     }, 0);
-    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    await asyncExpect(() => {
+      expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+    }, 0);
   });
 
   it('should be able to destroy globally', async () => {
@@ -110,16 +111,7 @@ describe('message', () => {
 
   // https:// github.com/ant-design/ant-design/issues/8201
   it('should hide message correctly', async () => {
-    let hide;
-    const Test = {
-      mounted() {
-        hide = message.loading('Action in progress..', 0);
-      },
-      render() {
-        return <div>test</div>;
-      },
-    };
-    mount(Test, { sync: false });
+    let hide = message.loading('Action in progress..', 0);
     await asyncExpect(() => {
       expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
       hide();
@@ -129,7 +121,7 @@ describe('message', () => {
     }, 0);
   });
   it('should allow custom icon', async () => {
-    message.open({ content: 'Message', icon: h => <SmileOutlined /> }); // eslint-disable-line
+    message.open({ content: 'Message', icon: () => <SmileOutlined /> }); // eslint-disable-line
     await asyncExpect(() => {
       expect(document.querySelectorAll('.anticon-smile').length).toBe(1);
     }, 0);
@@ -143,18 +135,9 @@ describe('message', () => {
   });
   // https://github.com/ant-design/ant-design/issues/8201
   it('should destroy messages correctly', async () => {
-    // eslint-disable-next-line
-    const Test = {
-      mounted() {
-        message.loading('Action in progress1..', 0);
-        message.loading('Action in progress2..', 0);
-        setTimeout(() => message.destroy(), 1000);
-      },
-      render() {
-        return <div>test</div>;
-      },
-    };
-    mount(Test, { sync: false });
+    message.loading('Action in progress1..', 0);
+    message.loading('Action in progress2..', 0);
+    setTimeout(() => message.destroy(), 1000);
 
     await asyncExpect(() => {
       expect(document.querySelectorAll('.ant-message-notice').length).toBe(2);

components/message/index.js

@@ -49,6 +49,7 @@ const iconMap = {
 function notice(args) {
   const duration = args.duration !== undefined ? args.duration : defaultDuration;
   const Icon = iconMap[args.type];
+  const iconNode = Icon ? <Icon /> : '';
 
   const target = args.key || key++;
   const closePromise = new Promise(resolve => {
@@ -68,7 +69,7 @@ function notice(args) {
             <div
               class={`${prefixCls}-custom-content${args.type ? ` ${prefixCls}-${args.type}` : ''}`}
             >
-              {args.icon ? typeof args.icon === 'function' ? args.icon() : args.icon : <Icon />}
+              {args.icon ? (typeof args.icon === 'function' ? args.icon() : args.icon) : iconNode}
               <span>{typeof args.content === 'function' ? args.content() : args.content}</span>
             </div>
           );

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/menu/demo/index';
+import demo from '../antdv-demo/docs/message/demo/index';
 
 export default {
   components: {