diff --git a/packages/components/tree-select/__tests__/tree-select.test.ts b/packages/components/tree-select/__tests__/tree-select.test.tsx
similarity index 90%
rename from packages/components/tree-select/__tests__/tree-select.test.ts
rename to packages/components/tree-select/__tests__/tree-select.test.tsx
index a5199184ef..1890616e65 100644
--- a/packages/components/tree-select/__tests__/tree-select.test.ts
+++ b/packages/components/tree-select/__tests__/tree-select.test.tsx
@@ -1,7 +1,8 @@
-import { h, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'
 import TreeSelect from '../src/tree-select.vue'
+
 import type { RenderFunction } from 'vue'
 import type { VueWrapper } from '@vue/test-utils'
 import type ElSelect from '@element-plus/components/select'
@@ -14,44 +15,41 @@ const createComponent = ({
   slots?: Record<string, any>
   props?: typeof TreeSelect['props']
 } = {}) => {
-  // vm can not get component expose, use ref
-  const wrapperRef = ref()
+  const wrapperRef = ref<InstanceType<typeof TreeSelect>>()
   const value = props.modelValue || ref('')
-  const wrapper = mount({
-    data() {
-      return {
-        modelValue: value,
-        data: [
-          {
-            value: 1,
-            label: '一级 1',
-            children: [
-              {
-                value: 11,
-                label: '二级 1-1',
-                children: [
-                  {
-                    value: 111,
-                    label: '三级 1-1',
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-        'onUpdate:modelValue': (val: string) => (value.value = val),
-        renderAfterExpand: false,
-        ...props,
-      }
-    },
-    render() {
-      return h(
-        TreeSelect,
+  const data = ref([
+    {
+      value: 1,
+      label: '一级 1',
+      children: [
         {
-          ...this.$data,
-          ref: (val: object) => (wrapperRef.value = val),
+          value: 11,
+          label: '二级 1-1',
+          children: [
+            {
+              value: 111,
+              label: '三级 1-1',
+            },
+          ],
         },
-        slots
+      ],
+    },
+  ])
+
+  const wrapper = mount({
+    render() {
+      return (
+        <TreeSelect
+          data={data.value}
+          renderAfterExpand={false}
+          {...props}
+          modelValue={value.value}
+          onUpdate:modelValue={(val: string) => (value.value = val)}
+          ref={(val: InstanceType<typeof TreeSelect>) =>
+            (wrapperRef.value = val)
+          }
+          v-slots={slots}
+        />
       )
     },
   })
@@ -59,9 +57,9 @@ const createComponent = ({
   return {
     wrapper,
     getWrapperRef: () =>
-      new Promise((resolve) =>
-        nextTick(() => resolve(wrapperRef.value))
-      ) as Promise<InstanceType<typeof ElTree> & InstanceType<typeof ElSelect>>,
+      new Promise<InstanceType<typeof TreeSelect>>((resolve) =>
+        nextTick(() => resolve(wrapperRef.value!))
+      ),
     select: wrapper.findComponent({ name: 'ElSelect' }) as VueWrapper<
       InstanceType<typeof ElSelect>
     >,
@@ -86,7 +84,7 @@ describe('TreeSelect.vue', () => {
     expect(tree.findAll('.el-tree .el-tree-node').length).toBe(3)
     expect(tree.findAll('.el-tree .el-select-dropdown__item').length).toBe(3)
 
-    wrapper.vm.data[0].children = []
+    wrapper.findComponent(TreeSelect).vm.data[0].children = []
 
     await nextTick()
 
@@ -164,7 +162,7 @@ describe('TreeSelect.vue', () => {
       .find('.el-tree-node .el-select-dropdown__item.is-disabled')
       .trigger('click')
     await nextTick()
-    expect(wrapper.vm.modelValue).toBe('1')
+    expect(wrapper.findComponent(TreeSelect).vm.modelValue).toBe('1')
   })
 
   test('multiple', async () => {
@@ -246,8 +244,7 @@ describe('TreeSelect.vue', () => {
 
     await nextTick()
     expect(tree.find('.el-select-dropdown__item').text()).toBe('1')
-    wrapper.vm.modelValue = '2'
-    await nextTick()
+    await wrapper.setProps({ modelValue: '2' })
     expect(select.vm.selectedLabel).toBe('2')
   })