From 6446f2c6bbcc8d6c21607856fbe85e05539e33b6 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Wed, 18 Mar 2026 09:41:16 +0800 Subject: [PATCH 1/5] feat: forceReactUseId --- src/hooks/useId.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index d58a9588..cb4cbef0 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -40,7 +40,7 @@ const useOriginId = getUseId(); export default useOriginId ? // Use React `useId` - function useId(id?: string) { + function useId(id?: string, forceReactUseId?: boolean) { const reactId = useOriginId(); // Developer passed id is single source of truth @@ -49,7 +49,7 @@ export default useOriginId } // Test env always return mock id - if (process.env.NODE_ENV === 'test') { + if (!forceReactUseId && process.env.NODE_ENV === 'test') { return 'test-id'; } From fe17cb00b4aa737e3d0a32d5410ef0752ec464d4 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Wed, 18 Mar 2026 09:42:13 +0800 Subject: [PATCH 2/5] feat: force useId --- src/hooks/useId.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index cb4cbef0..4acb4b95 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -40,7 +40,7 @@ const useOriginId = getUseId(); export default useOriginId ? // Use React `useId` - function useId(id?: string, forceReactUseId?: boolean) { + function useId(id?: string, forceUseId?: boolean) { const reactId = useOriginId(); // Developer passed id is single source of truth @@ -49,14 +49,14 @@ export default useOriginId } // Test env always return mock id - if (!forceReactUseId && process.env.NODE_ENV === 'test') { + if (!forceUseId && process.env.NODE_ENV === 'test') { return 'test-id'; } return reactId; } : // Use compatible of `useId` - function useCompatId(id?: string) { + function useCompatId(id?: string, forceUseId?: boolean) { // Inner id for accessibility usage. Only work in client side const [innerId, setInnerId] = React.useState('ssr-id'); @@ -73,7 +73,7 @@ export default useOriginId } // Test env always return mock id - if (process.env.NODE_ENV === 'test') { + if (!forceUseId && process.env.NODE_ENV === 'test') { return 'test-id'; } From 5b67b9e637562332b8f0e8692a81f0d9abafc2ca Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Wed, 18 Mar 2026 09:45:43 +0800 Subject: [PATCH 3/5] comment --- src/hooks/useId.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index 4acb4b95..1003ea14 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -48,7 +48,7 @@ export default useOriginId return id; } - // Test env always return mock id + // By default, test env always return mock id, but also allow force use id for test case which need to test id logic. if (!forceUseId && process.env.NODE_ENV === 'test') { return 'test-id'; } @@ -72,7 +72,7 @@ export default useOriginId return id; } - // Test env always return mock id + // By default, test env always return mock id, but also allow force use id for test case which need to test id logic. if (!forceUseId && process.env.NODE_ENV === 'test') { return 'test-id'; } From 02f938e1d9c66c2e75f026657a69338b43f96b88 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Wed, 18 Mar 2026 09:45:57 +0800 Subject: [PATCH 4/5] test: cover forceUseId behavior in react18 and react17 paths --- tests/hooks-17.test.tsx | 14 ++++++++++++++ tests/hooks.test.tsx | 12 ++++++++++++ 2 files changed, 26 insertions(+) diff --git a/tests/hooks-17.test.tsx b/tests/hooks-17.test.tsx index 1c84e57e..c020d86b 100644 --- a/tests/hooks-17.test.tsx +++ b/tests/hooks-17.test.tsx @@ -56,5 +56,19 @@ describe('hooks-17', () => { errorSpy.mockRestore(); process.env.NODE_ENV = originEnv; }); + + it('force use compat id in test env', () => { + const DemoForce: React.FC<{ id?: string }> = ({ id }) => { + const mergedId = useId(id, true); + return
; + }; + + resetUuid(); + const { container } = render(); + const ele = container.querySelector('.target-force'); + + expect(ele.id).toBeTruthy(); + expect(ele.id).not.toEqual('test-id'); + }); }); }); diff --git a/tests/hooks.test.tsx b/tests/hooks.test.tsx index f8004eb5..fca3ae1f 100644 --- a/tests/hooks.test.tsx +++ b/tests/hooks.test.tsx @@ -642,6 +642,18 @@ describe('hooks', () => { matchId(container, 'test-id'); }); + it('force use react useId in test env', () => { + const DemoForce: React.FC> = ({ id }) => { + const mergedId = useId(id, true); + return
; + }; + + const { container } = render(); + const ele = container.querySelector('.target-force'); + expect(ele.id).toBeTruthy(); + expect(ele.id).not.toEqual('test-id'); + }); + it('react useId', () => { const errorSpy = jest.spyOn(console, 'error'); const originEnv = process.env.NODE_ENV; From ddecc5e7db15fb00d68602c1df16eb2e6a09bbb1 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Wed, 18 Mar 2026 09:47:47 +0800 Subject: [PATCH 5/5] change name --- src/hooks/useId.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index 1003ea14..331f3ca8 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -40,7 +40,7 @@ const useOriginId = getUseId(); export default useOriginId ? // Use React `useId` - function useId(id?: string, forceUseId?: boolean) { + function useId(id?: string, disableTestMock?: boolean) { const reactId = useOriginId(); // Developer passed id is single source of truth @@ -49,14 +49,14 @@ export default useOriginId } // By default, test env always return mock id, but also allow force use id for test case which need to test id logic. - if (!forceUseId && process.env.NODE_ENV === 'test') { + if (!disableTestMock && process.env.NODE_ENV === 'test') { return 'test-id'; } return reactId; } : // Use compatible of `useId` - function useCompatId(id?: string, forceUseId?: boolean) { + function useCompatId(id?: string, disableTestMock?: boolean) { // Inner id for accessibility usage. Only work in client side const [innerId, setInnerId] = React.useState('ssr-id'); @@ -73,7 +73,7 @@ export default useOriginId } // By default, test env always return mock id, but also allow force use id for test case which need to test id logic. - if (!forceUseId && process.env.NODE_ENV === 'test') { + if (!disableTestMock && process.env.NODE_ENV === 'test') { return 'test-id'; }