diff --git a/packages/components/descriptions/__tests__/descriptions.test.ts b/packages/components/descriptions/__tests__/descriptions.test.ts
deleted file mode 100644
index 12db89e3bf3ed..0000000000000
--- a/packages/components/descriptions/__tests__/descriptions.test.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-import { nextTick } from 'vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import ElTag from '@element-plus/components/tag'
-import Descriptions from '../src/index.vue'
-import DescriptionsItem from '../src/description-item'
-
-const _mount = (template: string, data?: () => void, methods?: any) =>
- mount({
- components: {
- 'el-descriptions': Descriptions,
- 'el-descriptions-item': DescriptionsItem,
- 'el-tag': ElTag,
- },
- template,
- data,
- methods,
- })
-
-describe('Descriptions.vue', () => {
- test('render test', () => {
- const wrapper = _mount(`
-
-
-
- `)
-
- expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
- expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
- expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
- })
-
- test('should render border props', () => {
- const wrapper = _mount(`
-
- {{ item }}
-
- `)
-
- expect(wrapper.find('table').classes()).toContain('is-bordered')
- })
-
- test('should render align props', () => {
- const wrapper = _mount(`
-
- {{ item }}
-
- `)
-
- expect(wrapper.find('.el-descriptions__label').classes()).toContain(
- 'is-center'
- )
- expect(wrapper.find('.el-descriptions__content').classes()).toContain(
- 'is-right'
- )
- })
-
- test('should render width props', () => {
- const wrapper = _mount(`
-
- {{ item }}
-
- `)
-
- expect(
- wrapper.find('.el-descriptions__label').attributes('style')
- ).toContain('width: 50px; min-width: 60px;')
- expect(
- wrapper.find('.el-descriptions__content').attributes('style')
- ).toContain('width: 50px; min-width: 60px;')
- })
-
- test('should render class props', () => {
- const wrapper = _mount(`
-
- {{ item }}
-
- `)
-
- expect(wrapper.find('.el-descriptions__label').classes()).toContain(
- 'label-class-name'
- )
- expect(wrapper.find('.el-descriptions__content').classes()).toContain(
- 'class-name'
- )
- })
-
- test('should render width props', () => {
- const wrapper = _mount(`
-
- {{ item }}
-
- `)
-
- expect(
- wrapper.find('.el-descriptions__label').attributes('style')
- ).toContain('width: 50px; min-width: 60px;')
- expect(
- wrapper.find('.el-descriptions__content').attributes('style')
- ).toContain('width: 50px; min-width: 60px;')
- })
-
- test('should render column props', async () => {
- const wrapper = _mount(
- `
-
- {{ item }}
-
- `,
- () => {
- return {
- border: false,
- }
- }
- )
-
- expect(wrapper.find('tr').element.children.length).toEqual(5)
- wrapper.vm.border = true
- await nextTick()
- expect(wrapper.find('tr').element.children.length).toEqual(10)
- })
-
- test('should render direction props', async () => {
- const wrapper = _mount(
- `
-
- {{ item }}
-
- `,
- () => {
- return {
- direction: 'horizontal',
- }
- }
- )
-
- expect(wrapper.find('tr').element.children.length).toEqual(10)
- expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
- wrapper.findAll('tr')[0].element.children[1].innerHTML
- )
- wrapper.vm.direction = 'vertical'
- await nextTick()
- expect(wrapper.find('tr').element.children.length).toEqual(5)
- expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
- wrapper.findAll('tr')[1].element.children[0].innerHTML
- )
- })
-
- test('should render title slots', async () => {
- const wrapper = _mount(`
-
- title
- {{ item }}
-
- `)
-
- expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
- })
-
- test('should render span props', async () => {
- const wrapper = _mount(`
-
- 1
- 2
- 3
- 4
-
- `)
-
- expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
- '2'
- )
- expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
- '2'
- )
- })
-
- test('re-rendered when slots is updated', async () => {
- const CHANGE_VALUE = 'company'
- const wrapper = _mount(
- `
-
-
- {{remark}}
-
-
-
- `,
- () => {
- return {
- remarks: ['school', 'hospital'],
- }
- },
- {
- onClick() {
- this.remarks[0] = CHANGE_VALUE
- },
- }
- )
- wrapper.find('button').trigger('click')
- await nextTick()
- expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
- })
-})
diff --git a/packages/components/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx
new file mode 100644
index 0000000000000..9232b12b8b622
--- /dev/null
+++ b/packages/components/descriptions/__tests__/descriptions.test.tsx
@@ -0,0 +1,193 @@
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import ElTag from '@element-plus/components/tag'
+import ElDescriptions from '../src/index.vue'
+import ElDescriptionsItem from '../src/description-item'
+
+describe('Descriptions.vue', () => {
+ test('render test', () => {
+ const wrapper = mount(() => (
+
+ {Array.from({ length: 4 }).map(() => (
+
+ ))}
+
+ ))
+
+ expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+ expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
+ expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
+ })
+
+ test('should render border props', () => {
+ const wrapper = mount(() => (
+
+
+
+ ))
+
+ expect(wrapper.find('table').classes()).toContain('is-bordered')
+ })
+
+ test('should render align props', () => {
+ const wrapper = mount(() => (
+
+ {Array.from({ length: 3 }).map(() => (
+
+ ))}
+
+ ))
+
+ expect(wrapper.find('.el-descriptions__label').classes()).toContain(
+ 'is-center'
+ )
+ expect(wrapper.find('.el-descriptions__content').classes()).toContain(
+ 'is-right'
+ )
+ })
+
+ test('should render width props', () => {
+ const wrapper = mount(() => (
+
+ {Array.from({ length: 3 }).map(() => (
+
+ ))}
+
+ ))
+
+ expect(
+ wrapper.find('.el-descriptions__label').attributes('style')
+ ).toContain('width: 50px; min-width: 60px;')
+ expect(
+ wrapper.find('.el-descriptions__content').attributes('style')
+ ).toContain('width: 50px; min-width: 60px;')
+ })
+
+ test('should render class props', () => {
+ const wrapper = mount(() => (
+
+ {Array.from({ length: 3 }).map(() => (
+
+ ))}
+
+ ))
+
+ expect(wrapper.find('.el-descriptions__label').classes()).toContain(
+ 'label-class-name'
+ )
+ expect(wrapper.find('.el-descriptions__content').classes()).toContain(
+ 'class-name'
+ )
+ })
+
+ test('should render column props', async () => {
+ const border = ref(false)
+
+ const wrapper = mount(() => (
+
+ {Array.from({ length: 10 }).map(() => (
+
+ ))}
+
+ ))
+
+ expect(wrapper.find('tr').element.children.length).toEqual(5)
+
+ border.value = true
+
+ await nextTick()
+
+ expect(wrapper.find('tr').element.children.length).toEqual(10)
+ })
+
+ test('should render direction props', async () => {
+ const direction = ref('horizontal')
+
+ const wrapper = mount(() => (
+
+ {Array.from({ length: 10 }).map((item) => (
+
+ {String(item)}
+
+ ))}
+
+ ))
+
+ expect(wrapper.find('tr').element.children.length).toEqual(10)
+ expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
+ wrapper.findAll('tr')[0].element.children[1].innerHTML
+ )
+
+ direction.value = 'vertical'
+ await nextTick()
+
+ expect(wrapper.find('tr').element.children.length).toEqual(5)
+ expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
+ wrapper.findAll('tr')[1].element.children[0].innerHTML
+ )
+ })
+
+ test('should render title slots', async () => {
+ const wrapper = mount(() => (
+ 'title',
+ default: () =>
+ Array.from({ length: 10 }).map(() => ),
+ }}
+ >
+ ))
+
+ expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+ })
+
+ test('should render span props', async () => {
+ const wrapper = mount(() => (
+
+ 1
+
+ 2
+
+ 3
+ 4
+
+ ))
+
+ expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
+ '2'
+ )
+ expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
+ '2'
+ )
+ })
+
+ test('re-rendered when slots is updated', async () => {
+ const CHANGE_VALUE = 'company'
+ const remarks = ref(['school', 'hospital'])
+
+ const onClick = () => {
+ remarks.value[0] = CHANGE_VALUE
+ }
+
+ const wrapper = mount(() => (
+ <>
+ {remarks.value.map((remark, index) => (
+
+
+ {remark}
+
+
+ ))}
+
+ >
+ ))
+
+ wrapper.find('button').trigger('click')
+ await nextTick()
+ expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
+ })
+})