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'; | |
| // General React Mocks | |
| global.fetch = jest.fn(() => Promise.resolve({ | |
| ok: true, | |
| json: () => Promise.resolve({}) | |
| })); | |
| global.navigator = { geolocation: () => {} }; | |
| // Mock axios to prevent network errors | |
| jest.mock('axios'); | |
| // Mock UUID values | |
| jest.mock('uuid', () => ({ v4: () => 'mocked-uuid' })); | |
| // Mock date | |
| jest.useFakeTimers().setSystemTime(new Date('2025-01-01')); | |
| // Set time zone | |
| process.env.TZ = 'America/Los_Angeles'; | |
| // ** REACT NATIVE ONLY BELOW ** | |
| 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; | |
| }); | |
| // FontAwesome | |
| jest.mock('@fortawesome/react-native-fontawesome', () => ({ | |
| FontAwesomeIcon: 'house', | |
| })); | |
| // 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') | |
| ); | |
| // 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