Fix Storybook crash from useNavigation mock#89570
Conversation
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 <shubham1206agra@users.noreply.github.com>
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 <shubham1206agra@users.noreply.github.com>
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 <shubham1206agra@users.noreply.github.com>
|
Fixed the failing check: The test |
|
The The prior Jest test failure ( Action needed: Please re-run the failed |
|
The The actual failure is a TLS network error during The checkout step failed 3 times due to this network issue, and the subsequent "broke scripts/generateTranslations.ts" error message is a hardcoded fallback that fires whenever the workflow fails for any reason — it does not reflect the actual cause. Fix: Re-run the failed |
Explanation of Change
SearchContextProviderimportsuseNavigationfrom@react-navigation/core, but Storybook's webpack mock config only aliases@react-navigation/native. The realuseNavigationruns, finds noNavigationContainer, and throws — crashing every story.Additionally, the existing native mock exported
useNavigationas a plain object instead of a function, so even if the import were routed through the mock, callinguseNavigation()would throwTypeError: useNavigation is not a function.This PR:
SearchContext.tsxto importuseNavigationfrom@react-navigation/nativeinstead of@react-navigation/core(they resolve to the same function in production;@react-navigation/nativeis the codebase convention with 373 files vs 8 importing fromcore)useNavigationto be a callable function returning a navigation-shaped object, instead of a plain object literalFixed Issues
$ #89538
Tests
// TODO: The human co-author must fill out the tests you ran before marking this PR as "ready for review"
Offline tests
N/A — changes are limited to Storybook/test scaffolding and a behaviorally-identical import swap.
QA Steps
// TODO: The human co-author must fill out the QA tests you ran before marking this PR as "ready for review".
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari