Last active
May 6, 2025 16:19
-
-
Save sloyless/22ecaa2d0cecf8f7b13d02cb54f62a2d to your computer and use it in GitHub Desktop.
Helpful Jest Mocks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock'; | |
| import fetch from 'isomorphic-fetch'; | |
| import { Animated, NativeModules } from 'react-native'; | |
| global.fetch = fetch; | |
| global.navigator = { geolocation: () => {} }; | |
| jest.useFakeTimers(); | |
| Animated.timing = () => ({ | |
| start: () => jest.fn(), | |
| }); | |
| // Platform mocks | |
| jest.mock('react-native/Libraries/Utilities/Platform', () => { | |
| let platform = { | |
| OS: 'web', | |
| }; | |
| const select = jest.fn().mockImplementation((obj) => { | |
| const value = obj[platform.OS]; | |
| return !value ? obj.default : value; | |
| }); | |
| platform.select = select; | |
| return platform; | |
| }); | |
| // Animation Mocks | |
| jest.mock('react-native/Libraries/LayoutAnimation/LayoutAnimation', () => ({ | |
| ...jest.requireActual( | |
| 'react-native/Libraries/LayoutAnimation/LayoutAnimation' | |
| ), | |
| configureNext: jest.fn(), | |
| })); | |
| jest.mock('react-native-gesture-handler', () => {}); | |
| jest.mock('react-native-reanimated', () => {}); | |
| jest.mock('react-native-sensitive-info', () => { | |
| return { | |
| setItem: jest.fn(() => new Promise.resolve(null)), | |
| }; | |
| }); | |
| jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage); | |
| jest.mock('@react-native-community/netinfo', () => { | |
| return { | |
| fetch: () => { | |
| return new Promise((resolve, reject) => { | |
| resolve({ | |
| isConnected: true, | |
| }); | |
| reject({ | |
| isConnected: false, | |
| }); | |
| }); | |
| }, | |
| }; | |
| }); | |
| jest.mock('react-native-device-info', () => { | |
| return { | |
| getVersion: () => 4, | |
| getSystemVersion: () => '14', | |
| getUserAgent: jest.fn(() => new Promise.resolve('test')), | |
| getIpAddress: jest.fn(() => { | |
| return {}; | |
| }), | |
| hasNotch: jest.fn(() => { | |
| return true; | |
| }), | |
| }; | |
| }); | |
| // React Navigation Mocks | |
| jest.mock('@react-navigation/drawer', () => { | |
| return { | |
| createDrawerNavigator: jest.fn(), | |
| StackActions: { | |
| push: jest | |
| .fn() | |
| .mockImplementation((x) => ({ ...x, type: 'Navigation/PUSH' })), | |
| replace: jest | |
| .fn() | |
| .mockImplementation((x) => ({ ...x, type: 'Navigation/REPLACE' })), | |
| }, | |
| NavigationActions: { | |
| navigate: jest.fn().mockImplementation((x) => x), | |
| }, | |
| useDrawerStatus: jest.fn(), | |
| }; | |
| }); | |
| jest.mock('@react-navigation/bottom-tabs', () => { | |
| return { | |
| createBottomTabNavigator: jest.fn(), | |
| }; | |
| }); | |
| jest.mock('@react-navigation/stack', () => { | |
| return { | |
| createStackNavigator: jest.fn().mockReturnValue({ | |
| Navigator: ({ children }) => <>{children}</>, | |
| Screen: ({ children }) => <>{children}</>, | |
| }), | |
| }; | |
| }); | |
| jest.mock('@react-navigation/native', () => { | |
| return { | |
| createDrawerNavigator: jest.fn(), | |
| createStackNavigator: jest.fn(), | |
| useIsFocused: () => true, | |
| useNavigation: () => ({ | |
| navigate: jest.fn(), | |
| dispatch: jest.fn(), | |
| goBack: jest.fn(), | |
| dismiss: jest.fn(), | |
| navigate: jest.fn(), | |
| openDrawer: jest.fn(), | |
| closeDrawer: jest.fn(), | |
| toggleDrawer: jest.fn(), | |
| getParam: jest.fn(), | |
| setParams: jest.fn(), | |
| addListener: jest.fn(), | |
| push: jest.fn(), | |
| replace: jest.fn(), | |
| pop: jest.fn(), | |
| popToTop: jest.fn(), | |
| isFocused: jest.fn(), | |
| }), | |
| StackActions: { | |
| push: jest | |
| .fn() | |
| .mockImplementation((x) => ({ ...x, type: 'Navigation/PUSH' })), | |
| replace: jest | |
| .fn() | |
| .mockImplementation((x) => ({ ...x, type: 'Navigation/REPLACE' })), | |
| reset: jest.fn(), | |
| }, | |
| useFocusEffect: () => jest.fn(), | |
| useNavigationContainerRef: () => jest.fn(), | |
| useTheme: () => { | |
| return { | |
| selectedTheme: '', | |
| colors: {}, | |
| theme: { | |
| color: {}, | |
| fontFamily: {}, | |
| fontSize: {}, | |
| }, | |
| }; | |
| }, | |
| }; | |
| }); | |
| jest.mock('react-native-permissions', () => | |
| require('react-native-permissions/mock') | |
| ); | |
| // Allows mocks of BottomSheet | |
| jest.mock('@gorhom/bottom-sheet', () => { | |
| const reactNative = jest.requireActual('react-native'); | |
| const { View } = reactNative; | |
| return { | |
| __esModule: true, | |
| default: View, | |
| BottomSheetModal: View, | |
| BottomSheetModalProvider: View, | |
| useBottomSheetModal: () => ({ | |
| present: jest.fn(), | |
| dismiss: jest.fn(), | |
| }), | |
| useBottomSheet: () => ({ | |
| present: jest.fn(), | |
| dismiss: jest.fn(), | |
| }), | |
| useBottomSheetDynamicSnapPoints: () => ({ | |
| animatedHandleHeight: jest.fn(), | |
| animatedSnapPoints: jest.fn(), | |
| animatedContentHeight: jest.fn(), | |
| }), | |
| }; | |
| }); | |
| // FontAwesome | |
| jest.mock('@fortawesome/react-native-fontawesome', () => ({ | |
| FontAwesomeIcon: 'house', | |
| })); | |
| // Safe Area Context | |
| jest.mock( | |
| 'react-native-safe-area-context', | |
| () => require('react-native-safe-area-context/jest/mock').default | |
| ); | |
| jest.mock('react-native-avoid-softinput', () => { | |
| const mock = require('react-native-avoid-softinput/jest/mock'); | |
| return mock; | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment