test: add test case

src/hooks/useRegisterImage.ts

@@ -19,15 +19,15 @@ export default function useRegisterImage(canPreview: boolean, data: ImageElement
   // Keep order start
   // Resolve https://github.com/ant-design/ant-design/issues/28881
   // Only need unRegister when component unMount
-  React.useEffect(() => {
-    if (groupContext) {
-      return groupContext.register(id, registerData);
-    }
-  }, []);
+  // React.useEffect(() => {
+  //   if (groupContext) {
+  //     return groupContext.register(id, registerData);
+  //   }
+  // }, []);
 
   React.useEffect(() => {
     if (groupContext) {
-      groupContext.register(id, registerData);
+      return groupContext.register(id, registerData);
     }
   }, [canPreview, data]);
 

tests/previewGroup.test.tsx

@@ -1,5 +1,6 @@
 import { act, fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
+import React from 'react';
 import Image from '../src';
 
 describe('PreviewGroup', () => {
@@ -267,4 +268,35 @@ describe('PreviewGroup', () => {
     fireEvent.click(document.querySelector('.rc-image-preview-switch-right'));
     expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3');
   });
+
+  it('should keep order', async () => {
+    const Demo = ({ firstUrl }: { firstUrl: string }) => {
+      return (
+        <Image.PreviewGroup preview={{ visible: true }}>
+          <Image src={firstUrl} />
+          <Image src="http://last/img.png" />
+        </Image.PreviewGroup>
+      );
+    };
+
+    const { rerender } = render(<Demo firstUrl="http://first/img.png" />);
+
+    // Open preview
+    expect(document.querySelector('.rc-image-preview-operations-progress').textContent).toEqual(
+      '1 / 2',
+    );
+    expect(
+      document.querySelector<HTMLImageElement>('.rc-image-preview-img-wrapper img')!.src,
+    ).toEqual('http://first/img.png');
+
+    // Modify URL should keep order
+    rerender(<Demo firstUrl="http://second/img.png" />);
+
+    expect(document.querySelector('.rc-image-preview-operations-progress').textContent).toEqual(
+      '1 / 2',
+    );
+    expect(
+      document.querySelector<HTMLImageElement>('.rc-image-preview-img-wrapper img')!.src,
+    ).toEqual('http://second/img.png');
+  });
 });

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "esnext",
     "moduleResolution": "node",
     "baseUrl": "./",
-    "jsx": "preserve",
+    "jsx": "react",
     "declaration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,