refactor(components): [popper] use JSX in Unit test (#8462)

packages/components/popper/__tests__/arrow.test.tsx

@@ -1,10 +1,11 @@
 import { nextTick, ref } from 'vue'
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { POPPER_CONTENT_INJECTION_KEY } from '@element-plus/tokens'
 import ElArrow from '../src/arrow.vue'
 
 import type { VueWrapper } from '@vue/test-utils'
+import type { PopperArrowInstance } from '../src/arrow'
 
 const popperContentInjection = {
   arrowRef: ref(null),
@@ -12,7 +13,7 @@ const popperContentInjection = {
 }
 
 const mountArrow = () =>
-  shallowMount(ElArrow, {
+  mount(<ElArrow />, {
     global: {
       provide: {
         [POPPER_CONTENT_INJECTION_KEY as symbol]: popperContentInjection,
@@ -21,7 +22,7 @@ const mountArrow = () =>
   })
 
 describe('<ElPopperArrow />', () => {
-  let wrapper: VueWrapper<InstanceType<typeof ElArrow>>
+  let wrapper: VueWrapper<PopperArrowInstance>
 
   beforeEach(() => {
     wrapper = mountArrow()

packages/components/popper/__tests__/content.test.tsx

@@ -4,6 +4,9 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
 import ElContent from '../src/content.vue'
 
+import type { VueWrapper } from '@vue/test-utils'
+import type { PopperContentInstance } from '../src/content'
+
 const AXIOM = 'rem is the best girl'
 const popperInjection = {
   triggerRef: ref(),
@@ -12,11 +15,7 @@ const popperInjection = {
 }
 
 const mountContent = (props = {}) =>
-  mount(ElContent, {
+  mount(<ElContent {...props}>{AXIOM}</ElContent>, {
-    props,
-    slots: {
-      default: () => AXIOM,
-    },
     global: {
       provide: {
         [POPPER_INJECTION_KEY as symbol]: popperInjection,
@@ -27,7 +26,8 @@ const mountContent = (props = {}) =>
 describe('<ElPopperContent />', () => {
   describe('with triggerRef provided', () => {
     const triggerKls = 'el-popper__trigger'
-    let wrapper: ReturnType<typeof mountContent>
+    let wrapper: VueWrapper<PopperContentInstance>
+
     beforeEach(() => {
       const trigger = document.createElement('div')
       trigger.className = triggerKls

packages/components/popper/__tests__/popper.test.tsx

@@ -1,4 +1,4 @@
-import { h, inject, nextTick } from 'vue'
+import { defineComponent, inject, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
@@ -6,29 +6,20 @@ import ElPopper from '../src/popper.vue'
 
 const AXIOM = 'rem is the best girl'
 
-const TestChild = {
+const TestChild = defineComponent({
-  template: `<div ref="contentRef">${AXIOM}</div>`,
-
   setup() {
     const { contentRef } = inject(POPPER_INJECTION_KEY, undefined)!
-
+    return () => <div ref={contentRef}>{AXIOM}</div>
-    return {
-      contentRef,
-    }
-  },
-}
-
-describe('<ElPopper />', () => {
-  const mountPopper = () => {
-    return mount(ElPopper, {
-      slots: {
-        default: () => h(TestChild),
   },
 })
-  }
 
+describe('<ElPopper />', () => {
   it('should be able to provide instance to its children', async () => {
-    const wrapper = mountPopper()
+    const wrapper = mount(
+      <ElPopper>
+        <TestChild />
+      </ElPopper>
+    )
 
     await nextTick()
 

packages/components/popper/__tests__/trigger.test.tsx

@@ -4,18 +4,19 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { POPPER_INJECTION_KEY } from '@element-plus/tokens'
 import ElTrigger from '../src/trigger.vue'
 
+import type { VueWrapper } from '@vue/test-utils'
+import type { PopperTriggerInstance } from '../src/trigger'
+
 const AXIOM = 'rem is the best girl'
+
 const popperInjection = {
   triggerRef: ref(null),
   popperInstanceRef: ref(null),
   contentRef: ref(null),
 }
+
 const mountTrigger = (props = {}) =>
-  mount(ElTrigger, {
+  mount(<ElTrigger {...props}>{AXIOM}</ElTrigger>, {
-    props,
-    slots: {
-      default: () => AXIOM,
-    },
     global: {
       provide: {
         [POPPER_INJECTION_KEY as symbol]: popperInjection,
@@ -24,7 +25,7 @@ const mountTrigger = (props = {}) =>
   })
 
 describe('<ElPopperTrigger />', () => {
-  let wrapper: ReturnType<typeof mountTrigger>
+  let wrapper: VueWrapper<PopperTriggerInstance>
 
   afterEach(() => {
     popperInjection.triggerRef.value = null