diff --git a/services/web/.eslintrc b/services/web/.eslintrc
index fa9613ce20..2455feba86 100644
--- a/services/web/.eslintrc
+++ b/services/web/.eslintrc
@@ -111,6 +111,32 @@
         "plugin:cypress/recommended"
       ]
     },
+    {
+      // React component specific rules
+      //
+      "files": ["**/frontend/js/**/components/**/*.{js,ts,tsx}", "**/frontend/js/**/hooks/**/*.{js,ts,tsx}"],
+      "rules": {
+        // https://astexplorer.net/
+        "no-restricted-syntax": [
+          "error",
+          // prohibit direct calls to methods of window.location
+          {
+            "selector": "CallExpression[callee.object.object.name='window'][callee.object.property.name='location']",
+            "message": "Modify location via useLocation instead of calling window.location methods directly"
+          },
+          // prohibit assignment to window.location
+          {
+            "selector": "AssignmentExpression[left.object.name='window'][left.property.name='location']",
+            "message": "Modify location via useLocation instead of calling window.location methods directly"
+          },
+          // prohibit assignment to window.location.href
+          {
+            "selector": "AssignmentExpression[left.object.object.name='window'][left.object.property.name='location'][left.property.name='href']",
+            "message": "Modify location via useLocation instead of calling window.location methods directly"
+          }
+        ]
+      }
+    },
     {
       // Frontend specific rules
       "files": ["**/frontend/js/**/*.{js,ts,tsx}", "**/frontend/stories/**/*.{js,ts,tsx}", "**/*.stories.{js,ts,tsx}", "**/test/frontend/**/*.{js,ts,tsx}", "**/test/frontend/components/**/*.spec.{js,ts,tsx}"],
diff --git a/services/web/frontend/js/features/clone-project-modal/controllers/left-menu-clone-project-modal-controller.js b/services/web/frontend/js/features/clone-project-modal/controllers/left-menu-clone-project-modal-controller.js
index 042fa2c07b..beaca13cd1 100644
--- a/services/web/frontend/js/features/clone-project-modal/controllers/left-menu-clone-project-modal-controller.js
+++ b/services/web/frontend/js/features/clone-project-modal/controllers/left-menu-clone-project-modal-controller.js
@@ -2,6 +2,7 @@ import App from '../../../base'
 import { react2angular } from 'react2angular'
 import EditorCloneProjectModalWrapper from '../components/editor-clone-project-modal-wrapper'
 import { rootContext } from '../../../shared/context/root-context'
+import { assign } from '../../../shared/components/location'
 
 export default App.controller(
   'LeftMenuCloneProjectModalController',
@@ -21,7 +22,7 @@ export default App.controller(
     }
 
     $scope.openProject = project => {
-      window.location.assign(`/project/${project.project_id}`)
+      assign(`/project/${project.project_id}`)
     }
   }
 )
diff --git a/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx b/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx
index 0bea62be06..6030b0ad1b 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { assign } from '../../../shared/components/location'
 import EditorCloneProjectModalWrapper from '../../clone-project-modal/components/editor-clone-project-modal-wrapper'
 import LeftMenuButton from './left-menu-button'
+import { useLocation } from '../../../shared/hooks/use-location'
 
 type ProjectCopyResponse = {
   project_id: string
@@ -11,12 +11,13 @@ type ProjectCopyResponse = {
 export default function ActionsCopyProject() {
   const [showModal, setShowModal] = useState(false)
   const { t } = useTranslation()
+  const location = useLocation()
 
   const openProject = useCallback(
     ({ project_id: projectId }: ProjectCopyResponse) => {
-      assign(`/project/${projectId}`)
+      location.assign(`/project/${projectId}`)
     },
-    []
+    [location]
   )
 
   return (
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/redirect-to-login.js b/services/web/frontend/js/features/file-tree/components/file-tree-create/redirect-to-login.js
index 1cf6f66b55..0c20abfcc2 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-create/redirect-to-login.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/redirect-to-login.js
@@ -2,12 +2,13 @@ import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Trans } from 'react-i18next'
 import { useProjectContext } from '../../../../shared/context/project-context'
+import { useLocation } from '../../../../shared/hooks/use-location'
 
 // handle "not-logged-in" errors by redirecting to the login page
 export default function RedirectToLogin() {
   const { _id: projectId } = useProjectContext(projectContextPropTypes)
-
   const [secondsToRedirect, setSecondsToRedirect] = useState(10)
+  const location = useLocation()
 
   useEffect(() => {
     setSecondsToRedirect(10)
@@ -16,7 +17,7 @@ export default function RedirectToLogin() {
       setSecondsToRedirect(value => {
         if (value === 0) {
           window.clearInterval(timer)
-          window.location.assign(`/login?redir=/project/${projectId}`)
+          location.assign(`/login?redir=/project/${projectId}`)
           return 0
         }
 
@@ -27,7 +28,7 @@ export default function RedirectToLogin() {
     return () => {
       window.clearInterval(timer)
     }
-  }, [projectId])
+  }, [projectId, location])
 
   return (
     <Trans
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-error.js b/services/web/frontend/js/features/file-tree/components/file-tree-error.js
index 4d518bc0d5..c62250b6c6 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-error.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-error.js
@@ -1,18 +1,16 @@
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
+import { useLocation } from '../../../shared/hooks/use-location'
 
 function FileTreeError() {
   const { t } = useTranslation()
-
-  function reload() {
-    location.reload()
-  }
+  const { reload: handleClick } = useLocation()
 
   return (
     <div className="file-tree-error">
       <p>{t('generic_something_went_wrong')}</p>
       <p>{t('please_refresh')}</p>
-      <Button bsStyle="primary" onClick={reload}>
+      <Button bsStyle="primary" onClick={handleClick}>
         {t('refresh')}
       </Button>
     </div>
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-orphan-refresh-button.js b/services/web/frontend/js/features/pdf-preview/components/pdf-orphan-refresh-button.js
index 4bfafad1fc..12dd467e1a 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-orphan-refresh-button.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-orphan-refresh-button.js
@@ -1,14 +1,16 @@
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
 import { buildUrlWithDetachRole } from '../../../shared/utils/url-helper'
-
-const redirect = function () {
-  window.location = buildUrlWithDetachRole(null).toString()
-}
+import { useLocation } from '../../../shared/hooks/use-location'
 
 function PdfOrphanRefreshButton() {
   const { t } = useTranslation()
+  const location = useLocation()
+
+  const redirect = useCallback(() => {
+    location.assign(buildUrlWithDetachRole(null).toString())
+  }, [location])
 
   return (
     <Button
diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
index 751ed49cd1..f94c98e4f7 100644
--- a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
+++ b/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
@@ -7,6 +7,7 @@ import {
   postJSON,
 } from '../../../../infrastructure/fetch-json'
 import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
+import { useLocation } from '../../../../shared/hooks/use-location'
 
 type NewProjectData = {
   project_id: string
@@ -29,6 +30,7 @@ function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
   const { autoFocusedRef } = useRefWithAutoFocus<HTMLInputElement>()
   const [projectName, setProjectName] = useState('')
   const { isLoading, isError, error, runAsync } = useAsync<NewProjectData>()
+  const location = useLocation()
 
   const createNewProject = () => {
     runAsync(
@@ -42,7 +44,7 @@ function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
     )
       .then(data => {
         if (data.project_id) {
-          window.location.assign(`/project/${data.project_id}`)
+          location.assign(`/project/${data.project_id}`)
         }
       })
       .catch(() => {})
diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx
index cae9e9e6eb..236218ed93 100644
--- a/services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx
+++ b/services/web/frontend/js/features/project-list/components/new-project-button/upload-project-modal.tsx
@@ -10,6 +10,7 @@ import { ExposedSettings } from '../../../../../../types/exposed-settings'
 
 import '@uppy/core/dist/style.css'
 import '@uppy/dashboard/dist/style.css'
+import { useLocation } from '../../../../shared/hooks/use-location'
 
 type UploadResponse = {
   project_id: string
@@ -24,6 +25,7 @@ function UploadProjectModal({ onHide }: UploadProjectModalProps) {
   const { maxUploadSize } = getMeta('ol-ExposedSettings') as ExposedSettings
   const [ableToUpload, setAbleToUpload] = useState(true)
   const [correctfileAdded, setCorrectFileAdded] = useState(false)
+  const location = useLocation()
 
   const uppy: Uppy.Uppy<Uppy.StrictTypes> = useUppy(() => {
     return Uppy({
@@ -55,7 +57,7 @@ function UploadProjectModal({ onHide }: UploadProjectModalProps) {
         const { project_id: projectId }: UploadResponse = response.body
 
         if (projectId) {
-          window.location.assign(`/project/${projectId}`)
+          location.assign(`/project/${projectId}`)
         }
       })
       .on('restriction-failed', () => {
diff --git a/services/web/frontend/js/features/project-list/components/notifications/groups/affiliation/reconfirm-affiliation.tsx b/services/web/frontend/js/features/project-list/components/notifications/groups/affiliation/reconfirm-affiliation.tsx
index 3420e26e45..cec2e6732b 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/groups/affiliation/reconfirm-affiliation.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/groups/affiliation/reconfirm-affiliation.tsx
@@ -8,6 +8,7 @@ import { postJSON } from '../../../../../../infrastructure/fetch-json'
 import { UserEmailData } from '../../../../../../../../types/user-email'
 import { ExposedSettings } from '../../../../../../../../types/exposed-settings'
 import { Institution } from '../../../../../../../../types/institution'
+import { useLocation } from '../../../../../../shared/hooks/use-location'
 
 type ReconfirmAffiliationProps = {
   email: UserEmailData['email']
@@ -24,6 +25,7 @@ function ReconfirmAffiliation({
   const [hasSent, setHasSent] = useState(false)
   const [isPending, setIsPending] = useState(false)
   const ssoEnabled = institution.ssoEnabled
+  const location = useLocation()
 
   useEffect(() => {
     if (isSuccess) {
@@ -34,7 +36,7 @@ function ReconfirmAffiliation({
   const handleRequestReconfirmation = () => {
     if (ssoEnabled) {
       setIsPending(true)
-      window.location.assign(
+      location.assign(
         `${samlInitPath}?university_id=${institution.id}&reconfirm=/project`
       )
     } else {
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx b/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx
index de4756894f..2e6a361077 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx
@@ -4,6 +4,7 @@ import { Project } from '../../../../../../../../types/project/dashboard/api'
 import Icon from '../../../../../../shared/components/icon'
 import Tooltip from '../../../../../../shared/components/tooltip'
 import * as eventTracking from '../../../../../../infrastructure/event-tracking'
+import { useLocation } from '../../../../../../shared/hooks/use-location'
 
 type DownloadProjectButtonProps = {
   project: Project
@@ -16,6 +17,7 @@ function DownloadProjectButton({
 }: DownloadProjectButtonProps) {
   const { t } = useTranslation()
   const text = t('download')
+  const location = useLocation()
 
   const downloadProject = useCallback(() => {
     eventTracking.send(
@@ -23,8 +25,8 @@ function DownloadProjectButton({
       'project action',
       'Download Zip'
     )
-    window.location.assign(`/project/${project.id}/download/zip`)
-  }, [project])
+    location.assign(`/project/${project.id}/download/zip`)
+  }, [project, location])
 
   return children(text, downloadProject)
 }
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx
index 8f22307fb0..8452c8c6b2 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx
@@ -4,12 +4,14 @@ import Icon from '../../../../../../shared/components/icon'
 import Tooltip from '../../../../../../shared/components/tooltip'
 import * as eventTracking from '../../../../../../infrastructure/event-tracking'
 import { useProjectListContext } from '../../../../context/project-list-context'
+import { useLocation } from '../../../../../../shared/hooks/use-location'
 
 function DownloadProjectsButton() {
   const { selectedProjects, selectOrUnselectAllProjects } =
     useProjectListContext()
   const { t } = useTranslation()
   const text = t('download')
+  const location = useLocation()
 
   const projectIds = selectedProjects.map(p => p.id)
 
@@ -20,13 +22,11 @@ function DownloadProjectsButton() {
       'Download Zip'
     )
 
-    window.location.assign(
-      `/project/download/zip?project_ids=${projectIds.join(',')}`
-    )
+    location.assign(`/project/download/zip?project_ids=${projectIds.join(',')}`)
 
     const selected = false
     selectOrUnselectAllProjects(selected)
-  }, [projectIds, selectOrUnselectAllProjects])
+  }, [projectIds, selectOrUnselectAllProjects, location])
 
   return (
     <Tooltip
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx
index 7f44f0d36f..bd8f6cb47c 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/sso-linking-info.tsx
@@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { DomainInfo } from './input'
 import { ExposedSettings } from '../../../../../../../types/exposed-settings'
 import getMeta from '../../../../../utils/meta'
+import { useLocation } from '../../../../../shared/hooks/use-location'
 
 type SSOLinkingInfoProps = {
   domainInfo: DomainInfo
@@ -13,13 +14,16 @@ type SSOLinkingInfoProps = {
 function SsoLinkingInfo({ domainInfo, email }: SSOLinkingInfoProps) {
   const { samlInitPath } = getMeta('ol-ExposedSettings') as ExposedSettings
   const { t } = useTranslation()
+  const location = useLocation()
 
   const [linkAccountsButtonDisabled, setLinkAccountsButtonDisabled] =
     useState(false)
 
   function handleLinkAccountsButtonClick() {
     setLinkAccountsButtonDisabled(true)
-    window.location.href = `${samlInitPath}?university_id=${domainInfo.university.id}&auto=/user/settings&email=${email}`
+    location.assign(
+      `${samlInitPath}?university_id=${domainInfo.university.id}&auto=/user/settings&email=${email}`
+    )
   }
 
   return (
diff --git a/services/web/frontend/js/features/settings/components/emails/reconfirmation-info/reconfirmation-info-prompt.tsx b/services/web/frontend/js/features/settings/components/emails/reconfirmation-info/reconfirmation-info-prompt.tsx
index 96c7a74ddc..b761bc9fce 100644
--- a/services/web/frontend/js/features/settings/components/emails/reconfirmation-info/reconfirmation-info-prompt.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/reconfirmation-info/reconfirmation-info-prompt.tsx
@@ -9,6 +9,7 @@ import getMeta from '../../../../../utils/meta'
 import { ExposedSettings } from '../../../../../../../types/exposed-settings'
 import { ssoAvailableForInstitution } from '../../../utils/sso'
 import Icon from '../../../../../shared/components/icon'
+import { useLocation } from '../../../../../shared/hooks/use-location'
 
 type ReconfirmationInfoPromptProps = {
   email: string
@@ -29,6 +30,7 @@ function ReconfirmationInfoPrompt({
   const [isPending, setIsPending] = useState(false)
   const [hasSent, setHasSent] = useState(false)
   const ssoAvailable = Boolean(ssoAvailableForInstitution(institution))
+  const location = useLocation()
 
   useEffect(() => {
     setUserEmailsContextLoading(isLoading)
@@ -43,7 +45,7 @@ function ReconfirmationInfoPrompt({
   const handleRequestReconfirmation = () => {
     if (ssoAvailable) {
       setIsPending(true)
-      window.location.assign(
+      location.assign(
         `${samlInitPath}?university_id=${institution.id}&reconfirm=/user/settings`
       )
     } else {
diff --git a/services/web/frontend/js/features/settings/components/emails/row.tsx b/services/web/frontend/js/features/settings/components/emails/row.tsx
index 05faa9f503..e9582b901b 100644
--- a/services/web/frontend/js/features/settings/components/emails/row.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/row.tsx
@@ -12,6 +12,7 @@ import getMeta from '../../../../utils/meta'
 import { ExposedSettings } from '../../../../../../types/exposed-settings'
 import { ssoAvailableForInstitution } from '../../utils/sso'
 import ReconfirmationInfo from './reconfirmation-info'
+import { useLocation } from '../../../../shared/hooks/use-location'
 
 type EmailsRowProps = {
   userEmailData: UserEmailData
@@ -61,13 +62,16 @@ function SSOAffiliationInfo({ userEmailData }: SSOAffiliationInfoProps) {
   const { samlInitPath } = getMeta('ol-ExposedSettings') as ExposedSettings
   const { t } = useTranslation()
   const { state } = useUserEmailsContext()
+  const location = useLocation()
 
   const [linkAccountsButtonDisabled, setLinkAccountsButtonDisabled] =
     useState(false)
 
   function handleLinkAccountsButtonClick() {
     setLinkAccountsButtonDisabled(true)
-    window.location.href = `${samlInitPath}?university_id=${userEmailData.affiliation?.institution?.id}&auto=/user/settings&email=${userEmailData.email}`
+    location.assign(
+      `${samlInitPath}?university_id=${userEmailData.affiliation?.institution?.id}&auto=/user/settings&email=${userEmailData.email}`
+    )
   }
 
   if (
diff --git a/services/web/frontend/js/features/settings/components/leave/modal-form.tsx b/services/web/frontend/js/features/settings/components/leave/modal-form.tsx
index 901a85e25e..5904c35bb6 100644
--- a/services/web/frontend/js/features/settings/components/leave/modal-form.tsx
+++ b/services/web/frontend/js/features/settings/components/leave/modal-form.tsx
@@ -4,6 +4,7 @@ import { useTranslation, Trans } from 'react-i18next'
 import { postJSON, FetchError } from '../../../../infrastructure/fetch-json'
 import getMeta from '../../../../utils/meta'
 import LeaveModalFormError from './modal-form-error'
+import { useLocation } from '../../../../shared/hooks/use-location'
 
 export type LeaveModalFormProps = {
   setInFlight: Dispatch<SetStateAction<boolean>>
@@ -18,6 +19,7 @@ function LeaveModalForm({
 }: LeaveModalFormProps) {
   const { t } = useTranslation()
   const userDefaultEmail = getMeta('ol-usersEmail') as string
+  const location = useLocation()
 
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -53,7 +55,7 @@ function LeaveModalForm({
       },
     })
       .then(() => {
-        window.location.assign('/login')
+        location.assign('/login')
       })
       .catch(setError)
       .finally(() => {
diff --git a/services/web/frontend/js/features/settings/context/sso-context.tsx b/services/web/frontend/js/features/settings/context/sso-context.tsx
index 0cc0583c30..70b4cd0cdc 100644
--- a/services/web/frontend/js/features/settings/context/sso-context.tsx
+++ b/services/web/frontend/js/features/settings/context/sso-context.tsx
@@ -34,7 +34,7 @@ type SSOProviderProps = {
 }
 
 export function SSOProvider({ children }: SSOProviderProps) {
-  const isMountedRef = useIsMounted()
+  const isMounted = useIsMounted()
   const oauthProviders = getMeta('ol-oauthProviders', {}) as OAuthProviders
   const thirdPartyIds = getMeta('ol-thirdPartyIds') as ThirdPartyIds
 
@@ -66,14 +66,14 @@ export function SSOProvider({ children }: SSOProviderProps) {
       }
 
       return postJSON('/user/oauth-unlink', { body, signal }).then(() => {
-        if (isMountedRef.current) {
+        if (isMounted.current) {
           setSubscriptions(subs =>
             set(cloneDeep(subs), `${providerId}.linked`, false)
           )
         }
       })
     },
-    [isMountedRef, subscriptions]
+    [isMounted, subscriptions]
   )
 
   const value = useMemo<SSOContextValue>(
diff --git a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.js b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.js
index 3d2a8a473e..668f08cb98 100644
--- a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.js
+++ b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.js
@@ -5,12 +5,13 @@ import PropTypes from 'prop-types'
 import Icon from '../../../shared/components/icon'
 import { transferProjectOwnership } from '../utils/api'
 import AccessibleModal from '../../../shared/components/accessible-modal'
-import { reload } from '../../../shared/components/location'
 import { useProjectContext } from '../../../shared/context/project-context'
+import { useLocation } from '../../../shared/hooks/use-location'
 
 export default function TransferOwnershipModal({ member, cancel }) {
   const [inflight, setInflight] = useState(false)
   const [error, setError] = useState(false)
+  const location = useLocation()
 
   const { _id: projectId, name: projectName } = useProjectContext()
 
@@ -20,7 +21,7 @@ export default function TransferOwnershipModal({ member, cancel }) {
 
     transferProjectOwnership(projectId, member)
       .then(() => {
-        reload()
+        location.reload()
       })
       .catch(() => {
         setError(true)
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx
index b15b426434..0386cc86cc 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/leave-group-modal.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { deleteJSON } from '../../../../infrastructure/fetch-json'
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
+import { useLocation } from '../../../../shared/hooks/use-location'
 
 export const LEAVE_GROUP_MODAL_ID = 'leave-group'
 
@@ -12,6 +13,7 @@ export default function LeaveGroupModal() {
   const { handleCloseModal, modalIdShown, leavingGroupId } =
     useSubscriptionDashboardContext()
   const [inflight, setInflight] = useState(false)
+  const location = useLocation()
 
   const handleConfirmLeaveGroup = useCallback(async () => {
     if (!leavingGroupId) {
@@ -22,12 +24,12 @@ export default function LeaveGroupModal() {
       const params = new URLSearchParams()
       params.set('subscriptionId', leavingGroupId)
       await deleteJSON(`/subscription/group/user?${params}`)
-      window.location.reload()
+      location.reload()
     } catch (error) {
       console.log('something went wrong', error)
       setInflight(false)
     }
-  }, [leavingGroupId])
+  }, [location, leavingGroupId])
 
   if (modalIdShown !== LEAVE_GROUP_MODAL_ID || !leavingGroupId) {
     return null
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/reactivate-subscription.tsx b/services/web/frontend/js/features/subscription/components/dashboard/reactivate-subscription.tsx
index 4709bbcd65..60f745ea41 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/reactivate-subscription.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/reactivate-subscription.tsx
@@ -1,19 +1,20 @@
 import { useTranslation } from 'react-i18next'
 import { postJSON } from '../../../../infrastructure/fetch-json'
 import { reactivateSubscriptionUrl } from '../../data/subscription-url'
-import { reload } from '../../../../shared/components/location'
 import useAsync from '../../../../shared/hooks/use-async'
+import { useLocation } from '../../../../shared/hooks/use-location'
 
 function ReactivateSubscription() {
   const { t } = useTranslation()
   const { isLoading, isSuccess, runAsync } = useAsync()
+  const location = useLocation()
 
   const handleReactivate = () => {
     runAsync(postJSON(reactivateSubscriptionUrl)).catch(console.error)
   }
 
   if (isSuccess) {
-    reload()
+    location.reload()
   }
 
   return (
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/cancel-subscription.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/cancel-subscription.tsx
index ef921f88a8..8d90d2f2e4 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/cancel-subscription.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/cancel-subscription.tsx
@@ -14,6 +14,7 @@ import ActionButtonText from '../../../action-button-text'
 import GenericErrorAlert from '../../../generic-error-alert'
 import DowngradePlanButton from './downgrade-plan-button'
 import ExtendTrialButton from './extend-trial-button'
+import { useLocation } from '../../../../../../../shared/hooks/use-location'
 
 const planCodeToDowngradeTo = 'paid-personal'
 
@@ -140,6 +141,7 @@ function NotCancelOption({
 
 export function CancelSubscription() {
   const { t } = useTranslation()
+  const location = useLocation()
   const { personalSubscription, plans } = useSubscriptionDashboardContext()
   const {
     isLoading: isLoadingCancel,
@@ -176,7 +178,7 @@ export function CancelSubscription() {
   async function handleCancelSubscription() {
     try {
       await runAsyncCancel(postJSON(cancelSubscriptionUrl))
-      window.location.assign(redirectAfterCancelSubscriptionUrl)
+      location.assign(redirectAfterCancelSubscriptionUrl)
     } catch (e) {
       console.error(e)
     }
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/downgrade-plan-button.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/downgrade-plan-button.tsx
index 62b5442467..faef9a8c48 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/downgrade-plan-button.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/downgrade-plan-button.tsx
@@ -3,6 +3,7 @@ import { Plan } from '../../../../../../../../../types/subscription/plan'
 import { postJSON } from '../../../../../../../infrastructure/fetch-json'
 import { subscriptionUpdateUrl } from '../../../../../data/subscription-url'
 import ActionButtonText from '../../../action-button-text'
+import { useLocation } from '../../../../../../../shared/hooks/use-location'
 
 export default function DowngradePlanButton({
   isButtonDisabled,
@@ -18,6 +19,7 @@ export default function DowngradePlanButton({
   runAsyncSecondaryAction: (promise: Promise<unknown>) => Promise<unknown>
 }) {
   const { t } = useTranslation()
+  const location = useLocation()
   const buttonText = t('yes_move_me_to_personal_plan')
 
   async function handleDowngradePlan() {
@@ -27,7 +29,7 @@ export default function DowngradePlanButton({
           body: { plan_code: planToDowngradeTo.planCode },
         })
       )
-      window.location.reload()
+      location.reload()
     } catch (e) {
       console.error(e)
     }
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/extend-trial-button.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/extend-trial-button.tsx
index 080d783d78..f9b94f3804 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/extend-trial-button.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-plan/extend-trial-button.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { putJSON } from '../../../../../../../infrastructure/fetch-json'
 import { extendTrialUrl } from '../../../../../data/subscription-url'
 import ActionButtonText from '../../../action-button-text'
+import { useLocation } from '../../../../../../../shared/hooks/use-location'
 
 export default function ExtendTrialButton({
   isButtonDisabled,
@@ -16,11 +17,12 @@ export default function ExtendTrialButton({
 }) {
   const { t } = useTranslation()
   const buttonText = t('ill_take_it')
+  const location = useLocation()
 
   async function handleExtendTrial() {
     try {
       await runAsyncSecondaryAction(putJSON(extendTrialUrl))
-      window.location.reload()
+      location.reload()
     } catch (e) {
       console.error(e)
     }
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx
index b9a18366fc..d3a34d1781 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx
@@ -11,6 +11,7 @@ import { useSubscriptionDashboardContext } from '../../../../../../context/subsc
 import GenericErrorAlert from '../../../../generic-error-alert'
 import { subscriptionUpdateUrl } from '../../../../../../data/subscription-url'
 import { getRecurlyGroupPlanCode } from '../../../../../../util/recurly-group-plan-code'
+import { useLocation } from '../../../../../../../../shared/hooks/use-location'
 
 const educationalPercentDiscount = 40
 const groupSizeForEducationalDiscount = 10
@@ -143,6 +144,7 @@ export function ChangeToGroupModal() {
   const personalSubscription: Subscription = getMeta('ol-subscription')
   const [error, setError] = useState(false)
   const [inflight, setInflight] = useState(false)
+  const location = useLocation()
 
   async function upgrade() {
     setError(false)
@@ -158,7 +160,7 @@ export function ChangeToGroupModal() {
           ),
         },
       })
-      window.location.reload()
+      location.reload()
     } catch (e) {
       setError(true)
       setInflight(false)
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx
index 4669b1154b..e03df26544 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/confirm-change-plan-modal.tsx
@@ -7,6 +7,7 @@ import AccessibleModal from '../../../../../../../../shared/components/accessibl
 import getMeta from '../../../../../../../../utils/meta'
 import { useSubscriptionDashboardContext } from '../../../../../../context/subscription-dashboard-context'
 import { subscriptionUpdateUrl } from '../../../../../../data/subscription-url'
+import { useLocation } from '../../../../../../../../shared/hooks/use-location'
 
 export function ConfirmChangePlanModal() {
   const modalId: SubscriptionDashModalIds = 'change-to-plan'
@@ -16,6 +17,7 @@ export function ConfirmChangePlanModal() {
   const { handleCloseModal, modalIdShown, plans, planCodeToChangeTo } =
     useSubscriptionDashboardContext()
   const planCodesChangingAtTermEnd = getMeta('ol-planCodesChangingAtTermEnd')
+  const location = useLocation()
 
   async function handleConfirmChange() {
     setError(false)
@@ -27,7 +29,7 @@ export function ConfirmChangePlanModal() {
           plan_code: planCodeToChangeTo,
         },
       })
-      window.location.reload()
+      location.reload()
     } catch (e) {
       setError(true)
       setInflight(false)
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx
index c611f850a2..ba42cde5f3 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx
@@ -6,12 +6,14 @@ import { postJSON } from '../../../../../../../../infrastructure/fetch-json'
 import AccessibleModal from '../../../../../../../../shared/components/accessible-modal'
 import { useSubscriptionDashboardContext } from '../../../../../../context/subscription-dashboard-context'
 import { cancelPendingSubscriptionChangeUrl } from '../../../../../../data/subscription-url'
+import { useLocation } from '../../../../../../../../shared/hooks/use-location'
 
 export function KeepCurrentPlanModal() {
   const modalId: SubscriptionDashModalIds = 'keep-current-plan'
   const [error, setError] = useState(false)
   const [inflight, setInflight] = useState(false)
   const { t } = useTranslation()
+  const location = useLocation()
   const { modalIdShown, handleCloseModal, personalSubscription } =
     useSubscriptionDashboardContext()
 
@@ -21,7 +23,7 @@ export function KeepCurrentPlanModal() {
 
     try {
       await postJSON(cancelPendingSubscriptionChangeUrl)
-      window.location.reload()
+      location.reload()
     } catch (e) {
       setError(true)
       setInflight(false)
diff --git a/services/web/frontend/js/features/subscription/components/new/checkout/checkout-panel.tsx b/services/web/frontend/js/features/subscription/components/new/checkout/checkout-panel.tsx
index 10a1df6110..da52df43e5 100644
--- a/services/web/frontend/js/features/subscription/components/new/checkout/checkout-panel.tsx
+++ b/services/web/frontend/js/features/subscription/components/new/checkout/checkout-panel.tsx
@@ -18,7 +18,6 @@ import SubmitButton from './submit-button'
 import ThreeDSecure from './three-d-secure'
 import getMeta from '../../../../../utils/meta'
 import { postJSON } from '../../../../../infrastructure/fetch-json'
-import { assign } from '../../../../../shared/components/location'
 import * as eventTracking from '../../../../../infrastructure/event-tracking'
 import classnames from 'classnames'
 import {
@@ -30,6 +29,7 @@ import {
 import { PricingFormState } from '../../../context/types/payment-context-value'
 import { CreateError } from '../../../../../../../types/subscription/api'
 import { CardElementChangeState } from '../../../../../../../types/recurly/elements'
+import { useLocation } from '../../../../../shared/hooks/use-location'
 
 function CheckoutPanel() {
   const { t } = useTranslation()
@@ -59,6 +59,7 @@ function CheckoutPanel() {
   const [formIsValid, setFormIsValid] = useState<boolean>()
   const [threeDSecureActionTokenId, setThreeDSecureActionTokenId] =
     useState<string>()
+  const location = useLocation()
 
   const isCreditCardPaymentMethod = paymentMethod === 'credit_card'
   const isPayPalPaymentMethod = paymentMethod === 'paypal'
@@ -154,7 +155,7 @@ function CheckoutPanel() {
             'subscription-submission-success',
             planCode
           )
-          assign('/user/subscription/thank-you')
+          location.assign('/user/subscription/thank-you')
         } catch (error) {
           setIsProcessing(false)
 
@@ -175,6 +176,7 @@ function CheckoutPanel() {
       ITMReferrer,
       isAddCompanyDetailsChecked,
       isPayPalPaymentMethod,
+      location,
       planCode,
       pricing,
       pricingFormState,
diff --git a/services/web/frontend/js/main/new-subscription.js b/services/web/frontend/js/main/new-subscription.js
index 9da954e0c2..e17cc25e1f 100644
--- a/services/web/frontend/js/main/new-subscription.js
+++ b/services/web/frontend/js/main/new-subscription.js
@@ -7,6 +7,7 @@ import _ from 'lodash'
 /* global recurly */
 import App from '../base'
 import getMeta from '../utils/meta'
+import { assign } from '../shared/components/location'
 
 export default App.controller(
   'NewSubscriptionController',
@@ -775,14 +776,12 @@ App.controller(
     $scope.browsePlans = () => {
       if (document.referrer?.includes('/user/subscription/choose-your-plan')) {
         // redirect to interstitial page with `itm_referrer` param
-        window.location.assign(
+        assign(
           '/user/subscription/choose-your-plan?itm_referrer=student-status-declined'
         )
       } else {
         // redirect to plans page with `itm_referrer` param
-        window.location.assign(
-          '/user/subscription/plans?itm_referrer=student-status-declined'
-        )
+        assign('/user/subscription/plans?itm_referrer=student-status-declined')
       }
     }
 
diff --git a/services/web/frontend/js/shared/components/location.js b/services/web/frontend/js/shared/components/location.js
index ce929db19f..21cbb8695b 100644
--- a/services/web/frontend/js/shared/components/location.js
+++ b/services/web/frontend/js/shared/components/location.js
@@ -1,9 +1,11 @@
 // window location-related functions in a separate module so they can be mocked/stubbed in tests
 
 export function reload() {
+  // eslint-disable-next-line no-restricted-syntax
   window.location.reload()
 }
 
 export function assign(url) {
+  // eslint-disable-next-line no-restricted-syntax
   window.location.assign(url)
 }
diff --git a/services/web/frontend/js/shared/hooks/use-location.ts b/services/web/frontend/js/shared/hooks/use-location.ts
new file mode 100644
index 0000000000..52792b0fa9
--- /dev/null
+++ b/services/web/frontend/js/shared/hooks/use-location.ts
@@ -0,0 +1,25 @@
+import { useCallback, useMemo } from 'react'
+import useIsMounted from './use-is-mounted'
+
+export const useLocation = () => {
+  const isMounted = useIsMounted()
+
+  const assign = useCallback(
+    url => {
+      if (isMounted.current) {
+        // eslint-disable-next-line no-restricted-syntax
+        window.location.assign(url)
+      }
+    },
+    [isMounted]
+  )
+
+  const reload = useCallback(() => {
+    if (isMounted.current) {
+      // eslint-disable-next-line no-restricted-syntax
+      window.location.reload()
+    }
+  }, [isMounted])
+
+  return useMemo(() => ({ assign, reload }), [assign, reload])
+}
diff --git a/services/web/modules/user-activate/test/frontend/js/components/user-activate-register.test.js b/services/web/modules/user-activate/test/frontend/js/components/user-activate-register.test.js
index 351336a17e..773170feec 100644
--- a/services/web/modules/user-activate/test/frontend/js/components/user-activate-register.test.js
+++ b/services/web/modules/user-activate/test/frontend/js/components/user-activate-register.test.js
@@ -125,6 +125,7 @@ describe('UserActivateRegister', function () {
       const body = JSON.parse(req.body)
       if (body.email === 'abc@gmail.com') return endPointResponse1
       else if (body.email === 'def@gmail.com') return endPointResponse2
+      else return 500
     })
     const registerInput = screen.getByLabelText('emails to register')
     const registerButton = screen.getByRole('button', { name: /register/i })
diff --git a/services/web/test/frontend/features/editor-left-menu/components/actions-copy-project.test.js b/services/web/test/frontend/features/editor-left-menu/components/actions-copy-project.test.js
index ba95878ec4..24710ff5b1 100644
--- a/services/web/test/frontend/features/editor-left-menu/components/actions-copy-project.test.js
+++ b/services/web/test/frontend/features/editor-left-menu/components/actions-copy-project.test.js
@@ -4,18 +4,22 @@ import sinon from 'sinon'
 import { expect } from 'chai'
 import ActionsCopyProject from '../../../../../frontend/js/features/editor-left-menu/components/actions-copy-project'
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
-import * as locationModule from '../../../../../frontend/js/shared/components/location'
 import { waitFor } from '@testing-library/react'
+import * as useLocationModule from '../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<ActionsCopyProject />', function () {
   let assignStub
 
   beforeEach(function () {
-    assignStub = sinon.stub(locationModule, 'assign')
+    assignStub = sinon.stub()
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: assignStub,
+      reload: sinon.stub(),
+    })
   })
 
   afterEach(function () {
-    assignStub.restore()
+    this.locationStub.restore()
     fetchMock.reset()
   })
 
diff --git a/services/web/test/frontend/features/project-list/components/new-project-button/modal-content-new-project-form.test.tsx b/services/web/test/frontend/features/project-list/components/new-project-button/modal-content-new-project-form.test.tsx
index c20a82e54f..720eacf5a6 100644
--- a/services/web/test/frontend/features/project-list/components/new-project-button/modal-content-new-project-form.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/new-project-button/modal-content-new-project-form.test.tsx
@@ -3,23 +3,21 @@ import { expect } from 'chai'
 import fetchMock from 'fetch-mock'
 import sinon from 'sinon'
 import ModalContentNewProjectForm from '../../../../../../frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form'
+import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<ModalContentNewProjectForm />', function () {
-  const locationStub = sinon.stub()
-  const originalLocation = window.location
+  let assignStub: sinon.SinonStub
 
   beforeEach(function () {
-    Object.defineProperty(window, 'location', {
-      value: {
-        assign: locationStub,
-      },
+    assignStub = sinon.stub()
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: assignStub,
+      reload: sinon.stub(),
     })
   })
 
   afterEach(function () {
-    Object.defineProperty(window, 'location', {
-      value: originalLocation,
-    })
+    this.locationStub.restore()
     fetchMock.reset()
   })
 
@@ -52,8 +50,8 @@ describe('<ModalContentNewProjectForm />', function () {
     expect(newProjectMock.called()).to.be.true
 
     await waitFor(() => {
-      sinon.assert.calledOnce(locationStub)
-      sinon.assert.calledWith(locationStub, `/project/${projectId}`)
+      sinon.assert.calledOnce(assignStub)
+      sinon.assert.calledWith(assignStub, `/project/${projectId}`)
     })
   })
 
@@ -131,7 +129,7 @@ describe('<ModalContentNewProjectForm />', function () {
       Feugiat in fermentum posuere urna nec. Elementum eu facilisis sed odio morbi quis commodo. Vel fringilla est ullamcorper eget nulla facilisi. Nunc sed blandit libero volutpat sed cras ornare arcu dui. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Sapien pellentesque habitant morbi tristique senectus et. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Porttitor leo a diam sollicitudin tempor id. In iaculis nunc sed augue.
       Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Dui id ornare arcu odio. Dignissim cras tincidunt lobortis feugiat vivamus at augue. Non tellus orci ac auctor. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Nisi vitae suscipit tellus mauris a diam maecenas. Orci dapibus ultrices in iaculis nunc sed. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Aliquam etiam erat velit scelerisque in dictum. Sed enim ut sem viverra. Eleifend donec pretium vulputate sapien nec sagittis. Quisque egestas diam in arcu cursus euismod quis. Faucibus a pellentesque sit amet porttitor eget dolor. Elementum facilisis leo vel fringilla. Pellentesque habitant morbi tristique senectus et netus. Viverra tellus in hac habitasse platea dictumst vestibulum. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Sit amet porttitor eget dolor morbi non. Neque egestas congue quisque egestas.
       Convallis posuere morbi leo urna molestie at. Posuere sollicitudin aliquam ultrices sagittis orci. Lacus vestibulum sed arcu non odio. Sit amet dictum sit amet. Nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi. Vestibulum morbi blandit cursus risus at ultrices mi. Purus gravida quis blandit turpis cursus. Diam maecenas sed enim ut. Senectus et netus et malesuada fames ac turpis. Massa tempor nec feugiat nisl pretium fusce id velit. Mollis nunc sed id semper. Elit sed vulputate mi sit. Vitae et leo duis ut diam. Pellentesque sit amet porttitor eget dolor morbi non arcu risus.
-      Mi quis hendrerit dolor magna eget est lorem. Quam vulputate dignissim suspendisse in est ante in nibh. Nisi porta lorem mollis aliquam. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Tempus imperdiet nulla malesuada pellentesque elit eget. Amet nisl purus in mollis nunc sed id. Id velit ut tortor pretium viverra suspendisse. Integer quis auctor elit sed. Tortor at risus viverra adipiscing. Ac auctor augue mauris augue neque gravida in. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. A diam sollicitudin tempor id eu nisl nunc mi. Tellus id interdum velit laoreet id donec. Lacus vestibulum sed arcu non odio euismod lacinia. Tellus at urna condimentum mattis.      
+      Mi quis hendrerit dolor magna eget est lorem. Quam vulputate dignissim suspendisse in est ante in nibh. Nisi porta lorem mollis aliquam. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Euismod nisi porta lorem mollis aliquam ut porttitor leo a. Tempus imperdiet nulla malesuada pellentesque elit eget. Amet nisl purus in mollis nunc sed id. Id velit ut tortor pretium viverra suspendisse. Integer quis auctor elit sed. Tortor at risus viverra adipiscing. Ac auctor augue mauris augue neque gravida in. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. A diam sollicitudin tempor id eu nisl nunc mi. Tellus id interdum velit laoreet id donec. Lacus vestibulum sed arcu non odio euismod lacinia. Tellus at urna condimentum mattis.
       `,
       },
     })
diff --git a/services/web/test/frontend/features/project-list/components/new-project-button/upload-project-modal.test.tsx b/services/web/test/frontend/features/project-list/components/new-project-button/upload-project-modal.test.tsx
index f0e55c31c9..7c19a19a53 100644
--- a/services/web/test/frontend/features/project-list/components/new-project-button/upload-project-modal.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/new-project-button/upload-project-modal.test.tsx
@@ -2,18 +2,19 @@ import sinon from 'sinon'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import UploadProjectModal from '../../../../../../frontend/js/features/project-list/components/new-project-button/upload-project-modal'
 import { expect } from 'chai'
+import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<UploadProjectModal />', function () {
   const originalWindowCSRFToken = window.csrfToken
-  const locationStub = sinon.stub()
-  const originalLocation = window.location
   const maxUploadSize = 10 * 1024 * 1024 // 10 MB
 
+  let assignStub: sinon.SinonStub
+
   beforeEach(function () {
-    Object.defineProperty(window, 'location', {
-      value: {
-        assign: locationStub,
-      },
+    assignStub = sinon.stub()
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: assignStub,
+      reload: sinon.stub(),
     })
     window.metaAttributesCache.set('ol-ExposedSettings', {
       maxUploadSize,
@@ -22,13 +23,9 @@ describe('<UploadProjectModal />', function () {
   })
 
   afterEach(function () {
-    Object.defineProperty(window, 'location', {
-      value: originalLocation,
-    })
+    this.locationStub.restore()
     window.metaAttributesCache = new Map()
     window.csrfToken = originalWindowCSRFToken
-
-    locationStub.reset()
   })
 
   it('uploads a dropped file', async function () {
@@ -66,8 +63,8 @@ describe('<UploadProjectModal />', function () {
     )
 
     await waitFor(() => {
-      sinon.assert.calledOnce(locationStub)
-      sinon.assert.calledWith(locationStub, `/project/${projectId}`)
+      sinon.assert.calledOnce(assignStub)
+      sinon.assert.calledWith(assignStub, `/project/${projectId}`)
     })
 
     xhr.restore()
@@ -146,7 +143,7 @@ describe('<UploadProjectModal />', function () {
     )
 
     await waitFor(() => {
-      sinon.assert.notCalled(locationStub)
+      sinon.assert.notCalled(assignStub)
       screen.getByText('Upload failed')
     })
 
diff --git a/services/web/test/frontend/features/project-list/components/notifications.test.tsx b/services/web/test/frontend/features/project-list/components/notifications.test.tsx
index c6341e01aa..a13843c0a7 100644
--- a/services/web/test/frontend/features/project-list/components/notifications.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/notifications.test.tsx
@@ -29,6 +29,7 @@ import { DeepPartial } from '../../../../../types/utils'
 import { Project } from '../../../../../types/project/dashboard/api'
 import GroupsAndEnterpriseBanner from '../../../../../frontend/js/features/project-list/components/notifications/groups-and-enterprise-banner'
 import localStorage from '../../../../../frontend/js/infrastructure/local-storage'
+import * as useLocationModule from '../../../../../frontend/js/shared/hooks/use-location'
 
 const renderWithinProjectListProvider = (Component: React.ComponentType) => {
   render(<Component />, {
@@ -548,22 +549,22 @@ describe('<UserNotifications />', function () {
   })
 
   describe('<Affiliation/>', function () {
-    const locationStub = sinon.stub()
-    const originalLocation = window.location
+    let assignStub: sinon.SinonStub
+
     beforeEach(function () {
       window.metaAttributesCache = window.metaAttributesCache || new Map()
       window.metaAttributesCache.set('ol-ExposedSettings', exposedSettings)
-      Object.defineProperty(window, 'location', {
-        value: { assign: locationStub },
+      assignStub = sinon.stub()
+      this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+        assign: assignStub,
+        reload: sinon.stub(),
       })
       fetchMock.reset()
     })
 
     afterEach(function () {
       window.metaAttributesCache = new Map()
-      Object.defineProperty(window, 'location', {
-        value: originalLocation,
-      })
+      this.locationStub.restore()
       fetchMock.reset()
     })
 
@@ -619,9 +620,9 @@ describe('<UserNotifications />', function () {
       fireEvent.click(
         screen.getByRole('button', { name: /confirm affiliation/i })
       )
-      sinon.assert.calledOnce(locationStub)
+      sinon.assert.calledOnce(assignStub)
       sinon.assert.calledWithMatch(
-        locationStub,
+        assignStub,
         `${exposedSettings.samlInitPath}?university_id=${professionalUserData.affiliation.institution.id}&reconfirm=/project`
       )
     })
diff --git a/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx b/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx
index 480d0f9459..94a338120a 100644
--- a/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx
@@ -11,6 +11,7 @@ import {
   archivedProjects,
   makeLongProjectList,
 } from '../fixtures/projects-data'
+import * as useLocationModule from '../../../../../frontend/js/shared/hooks/use-location'
 
 const {
   fullList,
@@ -24,9 +25,8 @@ const {
 const userId = owner.id
 
 describe('<ProjectListRoot />', function () {
-  const originalLocation = window.location
-  const locationStub = sinon.stub()
   let sendSpy: sinon.SinonSpy
+  let assignStub: sinon.SinonStub
 
   beforeEach(async function () {
     global.localStorage.clear()
@@ -48,9 +48,10 @@ describe('<ProjectListRoot />', function () {
       { email: 'test@overleaf.com', default: true },
     ])
     window.user_id = userId
-
-    Object.defineProperty(window, 'location', {
-      value: { assign: locationStub },
+    assignStub = sinon.stub()
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: assignStub,
+      reload: sinon.stub(),
     })
   })
 
@@ -58,9 +59,7 @@ describe('<ProjectListRoot />', function () {
     sendSpy.restore()
     window.user_id = undefined
     fetchMock.reset()
-    Object.defineProperty(window, 'location', {
-      value: originalLocation,
-    })
+    this.locationStub.restore()
   })
 
   describe('welcome page', function () {
@@ -117,11 +116,11 @@ describe('<ProjectListRoot />', function () {
           fireEvent.click(downloadButton)
 
           await waitFor(() => {
-            expect(locationStub).to.have.been.called
+            expect(assignStub).to.have.been.called
           })
 
           sinon.assert.calledWithMatch(
-            locationStub,
+            assignStub,
             `/project/download/zip?project_ids=${project1Id},${project2Id}`
           )
 
diff --git a/services/web/test/frontend/features/project-list/components/table/cells/action-buttons/download-project-button.test.tsx b/services/web/test/frontend/features/project-list/components/table/cells/action-buttons/download-project-button.test.tsx
index 63e0146a7e..03a89e7e60 100644
--- a/services/web/test/frontend/features/project-list/components/table/cells/action-buttons/download-project-button.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/table/cells/action-buttons/download-project-button.test.tsx
@@ -3,23 +3,22 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import sinon from 'sinon'
 import { DownloadProjectButtonTooltip } from '../../../../../../../../frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button'
 import { projectsData } from '../../../../fixtures/projects-data'
+import * as useLocationModule from '../../../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<DownloadProjectButton />', function () {
-  const originalLocation = window.location
-  const locationStub = sinon.stub()
+  let assignStub: sinon.SinonStub
 
   beforeEach(function () {
-    Object.defineProperty(window, 'location', {
-      value: { assign: locationStub },
+    assignStub = sinon.stub()
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: assignStub,
+      reload: sinon.stub(),
     })
-
     render(<DownloadProjectButtonTooltip project={projectsData[0]} />)
   })
 
   afterEach(function () {
-    Object.defineProperty(window, 'location', {
-      value: originalLocation,
-    })
+    this.locationStub.restore()
   })
 
   it('renders tooltip for button', function () {
@@ -33,13 +32,13 @@ describe('<DownloadProjectButton />', function () {
     fireEvent.click(btn)
 
     await waitFor(() => {
-      expect(locationStub).to.have.been.called
+      expect(assignStub).to.have.been.called
     })
 
-    sinon.assert.calledOnce(locationStub)
+    sinon.assert.calledOnce(assignStub)
 
     sinon.assert.calledWithMatch(
-      locationStub,
+      assignStub,
       `/project/${projectsData[0].id}/download/zip`
     )
   })
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
index cf10324abe..d699ea0aef 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/emails-row.test.tsx
@@ -33,6 +33,11 @@ describe('<EmailsRow/>', function () {
       samlInitPath: '/saml',
       hasSamlBeta: true,
     })
+    fetchMock.get('/user/emails?ensureAffiliation=true', [])
+  })
+
+  afterEach(function () {
+    fetchMock.reset()
   })
 
   describe('with unaffiliated email data', function () {
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx
index 448067dad6..6e5390ad36 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx
@@ -76,21 +76,20 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
-    await fetchMock.flush(true)
-
-    screen.getByRole('button', { name: /add another email/i })
+    await screen.findByRole('button', { name: /add another email/i })
   })
 
   it('renders input', async function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
+    await fetchMock.flush(true)
 
-    const addAnotherEmailBtn = (await screen.findByRole('button', {
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
       name: /add another email/i,
-    })) as HTMLButtonElement
-    fireEvent.click(addAnotherEmailBtn)
+    })
+    fireEvent.click(button)
 
-    screen.getByLabelText(/email/i)
+    await screen.findByLabelText(/email/i)
   })
 
   it('renders "Start adding your address" until a valid email is typed', async function () {
@@ -98,22 +97,21 @@ describe('<EmailsSection />', function () {
     fetchMock.get(`/institutions/domains?hostname=email.com&limit=1`, 200)
     fetchMock.get(`/institutions/domains?hostname=email&limit=1`, 200)
     render(<EmailsSection />)
+    await fetchMock.flush(true)
 
-    const addAnotherEmailBtn = (await screen.findByRole('button', {
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
       name: /add another email/i,
-    })) as HTMLButtonElement
-    fireEvent.click(addAnotherEmailBtn)
+    })
+    fireEvent.click(button)
 
     const input = screen.getByLabelText(/email/i)
 
     // initially the text is displayed and the "add email" button disabled
     screen.getByText('Start by adding your email address.')
     expect(
-      (
-        screen.getByRole('button', {
-          name: /add new email/i,
-        }) as HTMLButtonElement
-      ).disabled
+      screen.getByRole<HTMLButtonElement>('button', {
+        name: /add new email/i,
+      }).disabled
     ).to.be.true
 
     // no changes while writing the email address
@@ -122,11 +120,9 @@ describe('<EmailsSection />', function () {
     })
     screen.getByText('Start by adding your email address.')
     expect(
-      (
-        screen.getByRole('button', {
-          name: /add new email/i,
-        }) as HTMLButtonElement
-      ).disabled
+      screen.getByRole<HTMLButtonElement>('button', {
+        name: /add new email/i,
+      }).disabled
     ).to.be.true
 
     // the text is removed when the complete email address is typed, and the "add button" is reenabled
@@ -135,11 +131,9 @@ describe('<EmailsSection />', function () {
     })
     expect(screen.queryByText('Start by adding your email address.')).to.be.null
     expect(
-      (
-        screen.getByRole('button', {
-          name: /add new email/i,
-        }) as HTMLButtonElement
-      ).disabled
+      screen.getByRole<HTMLButtonElement>('button', {
+        name: /add new email/i,
+      }).disabled
     ).to.be.false
   })
 
@@ -147,10 +141,10 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
-    const addAnotherEmailBtn = (await screen.findByRole('button', {
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
       name: /add another email/i,
-    })) as HTMLButtonElement
-    fireEvent.click(addAnotherEmailBtn)
+    })
+    fireEvent.click(button)
 
     screen.getByRole('button', { name: /add new email/i })
   })
@@ -159,16 +153,17 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const addAnotherEmailBtn = await screen.findByRole<HTMLButtonElement>(
+      'button',
+      { name: /add another email/i }
+    )
+
     await fetchMock.flush(true)
     resetFetchMock()
     fetchMock
       .get('/user/emails?ensureAffiliation=true', [userEmailData])
       .post('/user/emails', 200)
 
-    const addAnotherEmailBtn = await screen.findByRole('button', {
-      name: /add another email/i,
-    })
-
     fireEvent.click(addAnotherEmailBtn)
     const input = screen.getByLabelText(/email/i)
 
@@ -176,9 +171,9 @@ describe('<EmailsSection />', function () {
       target: { value: userEmailData.email },
     })
 
-    const submitBtn = screen.getByRole('button', {
+    const submitBtn = screen.getByRole<HTMLButtonElement>('button', {
       name: /add new email/i,
-    }) as HTMLButtonElement
+    })
 
     expect(submitBtn.disabled).to.be.false
 
@@ -199,16 +194,17 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const addAnotherEmailBtn = await screen.findByRole<HTMLButtonElement>(
+      'button',
+      { name: /add another email/i }
+    )
+
     await fetchMock.flush(true)
     resetFetchMock()
     fetchMock
       .get('/user/emails?ensureAffiliation=true', [])
       .post('/user/emails', 400)
 
-    const addAnotherEmailBtn = screen.getByRole('button', {
-      name: /add another email/i,
-    })
-
     fireEvent.click(addAnotherEmailBtn)
     const input = screen.getByLabelText(/email/i)
 
@@ -216,9 +212,9 @@ describe('<EmailsSection />', function () {
       target: { value: userEmailData.email },
     })
 
-    const submitBtn = screen.getByRole('button', {
+    const submitBtn = screen.getByRole<HTMLButtonElement>('button', {
       name: /add new email/i,
-    }) as HTMLButtonElement
+    })
 
     expect(submitBtn.disabled).to.be.false
 
@@ -237,15 +233,15 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
+      name: /add another email/i,
+    })
+
     await fetchMock.flush(true)
     fetchMock.reset()
     fetchMock.get('express:/institutions/domains', institutionDomainData)
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: /add another email/i,
-      })
-    )
+    await userEvent.click(button)
 
     const input = screen.getByLabelText(/email/i)
     fireEvent.change(input, {
@@ -261,26 +257,26 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
+      name: /add another email/i,
+    })
+
     await fetchMock.flush(true)
     resetFetchMock()
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: /add another email/i,
-      })
-    )
+    await userEvent.click(button)
 
     await userEvent.type(screen.getByLabelText(/email/i), userEmailData.email)
 
     await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
 
-    const universityInput = screen.getByRole('textbox', {
+    const universityInput = screen.getByRole<HTMLInputElement>('textbox', {
       name: /university/i,
-    }) as HTMLInputElement
+    })
 
     expect(universityInput.disabled).to.be.true
 
-    fetchMock.get(/\/institutions\/list/, [
+    fetchMock.get('/institutions/list?country_code=de', [
       {
         id: userEmailData.affiliation.institution.id,
         name: userEmailData.affiliation.institution.name,
@@ -306,7 +302,7 @@ describe('<EmailsSection />', function () {
     // Select the university from dropdown
     await userEvent.click(universityInput)
     await userEvent.click(
-      screen.getByText(userEmailData.affiliation.institution.name)
+      await screen.findByText(userEmailData.affiliation.institution.name)
     )
 
     const roleInput = screen.getByRole('textbox', { name: /role/i })
@@ -354,10 +350,14 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
+      name: /add another email/i,
+    })
+
     await fetchMock.flush(true)
     resetFetchMock()
 
-    fetchMock.get(/\/institutions\/list/, [
+    fetchMock.get('/institutions/list?country_code=de', [
       {
         id: 1,
         name: 'University of Bonn',
@@ -369,34 +369,30 @@ describe('<EmailsSection />', function () {
     ])
 
     // open "add new email" section and click "let us know" to open the Country/University form
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: /add another email/i,
-      })
-    )
+    await userEvent.click(button)
     await userEvent.type(screen.getByLabelText(/email/i), userEmailData.email)
     await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
 
     // select a country
-    const countryInput = screen.getByRole('textbox', {
+    const countryInput = screen.getByRole<HTMLInputElement>('textbox', {
       name: /country/i,
-    }) as HTMLInputElement
+    })
     await userEvent.click(countryInput)
     await userEvent.type(countryInput, 'Germ')
     await userEvent.click(await screen.findByText('Germany'))
 
     // match several universities on initial typing
-    const universityInput = screen.getByRole('textbox', {
+    const universityInput = screen.getByRole<HTMLInputElement>('textbox', {
       name: /university/i,
-    }) as HTMLInputElement
+    })
     await userEvent.click(universityInput)
     await userEvent.type(universityInput, 'bo')
-    screen.getByText('University of Bonn')
-    screen.getByText('Bochum institute of Science')
+    await screen.findByText('University of Bonn')
+    await screen.findByText('Bochum institute of Science')
 
     // match a single university when typing to refine the search
     await userEvent.type(universityInput, 'nn')
-    screen.getByText('University of Bonn')
+    await screen.findByText('University of Bonn')
     expect(screen.queryByText('Bochum institute of Science')).to.be.null
   })
 
@@ -407,22 +403,22 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
+      name: /add another email/i,
+    })
+
     await fetchMock.flush(true)
     resetFetchMock()
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: /add another email/i,
-      })
-    )
+    await userEvent.click(button)
 
     await userEvent.type(screen.getByLabelText(/email/i), userEmailData.email)
 
     await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
 
-    const universityInput = screen.getByRole('textbox', {
+    const universityInput = screen.getByRole<HTMLInputElement>('textbox', {
       name: /university/i,
-    }) as HTMLInputElement
+    })
 
     expect(universityInput.disabled).to.be.true
 
@@ -510,6 +506,10 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
+      name: /add another email/i,
+    })
+
     await fetchMock.flush(true)
     fetchMock.reset()
     fetchMock.get(
@@ -517,11 +517,7 @@ describe('<EmailsSection />', function () {
       institutionDomainDataCopy
     )
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: /add another email/i,
-      })
-    )
+    await userEvent.click(button)
 
     await userEvent.type(
       screen.getByLabelText(/email/i),
@@ -583,6 +579,10 @@ describe('<EmailsSection />', function () {
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
     render(<EmailsSection />)
 
+    const button = await screen.findByRole<HTMLButtonElement>('button', {
+      name: /add another email/i,
+    })
+
     await fetchMock.flush(true)
     fetchMock.reset()
     fetchMock.get(
@@ -590,11 +590,7 @@ describe('<EmailsSection />', function () {
       institutionDomainDataCopy
     )
 
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: /add another email/i,
-      })
-    )
+    await userEvent.click(button)
 
     await userEvent.type(
       screen.getByLabelText(/email/i),
diff --git a/services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx b/services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx
index 4e680c5503..dd04aa9add 100644
--- a/services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx
@@ -78,6 +78,7 @@ describe('user role and institution', function () {
       hasAffiliationsFeature: true,
     })
     fetchMock.reset()
+    fetchMock.get('/user/emails?ensureAffiliation=true', [])
   })
 
   afterEach(function () {
@@ -120,7 +121,9 @@ describe('user role and institution', function () {
 
   it('fetches institution data and replaces departments dropdown on add/change', async function () {
     const userEmailData = userData1
-    fetchMock.get('/user/emails?ensureAffiliation=true', [userEmailData])
+    fetchMock.get('/user/emails?ensureAffiliation=true', [userEmailData], {
+      overwriteRoutes: true,
+    })
     render(<EmailsSection />)
 
     await fetchMock.flush(true)
@@ -149,7 +152,9 @@ describe('user role and institution', function () {
 
   it('adds new role and department', async function () {
     fetchMock
-      .get('/user/emails?ensureAffiliation=true', [userData1])
+      .get('/user/emails?ensureAffiliation=true', [userData1], {
+        overwriteRoutes: true,
+      })
       .get(/\/institutions\/list/, { departments: [] })
       .post('/user/emails/endorse', 200)
     render(<EmailsSection />)
diff --git a/services/web/test/frontend/features/settings/components/emails/reconfirmation-info.test.tsx b/services/web/test/frontend/features/settings/components/emails/reconfirmation-info.test.tsx
index 251f25b88a..2e175f6cec 100644
--- a/services/web/test/frontend/features/settings/components/emails/reconfirmation-info.test.tsx
+++ b/services/web/test/frontend/features/settings/components/emails/reconfirmation-info.test.tsx
@@ -13,6 +13,7 @@ import ReconfirmationInfo from '../../../../../../frontend/js/features/settings/
 import { ssoUserData } from '../../fixtures/test-user-email-data'
 import { UserEmailData } from '../../../../../../types/user-email'
 import { UserEmailsProvider } from '../../../../../../frontend/js/features/settings/context/user-email-context'
+import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
 
 function renderReconfirmationInfo(data: UserEmailData) {
   return render(
@@ -23,13 +24,21 @@ function renderReconfirmationInfo(data: UserEmailData) {
 }
 
 describe('<ReconfirmationInfo/>', function () {
+  let assignStub: sinon.SinonStub
+
   beforeEach(function () {
     window.metaAttributesCache = window.metaAttributesCache || new Map()
     fetchMock.get('/user/emails?ensureAffiliation=true', [])
+    assignStub = sinon.stub()
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: assignStub,
+      reload: sinon.stub(),
+    })
   })
 
   afterEach(function () {
     fetchMock.reset()
+    this.locationStub.restore()
   })
 
   describe('reconfirmed via SAML', function () {
@@ -54,18 +63,11 @@ describe('<ReconfirmationInfo/>', function () {
 
   describe('in reconfirm notification period', function () {
     let inReconfirmUserData: UserEmailData
-    const locationStub = sinon.stub()
-    const originalLocation = window.location
 
     beforeEach(function () {
       window.metaAttributesCache.set('ol-ExposedSettings', {
         samlInitPath: '/saml',
       })
-      Object.defineProperty(window, 'location', {
-        value: {
-          assign: locationStub,
-        },
-      })
 
       inReconfirmUserData = cloneDeep(ssoUserData)
       if (inReconfirmUserData.affiliation) {
@@ -75,9 +77,6 @@ describe('<ReconfirmationInfo/>', function () {
 
     afterEach(function () {
       window.metaAttributesCache = new Map()
-      Object.defineProperty(window, 'location', {
-        value: originalLocation,
-      })
     })
 
     it('renders prompt', function () {
@@ -119,9 +118,9 @@ describe('<ReconfirmationInfo/>', function () {
         await waitFor(() => {
           expect(confirmButton.disabled).to.be.true
         })
-        sinon.assert.calledOnce(locationStub)
+        sinon.assert.calledOnce(assignStub)
         sinon.assert.calledWithMatch(
-          locationStub,
+          assignStub,
           '/saml/init?university_id=2&reconfirm=/user/settings'
         )
       })
@@ -137,9 +136,9 @@ describe('<ReconfirmationInfo/>', function () {
 
       it('sends and resends confirmation email', async function () {
         renderReconfirmationInfo(inReconfirmUserData)
-        const confirmButton = screen.getByRole('button', {
+        const confirmButton = (await screen.findByRole('button', {
           name: 'Confirm Affiliation',
-        }) as HTMLButtonElement
+        })) as HTMLButtonElement
 
         await waitFor(() => {
           expect(confirmButton.disabled).to.be.false
@@ -152,20 +151,21 @@ describe('<ReconfirmationInfo/>', function () {
         expect(fetchMock.called()).to.be.true
 
         // the confirmation text should now be displayed
-        screen.getByText(/Please check your email inbox to confirm/)
+        await screen.findByText(/Please check your email inbox to confirm/)
 
         // try the resend button
         fetchMock.resetHistory()
-        const resendButton = screen.getByRole('button', {
+        const resendButton = await screen.findByRole('button', {
           name: 'Resend confirmation email',
-        }) as HTMLButtonElement
+        })
 
         fireEvent.click(resendButton)
 
-        screen.getByText(/Sending/)
+        // commented out as it's already gone by this point
+        // await screen.findByText(/Sending/)
         expect(fetchMock.called()).to.be.true
         await waitForElementToBeRemoved(() => screen.getByText(/Sending/))
-        screen.getByRole('button', {
+        await screen.findByRole('button', {
           name: 'Resend confirmation email',
         })
       })
diff --git a/services/web/test/frontend/features/settings/components/leave/modal-form.test.tsx b/services/web/test/frontend/features/settings/components/leave/modal-form.test.tsx
index 7229b81eb4..0402f0c56a 100644
--- a/services/web/test/frontend/features/settings/components/leave/modal-form.test.tsx
+++ b/services/web/test/frontend/features/settings/components/leave/modal-form.test.tsx
@@ -4,6 +4,7 @@ import { fireEvent, screen, render, waitFor } from '@testing-library/react'
 import fetchMock, { FetchMockStatic } from 'fetch-mock'
 
 import LeaveModalForm from '../../../../../../frontend/js/features/settings/components/leave/modal-form'
+import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<LeaveModalForm />', function () {
   beforeEach(function () {
@@ -51,27 +52,23 @@ describe('<LeaveModalForm />', function () {
     let setInFlight: sinon.SinonStub
     let setIsFormValid: sinon.SinonStub
     let deleteMock: FetchMockStatic
-    let locationStub: sinon.SinonStub
-    const originalLocation = window.location
+    let assignStub: sinon.SinonStub
 
     beforeEach(function () {
       setInFlight = sinon.stub()
       setIsFormValid = sinon.stub()
       deleteMock = fetchMock.post('/user/delete', 200)
-      locationStub = sinon.stub()
-      Object.defineProperty(window, 'location', {
-        value: {
-          assign: locationStub,
-        },
+      assignStub = sinon.stub()
+      this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+        assign: assignStub,
+        reload: sinon.stub(),
       })
       window.metaAttributesCache.set('ol-ExposedSettings', { isOverleaf: true })
     })
 
     afterEach(function () {
       fetchMock.reset()
-      Object.defineProperty(window, 'location', {
-        value: originalLocation,
-      })
+      this.locationStub.restore()
     })
 
     it('with valid form', async function () {
@@ -91,8 +88,8 @@ describe('<LeaveModalForm />', function () {
       await waitFor(() => {
         sinon.assert.calledTwice(setInFlight)
         sinon.assert.calledWithMatch(setInFlight, false)
-        sinon.assert.calledOnce(locationStub)
-        sinon.assert.calledWithMatch(locationStub, '/login')
+        sinon.assert.calledOnce(assignStub)
+        sinon.assert.calledWith(assignStub, '/login')
       })
     })
 
diff --git a/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx b/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx
index 2061590abd..570c3019ab 100644
--- a/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx
+++ b/services/web/test/frontend/features/settings/components/leavers-survey-alert.test.tsx
@@ -5,6 +5,7 @@ import { UserEmailsProvider } from '../../../../../frontend/js/features/settings
 import { LeaversSurveyAlert } from '../../../../../frontend/js/features/settings/components/leavers-survey-alert'
 import * as eventTracking from '../../../../../frontend/js/infrastructure/event-tracking'
 import localStorage from '../../../../../frontend/js/infrastructure/local-storage'
+import fetchMock from 'fetch-mock'
 
 function renderWithProvider() {
   render(<LeaversSurveyAlert />, {
@@ -15,6 +16,14 @@ function renderWithProvider() {
 }
 
 describe('<LeaversSurveyAlert/>', function () {
+  beforeEach(function () {
+    fetchMock.get('/user/emails?ensureAffiliation=true', [])
+  })
+
+  afterEach(function () {
+    fetchMock.reset()
+  })
+
   it('should render before the expiration date', function () {
     const tomorrow = Date.now() + 1000 * 60 * 60 * 24
     localStorage.setItem('showInstitutionalLeaversSurveyUntil', tomorrow)
diff --git a/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.js b/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.js
index d01a8252af..5c03d91796 100644
--- a/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.js
+++ b/services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.js
@@ -14,12 +14,12 @@ import {
   renderWithEditorContext,
   cleanUpContext,
 } from '../../../helpers/render-with-context'
-import * as locationModule from '../../../../../frontend/js/shared/components/location'
 import {
   EditorProviders,
   USER_EMAIL,
   USER_ID,
 } from '../../../helpers/editor-providers'
+import * as useLocationModule from '../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<ShareProjectModal/>', function () {
   const project = {
@@ -85,6 +85,10 @@ describe('<ShareProjectModal/>', function () {
   }
 
   beforeEach(function () {
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: sinon.stub(),
+      reload: sinon.stub(),
+    })
     fetchMock.get('/user/contacts', { contacts })
     window.metaAttributesCache = new Map()
     window.metaAttributesCache.set('ol-user', { allowedFreeTrial: true })
@@ -92,6 +96,7 @@ describe('<ShareProjectModal/>', function () {
   })
 
   afterEach(function () {
+    this.locationStub.restore()
     fetchMock.restore()
     cleanUpContext()
     window.metaAttributesCache = new Map()
@@ -525,8 +530,6 @@ describe('<ShareProjectModal/>', function () {
       )
     })
 
-    const reloadStub = sinon.stub(locationModule, 'reload')
-
     const confirmButton = screen.getByRole('button', {
       name: 'Change owner',
     })
@@ -537,8 +540,6 @@ describe('<ShareProjectModal/>', function () {
     expect(JSON.parse(body)).to.deep.equal({ user_id: 'member-viewer' })
 
     expect(fetchMock.done()).to.be.true
-    expect(reloadStub.calledOnce).to.be.true
-    reloadStub.restore()
   })
 
   it('sends invites to input email addresses', async function () {
diff --git a/services/web/test/frontend/features/subscription/components/dashboard/group-subscription-memberships.test.tsx b/services/web/test/frontend/features/subscription/components/dashboard/group-subscription-memberships.test.tsx
index b4370db780..bb98b081c0 100644
--- a/services/web/test/frontend/features/subscription/components/dashboard/group-subscription-memberships.test.tsx
+++ b/services/web/test/frontend/features/subscription/components/dashboard/group-subscription-memberships.test.tsx
@@ -15,6 +15,7 @@ import {
   groupActiveSubscription,
   groupActiveSubscriptionWithPendingLicenseChange,
 } from '../../fixtures/subscriptions'
+import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
 
 const userId = 'fff999fff999'
 const memberGroupSubscriptions: MemberGroupSubscription[] = [
@@ -71,13 +72,13 @@ describe('<GroupSubscriptionMemberships />', function () {
   })
 
   describe('opens leave group modal when button is clicked', function () {
-    let reloadStub: () => void
-    const originalLocation = window.location
+    let reloadStub: sinon.SinonStub
 
     beforeEach(function () {
       reloadStub = sinon.stub()
-      Object.defineProperty(window, 'location', {
-        value: { reload: reloadStub },
+      this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+        assign: sinon.stub(),
+        reload: reloadStub,
       })
 
       render(
@@ -99,9 +100,7 @@ describe('<GroupSubscriptionMemberships />', function () {
     })
 
     afterEach(function () {
-      Object.defineProperty(window, 'location', {
-        value: originalLocation,
-      })
+      this.locationStub.restore()
     })
 
     it('close the modal', function () {
diff --git a/services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx b/services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx
index 9d8d2f32e9..e747f36424 100644
--- a/services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx
+++ b/services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx
@@ -17,9 +17,9 @@ import {
   renderWithSubscriptionDashContext,
 } from '../../helpers/render-with-subscription-dash-context'
 import { reactivateSubscriptionUrl } from '../../../../../../frontend/js/features/subscription/data/subscription-url'
-import * as locationModule from '../../../../../../frontend/js/shared/components/location'
 import fetchMock from 'fetch-mock'
 import sinon from 'sinon'
+import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<PersonalSubscription />', function () {
   afterEach(function () {
@@ -48,6 +48,20 @@ describe('<PersonalSubscription />', function () {
   })
 
   describe('subscription states  ', function () {
+    let reloadStub: sinon.SinonStub
+
+    beforeEach(function () {
+      reloadStub = sinon.stub()
+      this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+        assign: sinon.stub(),
+        reload: reloadStub,
+      })
+    })
+
+    afterEach(function () {
+      this.locationStub.restore()
+    })
+
     it('renders the active dash', function () {
       renderWithSubscriptionDashContext(<PersonalSubscription />, {
         metaTags: [
@@ -82,8 +96,6 @@ describe('<PersonalSubscription />', function () {
     })
 
     it('reactivates canceled plan', async function () {
-      const reload = sinon.stub(locationModule, 'reload')
-
       renderWithSubscriptionDashContext(<PersonalSubscription />, {
         metaTags: [{ name: 'ol-subscription', value: canceledSubscription }],
       })
@@ -98,18 +110,16 @@ describe('<PersonalSubscription />', function () {
       expect(reactivateBtn.disabled).to.be.true
       await fetchMock.flush(true)
       expect(reactivateBtn.disabled).to.be.false
-      expect(reload).not.to.have.been.called
+      expect(reloadStub).not.to.have.been.called
       fetchMock.reset()
 
       // 2nd click - success
       fetchMock.postOnce(reactivateSubscriptionUrl, 200)
       fireEvent.click(reactivateBtn)
       await fetchMock.flush(true)
-      expect(reload).to.have.been.calledOnce
+      expect(reloadStub).to.have.been.calledOnce
       expect(reactivateBtn.disabled).to.be.true
       fetchMock.reset()
-
-      reload.restore()
     })
 
     it('renders the expired dash', function () {
diff --git a/services/web/test/frontend/features/subscription/components/dashboard/premium-features-link.test.tsx b/services/web/test/frontend/features/subscription/components/dashboard/premium-features-link.test.tsx
index 5f53d077a3..b8a6713218 100644
--- a/services/web/test/frontend/features/subscription/components/dashboard/premium-features-link.test.tsx
+++ b/services/web/test/frontend/features/subscription/components/dashboard/premium-features-link.test.tsx
@@ -3,6 +3,7 @@ import sinon from 'sinon'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import * as eventTracking from '../../../../../../frontend/js/infrastructure/event-tracking'
 import PremiumFeaturesLink from '../../../../../../frontend/js/features/subscription/components/dashboard/premium-features-link'
+import * as useLocationModule from '../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<PremiumFeaturesLink />', function () {
   const originalLocation = window.location
@@ -17,14 +18,16 @@ describe('<PremiumFeaturesLink />', function () {
   beforeEach(function () {
     window.metaAttributesCache = new Map()
     sendMBSpy = sinon.spy(eventTracking, 'sendMB')
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: sinon.stub(),
+      reload: sinon.stub(),
+    })
   })
 
   afterEach(function () {
     window.metaAttributesCache = new Map()
     sendMBSpy.restore()
-    Object.defineProperty(window, 'location', {
-      value: originalLocation,
-    })
+    this.locationStub.restore()
   })
 
   for (const variant of variants) {
diff --git a/services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx b/services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx
index f429130eaf..d67b1df8a6 100644
--- a/services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx
+++ b/services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx
@@ -21,6 +21,7 @@ import {
   extendTrialUrl,
   subscriptionUpdateUrl,
 } from '../../../../../../../../frontend/js/features/subscription/data/subscription-url'
+import * as useLocationModule from '../../../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<ActiveSubscription />', function () {
   let sendMBSpy: sinon.SinonSpy
@@ -195,20 +196,18 @@ describe('<ActiveSubscription />', function () {
   })
 
   describe('cancel plan', function () {
-    const locationStub = sinon.stub()
+    const assignStub = sinon.stub()
     const reloadStub = sinon.stub()
-    const originalLocation = window.location
 
     beforeEach(function () {
-      Object.defineProperty(window, 'location', {
-        value: { assign: locationStub, reload: reloadStub },
+      this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+        assign: assignStub,
+        reload: reloadStub,
       })
     })
 
     afterEach(function () {
-      Object.defineProperty(window, 'location', {
-        value: originalLocation,
-      })
+      this.locationStub.restore()
       fetchMock.reset()
     })
 
@@ -256,9 +255,9 @@ describe('<ActiveSubscription />', function () {
       })
       fireEvent.click(button)
       await waitFor(() => {
-        expect(locationStub).to.have.been.called
+        expect(assignStub).to.have.been.called
       })
-      sinon.assert.calledWithMatch(locationStub, '/user/subscription/canceled')
+      sinon.assert.calledWithMatch(assignStub, '/user/subscription/canceled')
     })
 
     it('shows an error message if canceling subscription failed', async function () {
diff --git a/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx b/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx
index 131a0e1990..4e0542c6bc 100644
--- a/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx
+++ b/services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx
@@ -20,25 +20,25 @@ import {
   subscriptionUpdateUrl,
 } from '../../../../../../../../../frontend/js/features/subscription/data/subscription-url'
 import { renderActiveSubscription } from '../../../../../helpers/render-active-subscription'
+import * as useLocationModule from '../../../../../../../../../frontend/js/shared/hooks/use-location'
 
 describe('<ChangePlanModal />', function () {
-  let reloadStub: () => void
-  const originalLocation = window.location
   const plansMetaTag = { name: 'ol-plans', value: plans }
 
+  let reloadStub: sinon.SinonStub
+
   beforeEach(function () {
     reloadStub = sinon.stub()
-    Object.defineProperty(window, 'location', {
-      value: { reload: reloadStub },
+    this.locationStub = sinon.stub(useLocationModule, 'useLocation').returns({
+      assign: sinon.stub(),
+      reload: reloadStub,
     })
   })
 
   afterEach(function () {
     cleanUpContext()
     fetchMock.reset()
-    Object.defineProperty(window, 'location', {
-      value: originalLocation,
-    })
+    this.locationStub.restore()
   })
 
   it('renders the individual plans table and group plans UI', async function () {