From af59faef39b51afcf346340229cdff2e0eb49673 Mon Sep 17 00:00:00 2001 From: "Shubham Agrawal (via MelvinBot)" Date: Tue, 5 May 2026 02:26:49 +0000 Subject: [PATCH 1/3] Add @react-navigation/core mock for Storybook SearchContextProvider imports useNavigation from @react-navigation/core, but Storybook's webpack config only mocked @react-navigation/native. The real useNavigation throws because there is no NavigationContainer, crashing every story. - Add __mocks__/@react-navigation/core/index.ts with a callable stub - Register it in .storybook/webpackMockPaths.ts - Fix the native mock's useNavigation to be a function (was a plain object) Co-authored-by: Shubham Agrawal --- .storybook/webpackMockPaths.ts | 1 + __mocks__/@react-navigation/core/index.ts | 15 +++++++++++++++ __mocks__/@react-navigation/native/index.ts | 6 +++--- 3 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 __mocks__/@react-navigation/core/index.ts diff --git a/.storybook/webpackMockPaths.ts b/.storybook/webpackMockPaths.ts index 78fbdc85cfa6..64587de13d5d 100644 --- a/.storybook/webpackMockPaths.ts +++ b/.storybook/webpackMockPaths.ts @@ -10,5 +10,6 @@ export default { 'react-native$': 'react-native-web', '@react-native-community/netinfo': path.resolve(dirname, '../__mocks__/@react-native-community/netinfo.ts'), '@react-navigation/native': path.resolve(dirname, '../__mocks__/@react-navigation/native'), + '@react-navigation/core': path.resolve(dirname, '../__mocks__/@react-navigation/core'), }; /* eslint-enable @typescript-eslint/naming-convention */ diff --git a/__mocks__/@react-navigation/core/index.ts b/__mocks__/@react-navigation/core/index.ts new file mode 100644 index 000000000000..96dd34244f7b --- /dev/null +++ b/__mocks__/@react-navigation/core/index.ts @@ -0,0 +1,15 @@ +const useNavigation = () => ({ + navigate: () => {}, + getState: () => ({routes: []}), + dispatch: () => {}, + goBack: () => {}, + canGoBack: () => false, + addListener: () => () => {}, + reset: () => {}, + setParams: () => {}, + isFocused: () => true, + getId: () => undefined, + getParent: () => undefined, +}); + +export {useNavigation}; diff --git a/__mocks__/@react-navigation/native/index.ts b/__mocks__/@react-navigation/native/index.ts index 5c3d3e6007ec..869f22e5133f 100644 --- a/__mocks__/@react-navigation/native/index.ts +++ b/__mocks__/@react-navigation/native/index.ts @@ -18,13 +18,13 @@ const {triggerTransitionEnd, addListener} = isJestEnv const useNavigation = isJestEnv ? realReactNavigation.useNavigation - : { - navigate: isJestEnv ? jest.fn() : () => {}, + : () => ({ + navigate: () => {}, getState: () => ({ routes: [], }), addListener, - }; + }); type NativeNavigationMock = typeof ReactNavigation & { triggerTransitionEnd: () => void; From 3deed172d507611bb436511bd2df320efdcf40a3 Mon Sep 17 00:00:00 2001 From: "Shubham Agrawal (via MelvinBot)" Date: Tue, 5 May 2026 02:34:37 +0000 Subject: [PATCH 2/3] Switch to import-based fix instead of separate core mock The core mock approach broke because the native mock re-exports everything from @react-navigation/core via export *. Aliasing core to a minimal mock stripped all those re-exports. Instead, change SearchContext to import useNavigation from @react-navigation/native (matching the codebase convention) so it routes through the existing mock. Co-authored-by: Shubham Agrawal --- .storybook/webpackMockPaths.ts | 1 - __mocks__/@react-navigation/core/index.ts | 15 --------------- src/components/Search/SearchContext.tsx | 2 +- 3 files changed, 1 insertion(+), 17 deletions(-) delete mode 100644 __mocks__/@react-navigation/core/index.ts diff --git a/.storybook/webpackMockPaths.ts b/.storybook/webpackMockPaths.ts index 64587de13d5d..78fbdc85cfa6 100644 --- a/.storybook/webpackMockPaths.ts +++ b/.storybook/webpackMockPaths.ts @@ -10,6 +10,5 @@ export default { 'react-native$': 'react-native-web', '@react-native-community/netinfo': path.resolve(dirname, '../__mocks__/@react-native-community/netinfo.ts'), '@react-navigation/native': path.resolve(dirname, '../__mocks__/@react-navigation/native'), - '@react-navigation/core': path.resolve(dirname, '../__mocks__/@react-navigation/core'), }; /* eslint-enable @typescript-eslint/naming-convention */ diff --git a/__mocks__/@react-navigation/core/index.ts b/__mocks__/@react-navigation/core/index.ts deleted file mode 100644 index 96dd34244f7b..000000000000 --- a/__mocks__/@react-navigation/core/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -const useNavigation = () => ({ - navigate: () => {}, - getState: () => ({routes: []}), - dispatch: () => {}, - goBack: () => {}, - canGoBack: () => false, - addListener: () => () => {}, - reset: () => {}, - setParams: () => {}, - isFocused: () => true, - getId: () => undefined, - getParent: () => undefined, -}); - -export {useNavigation}; diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx index e0904e5441c4..40e457e9ad38 100644 --- a/src/components/Search/SearchContext.tsx +++ b/src/components/Search/SearchContext.tsx @@ -1,4 +1,4 @@ -import {useNavigation} from '@react-navigation/core'; +import {useNavigation} from '@react-navigation/native'; import type {NavigationState} from '@react-navigation/routers'; import React, {useContext, useEffect, useRef, useState} from 'react'; // We need direct access to useOnyx from react-native-onyx to avoid circular dependencies in SearchContext From 17398f77f832605e3731c5bb40d5852012ade283 Mon Sep 17 00:00:00 2001 From: "Shubham Agrawal (via MelvinBot)" Date: Tue, 5 May 2026 02:51:35 +0000 Subject: [PATCH 3/3] Fix: Add getState to useNavigation mock in TransactionGroupListItemTest The PR changed SearchContext.tsx to import useNavigation from @react-navigation/native instead of @react-navigation/core, but the test's local mock for @react-navigation/native was missing getState on the useNavigation return value, causing TypeError at runtime. Co-authored-by: Shubham Agrawal --- tests/unit/TransactionGroupListItemTest.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/unit/TransactionGroupListItemTest.tsx b/tests/unit/TransactionGroupListItemTest.tsx index bee909309823..e80d24a822b4 100644 --- a/tests/unit/TransactionGroupListItemTest.tsx +++ b/tests/unit/TransactionGroupListItemTest.tsx @@ -33,6 +33,7 @@ jest.mock('@react-navigation/native', () => ({ useNavigation: () => ({ navigate: jest.fn(), addListener: jest.fn(), + getState: jest.fn(() => undefined), }), useFocusEffect: jest.fn((callback: () => void) => callback()), useRoute: () => ({