diff --git a/packages/components/dialog/__tests__/dialog.test.ts b/packages/components/dialog/__tests__/dialog.test.tsx
similarity index 63%
rename from packages/components/dialog/__tests__/dialog.test.ts
rename to packages/components/dialog/__tests__/dialog.test.tsx
index 780c924ec4..2f1a78d748 100644
--- a/packages/components/dialog/__tests__/dialog.test.ts
+++ b/packages/components/dialog/__tests__/dialog.test.tsx
@@ -7,16 +7,10 @@ import { Delete } from '@element-plus/icons-vue'
 import Dialog from '../src/dialog.vue'
 
 const AXIOM = 'Rem is the best girl'
-const defaultSlots = { default: () => AXIOM }
 
 describe('Dialog.vue', () => {
   test('render test', async () => {
-    const wrapper = mount(Dialog, {
-      slots: defaultSlots,
-      props: {
-        modelValue: true,
-      },
-    })
+    const wrapper = mount(<Dialog modelValue={true}>{AXIOM}</Dialog>)
 
     await nextTick()
     await rAF()
@@ -26,44 +20,56 @@ describe('Dialog.vue', () => {
 
   test('dialog should have a title and header when it has been given', async () => {
     const HEADER = 'I am header'
-    let wrapper = mount(Dialog, {
-      slots: {
-        ...defaultSlots,
-        header: () => HEADER,
-      },
-      props: {
-        modelValue: true,
-      },
-    })
+    const wrapper = mount(
+      <Dialog
+        modelValue={true}
+        v-slots={{
+          header: () => HEADER,
+        }}
+      >
+        {AXIOM}
+      </Dialog>
+    )
+
     await nextTick()
     expect(wrapper.find('.el-dialog__header').text()).toBe(HEADER)
 
-    wrapper = mount(Dialog, {
-      slots: defaultSlots,
-      props: {
-        title: HEADER,
-        modelValue: true,
-      },
-    })
+    mount(
+      <Dialog modelValue={true} title={HEADER}>
+        {AXIOM}
+      </Dialog>
+    )
     await nextTick()
 
     expect(wrapper.find('.el-dialog__header').text()).toBe(HEADER)
   })
 
   test('dialog header should have slot props', async () => {
-    const wrapper = mount(Dialog, {
-      slots: {
-        ...defaultSlots,
-        header: `
-          <template #header="{ titleId, titleClass, close }">
-            <button :data-title-id="titleId" :data-title-class="titleClass" @click="close" />
-          </template>
-        `,
-      },
-      props: {
-        modelValue: true,
-      },
-    })
+    const wrapper = mount(
+      <Dialog
+        modelValue={true}
+        v-slots={{
+          header: ({
+            titleId,
+            titleClass,
+            close,
+          }: {
+            titleId: string
+            titleClass: string
+            close: () => void
+          }) => (
+            <button
+              data-title-id={titleId}
+              data-title-class={titleClass}
+              onClick={close}
+            />
+          ),
+        }}
+      >
+        {AXIOM}
+      </Dialog>
+    )
+
     await nextTick()
     const headerButton = wrapper.find('button')
     expect(headerButton.attributes()['data-title-id']).toBeTruthy()
@@ -77,28 +83,24 @@ describe('Dialog.vue', () => {
   })
 
   test('dialog should have a footer when footer has been given', async () => {
-    const wrapper = mount(Dialog, {
-      slots: {
-        ...defaultSlots,
-        footer: () => AXIOM,
-      },
-      props: {
-        modelValue: true,
-      },
-    })
+    const wrapper = mount(
+      <Dialog modelValue={true} v-slots={{ footer: () => AXIOM }}>
+        {AXIOM}
+      </Dialog>
+    )
+
     await nextTick()
     expect(wrapper.find('.el-dialog__footer').exists()).toBe(true)
     expect(wrapper.find('.el-dialog__footer').text()).toBe(AXIOM)
   })
 
   test('should append dialog to body when appendToBody is true', async () => {
-    const wrapper = mount(Dialog, {
-      slots: defaultSlots,
-      props: {
-        appendToBody: true,
-        modelValue: true,
-      },
-    })
+    const wrapper = mount(
+      <Dialog modelValue={true} appendToBody={true}>
+        {AXIOM}
+      </Dialog>
+    )
+
     await nextTick()
     expect(
       document.body.firstElementChild!.classList.contains('el-overlay')
@@ -107,47 +109,37 @@ describe('Dialog.vue', () => {
   })
 
   test('should center dialog', async () => {
-    const wrapper = mount(Dialog, {
-      slots: defaultSlots,
-      props: {
-        center: true,
-        modelValue: true,
-      },
-    })
+    const wrapper = mount(
+      <Dialog modelValue={true} center={true}>
+        {AXIOM}
+      </Dialog>
+    )
+
     await nextTick()
     expect(wrapper.find('.el-dialog--center').exists()).toBe(true)
   })
 
   test('should show close button', async () => {
-    const wrapper = mount(Dialog, {
-      slots: defaultSlots,
-      props: {
-        modelValue: true,
-      },
-    })
+    const wrapper = mount(<Dialog modelValue={true}>{AXIOM}</Dialog>)
+
     await nextTick()
     expect(wrapper.find('.el-dialog__close').exists()).toBe(true)
   })
 
   test('should hide close button when showClose = false', async () => {
-    const wrapper = mount(Dialog, {
-      slots: defaultSlots,
-      props: {
-        modelValue: true,
-        showClose: false,
-      },
-    })
+    const wrapper = mount(
+      <Dialog modelValue={true} showClose={false}>
+        {AXIOM}
+      </Dialog>
+    )
+
     await nextTick()
     expect(wrapper.find('.el-dialog__headerbtn').exists()).toBe(false)
   })
 
   test('should close dialog when click on close button', async () => {
-    const wrapper = mount(Dialog, {
-      props: {
-        modelValue: true,
-      },
-      slots: defaultSlots,
-    })
+    const wrapper = mount(<Dialog modelValue={true}>{AXIOM}</Dialog>)
+
     await nextTick()
     await wrapper.find('.el-dialog__headerbtn').trigger('click')
     expect(wrapper.vm.visible).toBe(false)
@@ -155,24 +147,19 @@ describe('Dialog.vue', () => {
 
   describe('mask related', () => {
     test('should not have overlay mask when mask is false', async () => {
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modal: false,
-          modelValue: true,
-        },
-      })
+      const wrapper = mount(
+        <Dialog modal={false} modelValue={true}>
+          {AXIOM}
+        </Dialog>
+      )
+
       await nextTick()
       expect(wrapper.find('.el-overlay').exists()).toBe(false)
     })
 
     test('should close the modal when clicking on mask when `closeOnClickModal` is true', async () => {
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modelValue: true,
-        },
-      })
+      const wrapper = mount(<Dialog modelValue={true}>{AXIOM}</Dialog>)
+
       await nextTick()
       expect(wrapper.find('.el-overlay').exists()).toBe(true)
       expect(wrapper.find('.el-overlay-dialog').exists()).toBe(true)
@@ -185,13 +172,12 @@ describe('Dialog.vue', () => {
   describe('life cycles', () => {
     test('should call before close', async () => {
       const beforeClose = vi.fn()
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          beforeClose,
-          modelValue: true,
-        },
-      })
+      const wrapper = mount(
+        <Dialog modelValue={true} beforeClose={beforeClose}>
+          {AXIOM}
+        </Dialog>
+      )
+
       await nextTick()
       await wrapper.find('.el-dialog__headerbtn').trigger('click')
       expect(beforeClose).toHaveBeenCalled()
@@ -202,13 +188,11 @@ describe('Dialog.vue', () => {
         .fn()
         .mockImplementation((hide: (cancel: boolean) => void) => hide(true))
 
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          beforeClose,
-          modelValue: true,
-        },
-      })
+      const wrapper = mount(
+        <Dialog modelValue={true} beforeClose={beforeClose}>
+          {AXIOM}
+        </Dialog>
+      )
       await nextTick()
       await wrapper.find('.el-dialog__headerbtn').trigger('click')
       expect(beforeClose).toHaveBeenCalled()
@@ -216,14 +200,11 @@ describe('Dialog.vue', () => {
     })
 
     test('should open and close with delay', async () => {
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          openDelay: 200,
-          closeDelay: 200,
-          modelValue: false,
-        },
-      })
+      const wrapper = mount(
+        <Dialog openDelay={200} closeDelay={200} modelValue={false}>
+          {AXIOM}
+        </Dialog>
+      )
 
       expect(wrapper.vm.visible).toBe(false)
 
@@ -233,13 +214,11 @@ describe('Dialog.vue', () => {
     })
 
     test('should destroy on close', async () => {
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modelValue: true,
-          destroyOnClose: true,
-        },
-      })
+      const wrapper = mount(
+        <Dialog modelValue={true} destroyOnClose={true}>
+          {AXIOM}
+        </Dialog>
+      )
       expect(wrapper.vm.visible).toBe(true)
       await nextTick()
       await rAF()
@@ -260,15 +239,16 @@ describe('Dialog.vue', () => {
       let visible = true
       const onClose = vi.fn()
       const onClosed = vi.fn()
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modelValue: visible,
-          'onUpdate:modelValue': (val: boolean) => (visible = val),
-          onClose,
-          onClosed,
-        },
-      })
+      const wrapper = mount(
+        <Dialog
+          modelValue={true}
+          onUpdate:modelValue={(val: boolean) => (visible = val)}
+          onClose={onClose}
+          onClosed={onClosed}
+        >
+          {AXIOM}
+        </Dialog>
+      )
 
       expect(wrapper.vm.visible).toBe(true)
       await nextTick()
@@ -285,13 +265,11 @@ describe('Dialog.vue', () => {
     })
 
     test('closeIcon', async () => {
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modelValue: true,
-          closeIcon: markRaw(Delete),
-        },
-      })
+      const wrapper = mount(
+        <Dialog modelValue={true} closeIcon={markRaw(Delete)}>
+          {AXIOM}
+        </Dialog>
+      )
       await nextTick()
       await rAF()
       const closeIcon = wrapper.find('svg')
@@ -301,13 +279,11 @@ describe('Dialog.vue', () => {
     })
 
     test('should render draggable prop', async () => {
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modelValue: true,
-          draggable: true,
-        },
-      })
+      const wrapper = mount(
+        <Dialog modelValue={true} draggable={true}>
+          {AXIOM}
+        </Dialog>
+      )
 
       await nextTick()
       await rAF()
@@ -319,13 +295,11 @@ describe('Dialog.vue', () => {
   describe('accessibility', () => {
     test('title attribute should set aria-label', async () => {
       const title = 'Hello World'
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modelValue: true,
-          title,
-        },
-      })
+      const wrapper = mount(
+        <Dialog modelValue={true} title={title}>
+          {AXIOM}
+        </Dialog>
+      )
       await nextTick()
       const dialog = wrapper.find('[role="dialog"]')
       expect(dialog.attributes()['aria-label']).toBe(title)
@@ -333,19 +307,22 @@ describe('Dialog.vue', () => {
     })
 
     test('missing title attribute should point to header slot content', async () => {
-      const wrapper = mount(Dialog, {
-        slots: {
-          ...defaultSlots,
-          header: `
-            <template #header="{ titleId, titleClass }">
-              <h5 :id="titleId" :class="titleClass" />
-            </template>
-          `,
-        },
-        props: {
-          modelValue: true,
-        },
-      })
+      const wrapper = mount(
+        <Dialog
+          modelValue={true}
+          v-slots={{
+            header: ({
+              titleId,
+              titleClass,
+            }: {
+              titleId: string
+              titleClass: string
+            }) => <h5 id={titleId} class={titleClass} />,
+          }}
+        >
+          {AXIOM}
+        </Dialog>
+      )
       await nextTick()
       const dialog = wrapper.find('[role="dialog"]')
       const dialogTitle = wrapper.find('.el-dialog__title')
@@ -356,12 +333,7 @@ describe('Dialog.vue', () => {
     })
 
     test('aria-describedby should point to modal body', async () => {
-      const wrapper = mount(Dialog, {
-        slots: defaultSlots,
-        props: {
-          modelValue: true,
-        },
-      })
+      const wrapper = mount(<Dialog modelValue={true}>{AXIOM}</Dialog>)
       await nextTick()
       const dialog = wrapper.find('[role="dialog"]')
       const dialogBody = wrapper.find('.el-dialog__body')