Sandbox -> Main (Already reviewed) (#1564)

package.json

@@ -93,7 +93,8 @@
     "react-dom": "~18.3.1",
     "react-intl": "6.8.7",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
+    "react-router-dom": "^7.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.81.0",
     "start-server-and-test": "^2.0.8",

src/components/Grunnlag/Grunnlag.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import {
   Accordion,

src/components/Grunnlag/GrunnlagAFP/__tests__/GrunnlagAFP.test.tsx

@@ -1,5 +1,3 @@
-import * as ReactRouterUtils from 'react-router'
-
 import { add, endOfDay, format } from 'date-fns'
 
 import { GrunnlagAFP } from '..'
@@ -14,6 +12,15 @@ import { userInputInitialState } from '@/state/userInput/userInputReducer'
 import { render, screen, userEvent } from '@/test-utils'
 import { DATE_BACKEND_FORMAT } from '@/utils/dates'
 
+const navigateMock = vi.fn()
+vi.mock(import('react-router'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  }
+})
+
 describe('Grunnlag - AFP', () => {
   it('Når brukeren har valgt AFP offentlig og samtykket til beregning av den, viser riktig tittel med formatert inntekt og tekst', async () => {
     const user = userEvent.setup()
@@ -106,10 +113,6 @@ describe('Grunnlag - AFP', () => {
 
   it('Når brukeren har valgt uten AFP, viser riktig tittel med formatert inntekt, tekst og lenke', async () => {
     const goToStartMock = vi.fn()
-    const navigateMock = vi.fn()
-    vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation(
-      () => navigateMock
-    )
 
     const user = userEvent.setup()
     render(<GrunnlagAFP goToStart={goToStartMock} />, {
@@ -417,10 +420,6 @@ describe('Grunnlag - AFP', () => {
 
     it('Når hen har valgt uten AFP, viser riktig tittel med formatert inntekt, tekst og lenke', async () => {
       const goToStartMock = vi.fn()
-      const navigateMock = vi.fn()
-      vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation(
-        () => navigateMock
-      )
 
       const user = userEvent.setup()
       render(<GrunnlagAFP goToStart={goToStartMock} />, {

src/components/Grunnlag/GrunnlagUtenlandsopphold/GrunnlagUtenlandsopphold.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons'
 import { BodyLong, Button, Link, Modal } from '@navikt/ds-react'

src/components/Grunnlag/GrunnlagUtenlandsopphold/__tests__/GrunnlagUtenlandsopphold.test.tsx

@@ -1,10 +1,17 @@
-import * as ReactRouterUtils from 'react-router'
-
 import { GrunnlagUtenlandsopphold } from '..'
 import { fulfilledGetLoependeVedtakLoependeAlderspensjon } from '@/mocks/mockedRTKQueryApiCalls'
 import { userInputInitialState } from '@/state/userInput/userInputReducer'
 import { render, screen, userEvent } from '@/test-utils'
 
+const navigateMock = vi.fn()
+vi.mock(import('react-router'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  }
+})
+
 describe('GrunnlagUtenlandsopphold', () => {
   describe('Gitt at brukeren har svart "nei" på spørsmålet om opphold i utlandet', () => {
     it('viser riktig tittel og innhold og liste over utenlandsopphold vises ikke', async () => {
@@ -164,11 +171,6 @@ describe('GrunnlagUtenlandsopphold', () => {
   })
 
   it('Når man klikker på lenken for å endre opphold, sendes man til Utenlandsoppholdsteget', async () => {
-    const navigateMock = vi.fn()
-    vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation(
-      () => navigateMock
-    )
-
     const user = userEvent.setup()
 
     render(<GrunnlagUtenlandsopphold />, {

src/components/Grunnlag/__tests__/Grunnlag.test.tsx

@@ -1,5 +1,3 @@
-import * as ReactRouterUtils from 'react-router'
-
 import { Grunnlag } from '@/components/Grunnlag'
 import { fulfilledGetLoependeVedtak0Ufoeregrad } from '@/mocks/mockedRTKQueryApiCalls'
 import { mockErrorResponse, mockResponse } from '@/mocks/server'
@@ -8,6 +6,15 @@ import { userInputInitialState } from '@/state/userInput/userInputReducer'
 import * as userInputReducerUtils from '@/state/userInput/userInputReducer'
 import { render, screen, userEvent, waitFor } from '@/test-utils'
 
+const navigateMock = vi.fn()
+vi.mock(import('react-router'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  }
+})
+
 describe('Grunnlag', () => {
   const renderGrunnlagMedPreloadedState = (
     headingLevel: '1' | '2' | '3',
@@ -104,10 +111,6 @@ describe('Grunnlag', () => {
         userInputReducerUtils.userInputActions,
         'flushCurrentSimulationUtenomUtenlandsperioder'
       )
-      const navigateMock = vi.fn()
-      vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation(
-        () => navigateMock
-      )
 
       const user = userEvent.setup()
       renderGrunnlagMedPreloadedState('2', 'enkel')
@@ -266,10 +269,6 @@ describe('Grunnlag', () => {
         userInputReducerUtils.userInputActions,
         'flush'
       )
-      const navigateMock = vi.fn()
-      vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation(
-        () => navigateMock
-      )
 
       const user = userEvent.setup()
       renderGrunnlagMedPreloadedState('2', 'enkel', {

src/components/GrunnlagForbehold/GrunnlagForbehold.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage, useIntl } from 'react-intl'
-import { Link as ReactRouterLink } from 'react-router-dom'
+import { Link as ReactRouterLink } from 'react-router'
 
 import { ExternalLinkIcon } from '@navikt/aksel-icons'
 import { BodyLong, Heading, HeadingProps, Link } from '@navikt/ds-react'

src/components/GrunnlagForbehold/__tests__/__snapshots__/GrunnlagForbehold.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`GrunnlagForbehold > rendrer riktig 1`] = `
       grunnlag.forbehold.ingress_1
       <a
         class="navds-link navds-link--action navds-link--inline-text"
+        data-discover="true"
         href="/forbehold"
         target="_blank"
       >

src/components/LightBlueFooter/LightBlueFooter.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { Button, Modal } from '@navikt/ds-react'
 

src/components/LightBlueFooter/__tests__/LightBlueFooter.test.tsx

@@ -1,12 +1,19 @@
-import * as ReactRouterUtils from 'react-router'
-
 import { describe, it, vi } from 'vitest'
 
 import { LightBlueFooter } from '..'
 import { paths } from '@/router/constants'
 import { userInputInitialState } from '@/state/userInput/userInputReducer'
 import { render, screen, userEvent } from '@/test-utils'
 
+const navigateMock = vi.fn()
+vi.mock(import('react-router'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  }
+})
+
 describe('LightBlueFooter', () => {
   it('rendrer med riktig tekst og knapper', () => {
     const { asFragment } = render(<LightBlueFooter />)
@@ -17,10 +24,6 @@ describe('LightBlueFooter', () => {
   describe('Gitt at brukeren klikker på knappen, åpnes det modalen og brukeren kan avbryte eller gå tilbake til start ved bekreftelse', async () => {
     it('Når brukeren bekrefter, nullstiller input fra brukeren og redirigerer til første steg av stegvisning', async () => {
       const user = userEvent.setup()
-      const navigateMock = vi.fn()
-      vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation(
-        () => navigateMock
-      )
 
       const { store } = render(<LightBlueFooter />, {
         preloadedState: {

src/components/Pensjonsavtaler/Pensjonsavtaler.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import {
   ExclamationmarkTriangleFillIcon,

src/components/Pensjonsavtaler/__tests__/Pensjonsavtaler.test.tsx

@@ -1,5 +1,3 @@
-import * as ReactRouterUtils from 'react-router'
-
 import { describe, it, vi } from 'vitest'
 
 import { Pensjonsavtaler } from '../Pensjonsavtaler'
@@ -13,6 +11,15 @@ import {
 } from '@/state/userInput/userInputReducer'
 import { render, screen, userEvent } from '@/test-utils'
 
+const navigateMock = vi.fn()
+vi.mock(import('react-router'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  }
+})
+
 describe('Pensjonsavtaler', () => {
   const currentSimulation: Simulation = {
     utenlandsperioder: [],
@@ -32,10 +39,6 @@ describe('Pensjonsavtaler', () => {
   describe('Gitt at brukeren ikke har samtykket', () => {
     it('viser riktig header og melding med lenke tilbake til start, og skjuler ingress, tabell og info om offentlig tjenestepensjon', async () => {
       const user = userEvent.setup()
-      const navigateMock = vi.fn()
-      vi.spyOn(ReactRouterUtils, 'useNavigate').mockImplementation(
-        () => navigateMock
-      )
 
       const { store } = render(<Pensjonsavtaler headingLevel="3" />, {
         preloadedState: {

src/components/SavnerDuNoe/SavnerDuNoe.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 
 import { Button } from '@navikt/ds-react'
 import { BodyLong, Heading, HeadingProps } from '@navikt/ds-react'