From 0296ba2fb7b72dea39cc3a4f9e424fa5a5b3feb6 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Fri, 9 Sep 2022 11:28:45 +0800
Subject: [PATCH] refactor(components): [image-viewer] use JSX in Unit test
 (#9717)

---
 ...e-viewer.test.ts => image-viewer.test.tsx} | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)
 rename packages/components/image-viewer/__tests__/{image-viewer.test.ts => image-viewer.test.tsx} (84%)

diff --git a/packages/components/image-viewer/__tests__/image-viewer.test.ts b/packages/components/image-viewer/__tests__/image-viewer.test.tsx
similarity index 84%
rename from packages/components/image-viewer/__tests__/image-viewer.test.ts
rename to packages/components/image-viewer/__tests__/image-viewer.test.tsx
index afe39bcef5..22c1fdb8da 100644
--- a/packages/components/image-viewer/__tests__/image-viewer.test.ts
+++ b/packages/components/image-viewer/__tests__/image-viewer.test.tsx
@@ -1,16 +1,9 @@
 import { nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
-
 import { IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
-import makeMount from '@element-plus/test-utils/make-mount'
 import ImageViewer from '../src/image-viewer.vue'
 
-const mount = makeMount(ImageViewer, {
-  props: {
-    urlList: [IMAGE_SUCCESS],
-  },
-})
-
 async function doubleWait() {
   await nextTick()
   await nextTick()
@@ -18,7 +11,8 @@ async function doubleWait() {
 
 describe('<image-viewer />', () => {
   test('big image preview', async () => {
-    const wrapper = mount()
+    const wrapper = mount(<ImageViewer urlList={[IMAGE_SUCCESS]} />)
+
     await doubleWait()
     const viewer = wrapper.find('.el-image-viewer__wrapper')
     expect(viewer.exists()).toBe(true)
@@ -28,7 +22,7 @@ describe('<image-viewer />', () => {
   })
 
   test('image preview hide-click-on-modal', async () => {
-    const wrapper = mount()
+    const wrapper = mount(<ImageViewer urlList={[IMAGE_SUCCESS]} />)
 
     await doubleWait()
     const viewer = wrapper.find('.el-image-viewer__wrapper')
@@ -46,11 +40,9 @@ describe('<image-viewer />', () => {
   })
 
   test('manually switch image', async () => {
-    const wrapper = mount({
-      props: {
-        urlList: [IMAGE_SUCCESS, IMAGE_SUCCESS],
-      },
-    })
+    const wrapper = mount(
+      <ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_SUCCESS]} />
+    )
 
     await doubleWait()
     const viewer = wrapper.find('.el-image-viewer__wrapper')