refactor: Use useId to sync snapshot in test env between different react versions (#286)

Author: zombieJ

package.json

@@ -49,7 +49,7 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6",
     "rc-motion": "^2.3.0",
-    "rc-util": "^5.6.1"
+    "rc-util": "^5.21.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.7",

src/Dialog/index.tsx

@@ -2,12 +2,13 @@ import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
+import useId from 'rc-util/lib/hooks/useId';
 import contains from 'rc-util/lib/Dom/contains';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import type ScollLocker from 'rc-util/lib/Dom/scrollLocker';
 import type { IDialogPropTypes } from '../IDialogPropTypes';
 import Mask from './Mask';
-import { getMotionName, getUUID } from '../util';
+import { getMotionName } from '../util';
 import type { ContentRef } from './Content';
 import Content from './Content';
 
@@ -57,10 +58,7 @@ export default function Dialog(props: IDialogChildProps) {
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
   // ========================== Init ==========================
-  const ariaIdRef = useRef<string>();
-  if (!ariaIdRef.current) {
-    ariaIdRef.current = `rcDialogTitle${getUUID()}`;
-  }
+  const ariaId = useId();
 
   // ========================= Events =========================
   function onDialogVisibleChanged(newVisible: boolean) {
@@ -185,7 +183,7 @@ export default function Dialog(props: IDialogChildProps) {
         ref={wrapperRef}
         onClick={onWrapperClick}
         role="dialog"
-        aria-labelledby={title ? ariaIdRef.current : null}
+        aria-labelledby={title ? ariaId : null}
         style={{ zIndex, ...wrapStyle, display: !animatedVisible ? 'none' : null }}
         {...wrapProps}
       >
@@ -195,7 +193,7 @@ export default function Dialog(props: IDialogChildProps) {
           onMouseUp={onContentMouseUp}
           ref={contentRef}
           closable={closable}
-          ariaId={ariaIdRef.current}
+          ariaId={ariaId}
           prefixCls={prefixCls}
           visible={visible}
           onClose={onInternalClose}

src/util.ts

@@ -7,13 +7,6 @@ export function getMotionName(prefixCls: string, transitionName?: string, animat
   return motionName;
 }
 
-// ================================ UUID ================================
-let uuid = -1;
-export function getUUID() {
-  uuid += 1;
-  return uuid;
-}
-
 // =============================== Offset ===============================
 function getScroll(w: Window, top?: boolean): number {
   let ret = w[`page${top ? 'Y' : 'X'}Offset`];
@@ -30,7 +23,7 @@ function getScroll(w: Window, top?: boolean): number {
 
 type CompatibleDocument = {
   parentWindow?: Window;
-} & Document
+} & Document;
 
 export function offset(el: Element) {
   const rect = el.getBoundingClientRect();

tests/__snapshots__/index.spec.tsx.snap

@@ -57,6 +57,7 @@ exports[`dialog should render correct 1`] = `
     class="rc-dialog-mask"
   />
   <div
+    aria-labelledby="test-id"
     class="rc-dialog-wrap"
     role="dialog"
     tabindex="-1"
@@ -82,6 +83,16 @@ exports[`dialog should render correct 1`] = `
             class="rc-dialog-close-x"
           />
         </button>
+        <div
+          class="rc-dialog-header"
+        >
+          <div
+            class="rc-dialog-title"
+            id="test-id"
+          >
+            Default
+          </div>
+        </div>
         <div
           class="rc-dialog-body"
         />

tests/index.spec.tsx

@@ -18,7 +18,7 @@ describe('dialog', () => {
   });
 
   it('should render correct', () => {
-    const wrapper = mount(<Dialog visible />);
+    const wrapper = mount(<Dialog title="Default" visible />);
     jest.runAllTimers();
     wrapper.update();