diff --git a/packages/components/alert/__tests__/alert.test.ts b/packages/components/alert/__tests__/alert.test.tsx
similarity index 64%
rename from packages/components/alert/__tests__/alert.test.ts
rename to packages/components/alert/__tests__/alert.test.tsx
index cdc5c91bfa..ed2b6e6943 100644
--- a/packages/components/alert/__tests__/alert.test.ts
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -7,66 +7,39 @@ const AXIOM = 'Rem is the best girl'
 
 describe('Alert.vue', () => {
   test('render test & class', () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: AXIOM,
-        showIcon: true,
-      },
-    })
+    const wrapper = mount(() => <Alert title={AXIOM} showIcon={true} />)
     expect(wrapper.find('.el-alert__title').text()).toEqual(AXIOM)
     expect(wrapper.find('.el-alert').classes()).toContain('el-alert--info')
   })
 
   test('type', () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: 'test',
-        type: 'success',
-        showIcon: true,
-      },
-    })
+    const wrapper = mount(() => (
+      <Alert title={'test'} showIcon={true} type={'success'} />
+    ))
     expect(wrapper.find('.el-alert').classes()).toContain('el-alert--success')
     expect(wrapper.find('.el-alert__icon').classes()).toContain('el-icon')
     expect(wrapper.findComponent(TypeComponentsMap.success).exists()).toBe(true)
   })
 
   test('description', () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: 'Dorne',
-        description: AXIOM,
-        showIcon: true,
-      },
-    })
+    const wrapper = mount(() => (
+      <Alert title={'Dorne'} showIcon={true} description={AXIOM} />
+    ))
     expect(wrapper.find('.el-alert__description').text()).toEqual(AXIOM)
   })
 
   test('theme', () => {
-    const wrapper = mount(Alert, {
-      props: {
-        title: 'test',
-        effect: 'dark',
-      },
-    })
+    const wrapper = mount(() => <Alert title={'test'} effect={'dark'} />)
     expect(wrapper.find('.el-alert').classes()).toContain('is-dark')
   })
 
   test('title slot', () => {
-    const wrapper = mount(Alert, {
-      slots: {
-        title: AXIOM,
-      },
-    })
+    const wrapper = mount(() => <Alert title={AXIOM} />)
     expect(wrapper.find('.el-alert__title').text()).toEqual(AXIOM)
   })
 
   test('close', async () => {
-    const wrapper = mount(Alert, {
-      props: {
-        closeText: 'close',
-      },
-    })
-
+    const wrapper = mount(() => <Alert closeText={'close'} />)
     const closeBtn = wrapper.find('.el-alert__close-btn')
     expect(closeBtn.exists()).toBe(true)