diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/message/__tests__/__snapshots__/demo.test.js.snap
rename to components/message/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/message/__tests__/config.test.js b/components/message/__tests__/config.test.ts
similarity index 79%
rename from components/message/__tests__/config.test.js
rename to components/message/__tests__/config.test.ts
index 68760d00e5..ef7912e447 100644
--- a/components/message/__tests__/config.test.js
+++ b/components/message/__tests__/config.test.ts
@@ -32,7 +32,7 @@ describe('message.config', () => {
       message.info('whatever');
     });
 
-    expect(document.querySelectorAll('.ant-message')[0].style.top).toBe('100px');
+    expect(document.querySelectorAll<HTMLDivElement>('.ant-message')[0].style.top).toBe('100px');
   });
 
   it('should be able to config rtl', () => {
@@ -83,7 +83,7 @@ describe('message.config', () => {
     act(() => {
       jest.runAllTimers();
     });
-    expect(getInstance().component.state.notices).toHaveLength(0);
+    expect(getInstance()?.component.state.notices).toHaveLength(0);
   });
 
   it('should be able to config duration', async () => {
@@ -95,10 +95,10 @@ describe('message.config', () => {
     act(() => {
       message.info('last');
     });
-    expect(getInstance().component.state.notices).toHaveLength(1);
+    expect(getInstance()?.component.state.notices).toHaveLength(1);
 
     await sleep(1000);
-    expect(getInstance().component.state.notices).toHaveLength(0);
+    expect(getInstance()?.component.state.notices).toHaveLength(0);
     message.config({
       duration: 3,
     });
@@ -113,7 +113,7 @@ describe('message.config', () => {
       message.info('bamboo');
     });
 
-    expect(getInstance().config).toEqual(
+    expect((getInstance() as any).config).toEqual(
       expect.objectContaining({
         transitionName: 'light-move-up',
       }),
@@ -134,7 +134,7 @@ describe('message.config', () => {
     expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
     expect(document.querySelectorAll('.prefix-test-message-notice')).toHaveLength(1);
     expect(document.querySelectorAll('.bamboo-info-circle')).toHaveLength(1);
-    ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: null });
+    ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: undefined });
   });
   it('should be able to config prefixCls', () => {
     message.config({
@@ -180,10 +180,10 @@ describe('message.config', () => {
     }
     const [container1, removeContainer1] = createContainer();
     const [container2, removeContainer2] = createContainer();
-    expect(container1.querySelector('.ant-message-notice')).toBeFalsy();
-    expect(container2.querySelector('.ant-message-notice')).toBeFalsy();
+    expect((container1 as HTMLDivElement).querySelector('.ant-message-notice')).toBeFalsy();
+    expect((container2 as HTMLDivElement).querySelector('.ant-message-notice')).toBeFalsy();
     message.config({
-      getContainer: () => container1,
+      getContainer: () => container1 as HTMLDivElement,
     });
     const messageText1 = 'mounted in container1';
 
@@ -191,17 +191,25 @@ describe('message.config', () => {
       message.info(messageText1);
     });
 
-    expect(container1.querySelector('.ant-message-notice').textContent).toEqual(messageText1);
+    expect(
+      (container1 as HTMLDivElement).querySelector('.ant-message-notice')?.textContent,
+    ).toEqual(messageText1);
     message.config({
-      getContainer: () => container2,
+      getContainer: () => container2 as HTMLDivElement,
     });
     const messageText2 = 'mounted in container2';
 
     act(() => {
       message.info(messageText2);
     });
-    expect(container2.querySelector('.ant-message-notice').textContent).toEqual(messageText2);
-    removeContainer1();
-    removeContainer2();
+    expect(
+      (container2 as HTMLDivElement).querySelector('.ant-message-notice')?.textContent,
+    ).toEqual(messageText2);
+    if (typeof removeContainer1 === 'function') {
+      removeContainer1();
+    }
+    if (typeof removeContainer2 === 'function') {
+      removeContainer2();
+    }
   });
 });
diff --git a/components/message/__tests__/demo.test.js b/components/message/__tests__/demo.test.ts
similarity index 100%
rename from components/message/__tests__/demo.test.js
rename to components/message/__tests__/demo.test.ts
diff --git a/components/message/__tests__/hooks.test.js b/components/message/__tests__/hooks.test.tsx
similarity index 68%
rename from components/message/__tests__/hooks.test.js
rename to components/message/__tests__/hooks.test.tsx
index 2ff604cf82..1022f911b0 100644
--- a/components/message/__tests__/hooks.test.js
+++ b/components/message/__tests__/hooks.test.tsx
@@ -1,9 +1,9 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import { mount } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import type { ArgsProps, MessageType } from '..';
 import message, { getInstance } from '..';
 import ConfigProvider from '../../config-provider';
+import { render, fireEvent, pureRender } from '../../../tests/utils';
 
 describe('message.hooks', () => {
   beforeAll(() => {
@@ -21,7 +21,7 @@ describe('message.hooks', () => {
   it('should work', () => {
     const Context = React.createContext('light');
 
-    const Demo = () => {
+    const Demo: React.FC = () => {
       const [api, holder] = message.useMessage();
 
       return (
@@ -31,31 +31,33 @@ describe('message.hooks', () => {
               type="button"
               onClick={() => {
                 api.open({
+                  duration: 0,
                   content: (
                     <Context.Consumer>
                       {name => <span className="hook-test-result">{name}</span>}
                     </Context.Consumer>
                   ),
-                  duration: 0,
                 });
               }}
-            />
+            >
+              test
+            </button>
             {holder}
           </Context.Provider>
         </ConfigProvider>
       );
     };
 
-    const wrapper = mount(<Demo />);
-    wrapper.find('button').simulate('click');
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('button')!);
     expect(document.querySelectorAll('.my-test-message-notice').length).toBe(1);
-    expect(document.querySelector('.hook-test-result').innerHTML).toEqual('bamboo');
+    expect(document.querySelector('.hook-test-result')?.innerHTML).toEqual('bamboo');
   });
 
   it('should work with success', () => {
     const Context = React.createContext('light');
 
-    const Demo = () => {
+    const Demo: React.FC = () => {
       const [api, holder] = message.useMessage();
 
       return (
@@ -65,109 +67,102 @@ describe('message.hooks', () => {
               type="button"
               onClick={() => {
                 api.success({
+                  duration: 0,
                   content: (
                     <Context.Consumer>
                       {name => <span className="hook-test-result">{name}</span>}
                     </Context.Consumer>
                   ),
-                  duration: 0,
                 });
               }}
-            />
+            >
+              test
+            </button>
             {holder}
           </Context.Provider>
         </ConfigProvider>
       );
     };
 
-    const wrapper = mount(<Demo />);
-    wrapper.find('button').simulate('click');
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('button')!);
     expect(document.querySelectorAll('.my-test-message-notice').length).toBe(1);
     expect(document.querySelectorAll('.anticon-check-circle').length).toBe(1);
-    expect(document.querySelector('.hook-test-result').innerHTML).toEqual('bamboo');
+    expect(document.querySelector('.hook-test-result')?.innerHTML).toEqual('bamboo');
   });
 
   it('should work with onClose', done => {
     // if not use real timer, done won't be called
     jest.useRealTimers();
-    const Demo = () => {
+    const Demo: React.FC = () => {
       const [api, holder] = message.useMessage();
       return (
         <>
           <button
             type="button"
             onClick={() => {
-              api.open({
-                content: 'amazing',
-                duration: 1,
-                onClose() {
-                  done();
-                },
-              });
+              api.open({ content: 'amazing', duration: 1, onClose: done });
             }}
-          />
+          >
+            test
+          </button>
           {holder}
         </>
       );
     };
-
-    const wrapper = mount(<Demo />);
-    wrapper.find('button').simulate('click');
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('button')!);
     jest.useFakeTimers();
   });
 
   it('should work with close promise', done => {
     // if not use real timer, done won't be called
     jest.useRealTimers();
-    const Demo = () => {
+    const Demo: React.FC = () => {
       const [api, holder] = message.useMessage();
       return (
         <>
           <button
             type="button"
             onClick={() => {
-              api
-                .open({
-                  content: 'good',
-                  duration: 1,
-                })
-                .then(() => {
-                  done();
-                });
+              api.open({ content: 'good', duration: 1 }).then(() => {
+                done();
+              });
             }}
-          />
+          >
+            test
+          </button>
           {holder}
         </>
       );
     };
 
-    const wrapper = mount(<Demo />);
-    wrapper.find('button').simulate('click');
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('button')!);
     jest.useFakeTimers();
   });
 
   it('should work with hide', () => {
-    let hide;
-    const Demo = () => {
+    let hide: MessageType;
+    const Demo: React.FC = () => {
       const [api, holder] = message.useMessage();
       return (
         <ConfigProvider prefixCls="my-test">
           <button
             type="button"
             onClick={() => {
-              hide = api.open({
-                content: 'nice',
-                duration: 0,
-              });
+              hide = api.open({ ontent: 'nice', duration: 0 } as unknown as ArgsProps);
             }}
-          />
+          >
+            test
+          </button>
           {holder}
         </ConfigProvider>
       );
     };
 
-    const wrapper = mount(<Demo />);
-    wrapper.find('button').simulate('click');
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('button')!);
 
     act(() => {
       jest.runAllTimers();
@@ -178,26 +173,25 @@ describe('message.hooks', () => {
       hide();
       jest.runAllTimers();
     });
-    expect(getInstance().component.state.notices).toHaveLength(0);
+    expect(getInstance()?.component.state.notices).toHaveLength(0);
   });
 
   it('should be same hook', () => {
     let count = 0;
 
-    const Demo = () => {
-      const [, forceUpdate] = React.useState({});
+    const Demo: React.FC = () => {
+      const [, forceUpdate] = React.useState([]);
       const [api] = message.useMessage();
-
       React.useEffect(() => {
         count += 1;
         expect(count).toEqual(1);
-        forceUpdate();
+        forceUpdate([]);
       }, [api]);
 
       return null;
     };
 
-    mount(<Demo />);
+    pureRender(<Demo />);
   });
 
   it("should use ConfigProvider's getPopupContainer as message container", () => {
@@ -208,7 +202,7 @@ describe('message.hooks', () => {
       document.body.appendChild(div);
       return div;
     };
-    const Demo = () => {
+    const Demo: React.FC = () => {
       const [api, holder] = message.useMessage();
       return (
         <ConfigProvider getPopupContainer={getPopupContainer} prefixCls="my-test">
@@ -217,22 +211,22 @@ describe('message.hooks', () => {
             type="button"
             onClick={() => {
               api.success({
-                content: <span className="hook-content">happy</span>,
                 duration: 0,
+                content: <span className="hook-content">happy</span>,
               });
             }}
-          />
+          >
+            test
+          </button>
         </ConfigProvider>
       );
     };
-
-    const wrapper = mount(<Demo />);
-
-    wrapper.find('button').simulate('click');
+    const { container, baseElement } = render(<Demo />);
+    fireEvent.click(container.querySelector('button')!);
     expect(document.querySelectorAll('.my-test-message-notice').length).toBe(1);
     expect(document.querySelectorAll('.anticon-check-circle').length).toBe(1);
-    expect(document.querySelector('.hook-content').innerHTML).toEqual('happy');
+    expect(document.querySelector('.hook-content')?.innerHTML).toEqual('happy');
     expect(document.querySelectorAll(`#${containerId}`).length).toBe(1);
-    expect(wrapper.find(`#${containerId}`).children.length).toBe(1);
+    expect(baseElement.querySelectorAll(`#${containerId}`).length).toBe(1);
   });
 });