test: fix image test (#53817)

components/statistic/Timer.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useEvent } from 'rc-util';
 import raf from 'rc-util/lib/raf';
 
-import useForceUpdate from '../_util/hooks/useForceUpdate';
 import { cloneElement } from '../_util/reactNode';
 import type { StatisticProps } from './Statistic';
 import Statistic from './Statistic';
@@ -29,14 +28,15 @@ const StatisticTimer: React.FC<StatisticTimerProps> = (props) => {
   const { value, format = 'HH:mm:ss', onChange, onFinish, type, ...rest } = props;
   const down = type === 'countdown';
 
-  const forceUpdate = useForceUpdate();
+  // We reuse state here to do same as `forceUpdate`
+  const [showTime, setShowTime] = React.useState<null | object>(null);
 
   // ======================== Update ========================
   const update = useEvent(() => {
     const now = Date.now();
     const timestamp = getTime(value);
 
-    forceUpdate();
+    setShowTime({});
     const timeDiff = !down ? now - timestamp : timestamp - now;
 
     onChange?.(timeDiff);
@@ -68,9 +68,13 @@ const StatisticTimer: React.FC<StatisticTimerProps> = (props) => {
     return clear;
   }, [value, down]);
 
+  React.useEffect(() => {
+    setShowTime({});
+  }, []);
+
   // ======================== Format ========================
   const formatter: StatisticProps['formatter'] = (formatValue, config) =>
-    formatCounter(formatValue, { ...config, format }, down);
+    showTime ? formatCounter(formatValue, { ...config, format }, down) : '-';
 
   const valueRender: StatisticProps['valueRender'] = (node) =>
     cloneElement(node, { title: undefined });

components/statistic/__tests__/__snapshots__/demo.test.ts.snap

@@ -420,7 +420,7 @@ exports[`renders components/statistic/demo/timer.tsx correctly 1`] = `
         <span
           class="ant-statistic-content-value"
         >
-          48:00:30
+          -
         </span>
       </div>
     </div>
@@ -443,7 +443,7 @@ exports[`renders components/statistic/demo/timer.tsx correctly 1`] = `
         <span
           class="ant-statistic-content-value"
         >
-          48:00:30:000
+          -
         </span>
       </div>
     </div>
@@ -466,7 +466,7 @@ exports[`renders components/statistic/demo/timer.tsx correctly 1`] = `
         <span
           class="ant-statistic-content-value"
         >
-          00:00:10
+          -
         </span>
       </div>
     </div>
@@ -489,7 +489,7 @@ exports[`renders components/statistic/demo/timer.tsx correctly 1`] = `
         <span
           class="ant-statistic-content-value"
         >
-          47:59:30
+          -
         </span>
       </div>
     </div>
@@ -512,7 +512,7 @@ exports[`renders components/statistic/demo/timer.tsx correctly 1`] = `
         <span
           class="ant-statistic-content-value"
         >
-          2 天 0 时 0 分 30 秒
+          -
         </span>
       </div>
     </div>
@@ -535,7 +535,7 @@ exports[`renders components/statistic/demo/timer.tsx correctly 1`] = `
         <span
           class="ant-statistic-content-value"
         >
-          1 天 23 时 59 分 30 秒
+          -
         </span>
       </div>
     </div>

components/statistic/__tests__/image.test.ts

@@ -1,5 +1,7 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';
 
 describe('Statistic image', () => {
-  imageDemoTest('statistic', { skip: ['countdown.tsx'] });
+  imageDemoTest('statistic', {
+    ssr: ['timer.tsx'],
+  });
 });

components/statistic/__tests__/index.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import dayjs from 'dayjs';
+import { renderToString } from 'react-dom/server';
 
 import type { CountdownProps } from '..';
 import Statistic from '..';
@@ -200,6 +201,24 @@ describe('Statistic', () => {
         '00:30:01',
       );
     });
+
+    it('ssr', async () => {
+      const onChange = jest.fn();
+      const onFinish = jest.fn();
+
+      const html = renderToString(
+        <Statistic.Timer
+          type="countdown"
+          value={Date.now() + 2300}
+          onChange={onChange}
+          onFinish={onFinish}
+        />,
+      );
+
+      document.body.innerHTML = html;
+
+      expect(document.querySelector('.ant-statistic-content-value')!.textContent).toEqual('-');
+    });
   });
 
   describe('Deprecated Countdown', () => {

tests/shared/imageTest.tsx

@@ -30,7 +30,7 @@ const themes = {
 
 interface ImageTestOptions {
   onlyViewport?: boolean;
-  ssr?: boolean;
+  ssr?: boolean | string[];
   openTriggerClassName?: string;
   mobile?: boolean;
 }
@@ -39,6 +39,7 @@ interface ImageTestOptions {
 export default function imageTest(
   component: React.ReactElement,
   identifier: string,
+  filename: string,
   options: ImageTestOptions,
 ) {
   let doc: Document;
@@ -159,7 +160,10 @@ export default function imageTest(
       let html: string;
       let styleStr: string;
 
-      if (options.ssr) {
+      if (
+        options.ssr &&
+        (options.ssr === true || options.ssr.some((demoName) => filename.includes(demoName)))
+      ) {
         html = ReactDOMServer.renderToString(element);
         styleStr = extractStyle(cache) + extractStaticStyle(html).map((item) => item.tag);
       } else {
@@ -277,7 +281,7 @@ type Options = {
   skip?: boolean | string[];
   onlyViewport?: boolean | string[];
   /** Use SSR render instead. Only used when the third part deps component */
-  ssr?: boolean;
+  ssr?: boolean | string[];
   /** Open Trigger to check the popup render */
   openTriggerClassName?: string;
   mobile?: string[];
@@ -312,7 +316,7 @@ export function imageDemoTest(component: string, options: Options = {}) {
       if (typeof Demo === 'function') {
         Demo = <Demo />;
       }
-      imageTest(Demo, `${component}-${path.basename(file, '.tsx')}`, getTestOption(file));
+      imageTest(Demo, `${component}-${path.basename(file, '.tsx')}`, file, getTestOption(file));
 
       // Check if need mobile test
       if ((options.mobile || []).some((c) => file.endsWith(c))) {
@@ -328,7 +332,7 @@ export function imageDemoTest(component: string, options: Options = {}) {
       });
 
       mobileDemos.forEach(([file, Demo]) => {
-        imageTest(Demo, `${component}-${path.basename(file, '.tsx')}`, {
+        imageTest(Demo, `${component}-${path.basename(file, '.tsx')}`, file, {
           ...getTestOption(file),
           mobile: true,
         });