diff --git a/packages/apps/esm-primary-navigation-app/src/components/logo/logo.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/logo/logo.component.tsx
index a1a07e952..54d41acfd 100644
--- a/packages/apps/esm-primary-navigation-app/src/components/logo/logo.component.tsx
+++ b/packages/apps/esm-primary-navigation-app/src/components/logo/logo.component.tsx
@@ -7,16 +7,12 @@ const Logo: React.FC = () => {
   return (
     <>
       {logo?.src ? (
-        <img
-          className={styles.logo}
-          src={interpolateUrl(logo.src)}
-          alt={logo.alt}
-        />
+        <img className={styles.logo} src={interpolateUrl(logo.src)} alt={logo.alt} />
       ) : logo?.name ? (
         logo.name
       ) : (
         <svg role="img" width={110} height={40}>
-          <use xlinkHref="#omrs-logo-white"></use>
+          <use xlinkHref="#omrs-logo-white" />
         </svg>
       )}
     </>
diff --git a/packages/apps/esm-primary-navigation-app/src/root.component.test.tsx b/packages/apps/esm-primary-navigation-app/src/root.component.test.tsx
index f27c44e08..fd4bb3d3d 100644
--- a/packages/apps/esm-primary-navigation-app/src/root.component.test.tsx
+++ b/packages/apps/esm-primary-navigation-app/src/root.component.test.tsx
@@ -10,29 +10,20 @@ import Root from './root.component';
 const mockUserObservable = of(mockUser);
 const mockSessionObservable = of({ data: mockSession });
 
-jest.mock('@openmrs/esm-framework', () => ({
-  openmrsFetch: jest.fn().mockResolvedValue({}),
-  useConnectedExtensions: jest.fn().mockReturnValue(['mock-extension']),
-  createErrorHandler: jest.fn(),
-  openmrsObservableFetch: jest.fn(),
-  getCurrentUser: jest.fn(() => mockUserObservable),
-  ExtensionSlot: jest.fn().mockImplementation(({ children }) => <>{children}</>),
-  useLayoutType: jest.fn(() => 'tablet'),
-  useConfig: jest.fn(() => ({
-    logo: { src: null, alt: null, name: 'Mock EMR' },
-  })),
-  useOnClickOutside: jest.fn(() => {
-    const { useRef } = require('react');
-    return useRef();
-  }),
-  useSession: jest.fn().mockReturnValue(mockSession),
-  refetchCurrentUser: jest.fn(),
-  subscribeConnectivity: jest.fn(),
-  navigate: jest.fn(),
-  ConfigurableLink: jest.fn(() => {
-    return <a href="#">Mock EMR</a>;
-  }),
-}));
+jest.mock('@openmrs/esm-framework', () => {
+  const framework = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...framework,
+    ConfigurableLink: jest.fn(() => {
+      return <a href="#">Mock EMR</a>;
+    }),
+    useConfig: jest.fn(() => ({
+      logo: { src: null, alt: null, name: 'Mock EMR', link: 'Mock EMR' },
+    })),
+    useConnectedExtensions: jest.fn().mockReturnValue(['mock-extension']),
+    useSession: jest.fn().mockReturnValue(mockSession),
+  };
+});
 
 jest.mock('./root.resource', () => ({
   getSynchronizedCurrentUser: jest.fn(() => mockUserObservable),
diff --git a/packages/framework/esm-framework/mock.tsx b/packages/framework/esm-framework/mock.tsx
index ac5a74299..600dee25e 100644
--- a/packages/framework/esm-framework/mock.tsx
+++ b/packages/framework/esm-framework/mock.tsx
@@ -48,6 +48,7 @@ export const goBackInHistory = jest.fn();
 
 /* esm-offline */
 export const useConnectivity = jest.fn().mockReturnValue(true);
+export const subscribeConnectivity = jest.fn();
 
 /* esm-styleguide */
 export const showNotification = jest.fn();
diff --git a/packages/framework/esm-react-utils/mock.tsx b/packages/framework/esm-react-utils/mock.tsx
index 3bac7b97c..ece0f35a1 100644
--- a/packages/framework/esm-react-utils/mock.tsx
+++ b/packages/framework/esm-react-utils/mock.tsx
@@ -4,9 +4,11 @@ import { configSchema } from '@openmrs/esm-config/mock';
 import { getExtensionStore, getExtensionInternalStore } from '@openmrs/esm-extensions/mock';
 import { createGlobalStore } from '@openmrs/esm-state/mock';
 import { usePagination as realUsePagination } from './src/index';
-export { ConfigurableLink, isDesktop, useStore, useStoreWithActions, createUseStore } from './src/index';
+export { isDesktop, useStore, useStoreWithActions, createUseStore } from './src/index';
 import * as utils from '@openmrs/esm-utils';
 
+export const ConfigurableLink = ({ to, children }) => <a href={to}>{children}</a>;
+
 export const ComponentContext = React.createContext(null);
 
 export const openmrsComponentDecorator = jest.fn().mockImplementation(() => (component) => component);
diff --git a/packages/framework/esm-styleguide/mock.tsx b/packages/framework/esm-styleguide/mock.tsx
index 259d71e68..812020e9e 100644
--- a/packages/framework/esm-styleguide/mock.tsx
+++ b/packages/framework/esm-styleguide/mock.tsx
@@ -1,42 +1,42 @@
 import React from 'react';
 
-export const ActivityIcon = () => <div>Icon</div>;
-export const AddIcon = () => <div>Icon</div>;
-export const ArrowDownIcon = () => <div>Icon</div>;
-export const ArrowLeftIcon = () => <div>Icon</div>;
-export const ArrowRightIcon = () => <div>Icon</div>;
-export const ArrowUpIcon = () => <div>Icon</div>;
-export const ChartAverageIcon = () => <div>Icon</div>;
-export const ChemistryIcon = () => <div>Icon</div>;
-export const ChevronDownIcon = () => <div>Icon</div>;
-export const ChevronLeftIcon = () => <div>Icon</div>;
-export const ChevronRightIcon = () => <div>Icon</div>;
-export const ChevronUpIcon = () => <div>Icon</div>;
-export const CloseFilledIcon = () => <div>Icon</div>;
-export const CloseIcon = () => <div>Icon</div>;
-export const CloseOutlineIcon = () => <div>Icon</div>;
-export const DownloadIcon = () => <div>Icon</div>;
-export const EditIcon = () => <div>Icon</div>;
-export const ImageMedicalIcon = () => <div>Icon</div>;
-export const RadiologyIcon = () => <div>Icon</div>;
-export const ListCheckedIcon = () => <div>Icon</div>;
-export const ConditionsIcon = () => <div>Icon</div>;
-export const LocationIcon = () => <div>Icon</div>;
-export const MoneyIcon = () => <div>Icon</div>;
-export const MicroscopeIcon = () => <div>Icon</div>;
-export const ResetIcon = () => <div>Icon</div>;
-export const TranslateIcon = () => <div>Icon</div>;
-export const SaveIcon = () => <div>Icon</div>;
-export const SearchIcon = () => <div>Icon</div>;
-export const SwitcherIcon = () => <div>Icon</div>;
-export const ShoppingCartIcon = () => <div>Icon</div>;
-export const ShoppingCartArrowDownIcon = () => <div>Icon</div>;
-export const ShoppingCartAddItemIcon = () => <div>Icon</div>;
-export const TimeIcon = () => <div>Icon</div>;
-export const ToolsIcon = () => <div>Icon</div>;
-export const TrashCanIcon = () => <div>Icon</div>;
-export const UserAvatarIcon = () => <div>Icon</div>;
-export const UserXrayIcon = () => <div>Icon</div>;
-export const WarningIcon = () => <div>Icon</div>;
-export const AllergiesIcon = () => <div>Icon</div>;
+export const ActivityIcon = () => <div>ActivityIcon</div>;
+export const AddIcon = () => <div>AddIcon</div>;
+export const ArrowDownIcon = () => <div>ArrowDownIcon</div>;
+export const ArrowLeftIcon = () => <div>ArrowLeftIcon</div>;
+export const ArrowRightIcon = () => <div>ArrowRightIcon</div>;
+export const ArrowUpIcon = () => <div>ArrowUpIcon</div>;
+export const ChartAverageIcon = () => <div>ChartAverageIcon</div>;
+export const ChemistryIcon = () => <div>ChemistryIcon</div>;
+export const ChevronDownIcon = () => <div>ChevronDownIcon</div>;
+export const ChevronLeftIcon = () => <div>ChevronLeftIcon</div>;
+export const ChevronRightIcon = () => <div>ChevronRightIcon</div>;
+export const ChevronUpIcon = () => <div>ChevronUpIcon</div>;
+export const CloseFilledIcon = () => <div>CloseFilledIcon</div>;
+export const CloseIcon = () => <div>CloseIcon</div>;
+export const CloseOutlineIcon = () => <div>CloseOutlineIcon</div>;
+export const DownloadIcon = () => <div>DownloadIcon</div>;
+export const EditIcon = () => <div>EditIcon</div>;
+export const ImageMedicalIcon = () => <div>ImageMedicalIcon</div>;
+export const RadiologyIcon = () => <div>RadiologyIcon</div>;
+export const ListCheckedIcon = () => <div>ListCheckedIcon</div>;
+export const ConditionsIcon = () => <div>ConditionsIcon</div>;
+export const LocationIcon = () => <div>LocationIcon</div>;
+export const MoneyIcon = () => <div>MoneyIcon</div>;
+export const MicroscopeIcon = () => <div>MicroscopeIcon</div>;
+export const ResetIcon = () => <div>ResetIcon</div>;
+export const TranslateIcon = () => <div>TranslateIcon</div>;
+export const SaveIcon = () => <div>SaveIcon</div>;
+export const SearchIcon = () => <div>SearchIcon</div>;
+export const SwitcherIcon = () => <div>SwitcherIcon</div>;
+export const ShoppingCartIcon = () => <div>ShoppingCartIcon</div>;
+export const ShoppingCartArrowDownIcon = () => <div>ShoppingCartArrowDownIcon</div>;
+export const ShoppingCartAddItemIcon = () => <div>ShoppingCartAddItemIcon</div>;
+export const TimeIcon = () => <div>TimeIcon</div>;
+export const ToolsIcon = () => <div>ToolsIcon</div>;
+export const TrashCanIcon = () => <div>TrashCanIcon</div>;
+export const UserAvatarIcon = () => <div>UserAvatarIcon</div>;
+export const UserXrayIcon = () => <div>UserXrayIcon</div>;
+export const WarningIcon = () => <div>WarningIcon</div>;
+export const AllergiesIcon = () => <div>AllergiesIcon</div>;
 export const Icon = () => <div>Icon</div>;