diff --git a/packages/hooks/__tests__/use-throttle-render.test.tsx b/packages/hooks/__tests__/use-throttle-render.test.tsx
new file mode 100644
index 0000000000..500181b639
--- /dev/null
+++ b/packages/hooks/__tests__/use-throttle-render.test.tsx
@@ -0,0 +1,50 @@
+import { defineComponent, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import sleep from '@element-plus/test-utils/sleep'
+import { useThrottleRender } from '../use-throttle-render'
+
+const Comp = defineComponent({
+ setup() {
+ const loading = ref(false)
+ const throttled = useThrottleRender(loading, 1000)
+ // Test the settimeout branch clearly: trigger the watch to record the settimeout first, and then record the settimeout again when mount.
+ loading.value = true
+
+ return () =>
{throttled.value.toString()}
+ },
+})
+
+describe.concurrent('useThrottleRender', () => {
+ it('should throttle rendering when loading is true', async () => {
+ const wrapper = mount(Comp)
+ await nextTick()
+ expect(wrapper.find('.test-dom').text()).toBe('false') // initially false
+ await sleep(1000)
+ expect(wrapper.find('.test-dom').text()).toBe('true') // after throttle time, should be true
+ wrapper.unmount()
+ })
+
+ it('should return false immediately when loading is false', () => {
+ const loading = ref(false)
+ const throttled = useThrottleRender(loading, 1000)
+ expect(throttled.value).toBe(false)
+ })
+
+ it('should return the same value immediately when throttle is 0', () => {
+ const loading = ref(true)
+ const throttled = useThrottleRender(loading, 0)
+ expect(throttled.value).toBe(true) // should be same as loading
+ })
+
+ it('should throttle rendering and update when loading changes', async () => {
+ const loading = ref(true)
+ const throttled = useThrottleRender(loading, 1000)
+ expect(throttled.value).toBe(false) // initially false
+ loading.value = false
+ expect(throttled.value).toBe(false) // should remain false immediately
+ await sleep(1000)
+ loading.value = true
+ expect(throttled.value).toBe(false) // should still be false after throttle time
+ })
+})