From e99fda889b576f180bb14ea099998acc44f44641 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Fri, 19 Jul 2024 18:23:04 +0800
Subject: [PATCH] fix(components): [countdown] SSR hydration error (#17554)

* fix(components): [countdown] SSR hydration error

* fix: test
---
 .../countdown/__tests__/countdown.test.tsx    |  8 +++---
 .../components/countdown/src/countdown.vue    | 28 +++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/components/countdown/__tests__/countdown.test.tsx b/packages/components/countdown/__tests__/countdown.test.tsx
index 9173394cda..fca095b282 100644
--- a/packages/components/countdown/__tests__/countdown.test.tsx
+++ b/packages/components/countdown/__tests__/countdown.test.tsx
@@ -20,8 +20,8 @@ describe('Countdown.vue', () => {
     wrapper.unmount()
   })
 
-  it('render test', () => {
-    wrapper = mount(() => (
+  it('render test', async () => {
+    wrapper = await mount(() => (
       <Countdown title="test" value={Date.now() + 1000 * 60} />
     ))
 
@@ -35,7 +35,7 @@ describe('Countdown.vue', () => {
       ['DD [days] HH [hours] mm:ss', '02 days 02 hours 02:02'],
       ['HH:mm:ss', '50:02:02'],
       ['HH:mm:ss:SSS', '50:02:02:002'],
-    ])('should work with %s', (format, expected) => {
+    ])('should work with %s', async (format, expected) => {
       const value = dayjs()
         .add(2, 'd')
         .add(2, 'h')
@@ -43,7 +43,7 @@ describe('Countdown.vue', () => {
         .add(2, 's')
         .add(2, 'ms')
 
-      wrapper = mount(() => <Countdown value={value} format={format} />)
+      wrapper = await mount(() => <Countdown value={value} format={format} />)
 
       expect(wrapper.find(CONTENT_CLASS).text()).toBe(expected)
     })
diff --git a/packages/components/countdown/src/countdown.vue b/packages/components/countdown/src/countdown.vue
index d5f0299431..7e88f09df4 100644
--- a/packages/components/countdown/src/countdown.vue
+++ b/packages/components/countdown/src/countdown.vue
@@ -13,7 +13,7 @@
   </el-statistic>
 </template>
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { ElStatistic } from '@element-plus/components/statistic'
 import { cAF, rAF } from '@element-plus/utils'
 import { countdownEmits, countdownProps } from './countdown'
@@ -27,7 +27,7 @@ const props = defineProps(countdownProps)
 const emit = defineEmits(countdownEmits)
 
 let timer: ReturnType<typeof rAF> | undefined
-const rawValue = ref(getTime(props.value) - Date.now())
+const rawValue = ref<number>(0)
 const displayValue = computed(() => formatTime(rawValue.value, props.format))
 
 const formatter = (val: number) => formatTime(val, props.format)
@@ -56,16 +56,20 @@ const startTimer = () => {
   timer = rAF(frameFunc)
 }
 
-watch(
-  () => [props.value, props.format],
-  () => {
-    stopTimer()
-    startTimer()
-  },
-  {
-    immediate: true,
-  }
-)
+onMounted(() => {
+  rawValue.value = getTime(props.value) - Date.now()
+
+  watch(
+    () => [props.value, props.format],
+    () => {
+      stopTimer()
+      startTimer()
+    },
+    {
+      immediate: true,
+    }
+  )
+})
 
 onBeforeUnmount(() => {
   stopTimer()