upgrade to next 13

cypress/e2e/work-order/authorisation/authorisation.cy.js

@@ -5,6 +5,10 @@ import 'cypress-audit/commands'
 // Mock date
 const now = new Date('Fri Jan 22 2021 18:27:20 GMT+0000 (Greenwich Mean Time)')
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}))
+
 describe('Authorisation workflow for a work order', () => {
   beforeEach(() => {
     cy.loginWithAuthorisationManagerRole()

package.json

@@ -40,11 +40,11 @@
     "loglevel": "^1.8.0",
     "lru-cache": "^6.0.0",
     "mockdate": "^3.0.2",
-    "next": "^12",
+    "next": "13",
     "path": "^0.12.7",
     "qs": "^6.10.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "18",
+    "react-dom": "18",
     "react-hook-form": "^6.14.0",
     "react-hotjar": "^5.0.0",
     "react-photo-view": "^1.2.6",
@@ -62,9 +62,9 @@
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-private-methods": "^7.22.5",
-    "@testing-library/dom": "^7.31.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^13.1.9",
     "@types/node": "^22.1.0",
     "@types/qs": "^6.9.15",

src/components/Layout/Header/index.js

@@ -64,7 +64,7 @@ const HeaderComponent = ({ serviceName, toggleMobileMenu, mobileMenuOpen }) => {
         <div className="lbh-header__main">
           <div className="lbh-container lbh-header__wrapper lbh-header__wrapper--stacked">
             <div className="lbh-header__title">
-              <Link href="/">
+              <Link href="/" legacyBehavior>
                 <a className="lbh-header__title-link">
                   <div className="lbh-header__logo-container">
                     <svg

src/components/Layout/MultiButton/index.test.js

@@ -1,6 +1,7 @@
 import MultiButton from '.'
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { act } from 'react'
 
 beforeAll(() => {
   global.Storage.prototype.setItem = jest.fn()
@@ -43,9 +44,7 @@ describe('MultiButton', () => {
   it('allows a user to choose between options', () => {
     render(<MockComponent />)
 
-    act(() => {
-      fireEvent.click(screen.getByText('Bar'))
-    })
+    fireEvent.click(screen.getByText('Bar'))
 
     expect(screen.getAllByText('Bar').length).toBe(2)
   })
@@ -77,10 +76,8 @@ describe('MultiButton', () => {
   it('closes the details panel after the enter key is pressed', () => {
     render(<MockComponent />)
 
-    act(() => {
-      userEvent.click(screen.getByText('Select action'))
-      fireEvent.keyUp(screen.getByText('Bar'), { key: 'Enter', code: 'Enter' })
-    })
+    userEvent.click(screen.getByText('Select action'))
+    fireEvent.keyUp(screen.getByText('Bar'), { key: 'Enter', code: 'Enter' })
 
     expect(screen.getByTestId('details').getAttribute('open')).toBe(null)
   })

src/components/Operatives/OperativeList.js

@@ -41,7 +41,10 @@ const OperativeList = ({
 }
 const OperativeListLinkItem = ({ workOrderReference, operativeDisplay }) => (
   <li>
-    <Link href={`/work-orders/${workOrderReference}/operatives/edit`}>
+    <Link
+      href={`/work-orders/${workOrderReference}/operatives/edit`}
+      legacyBehavior
+    >
       <a className="govuk-link">{operativeDisplay}</a>
     </Link>
   </li>

src/components/Property/Contacts/Contacts.js

@@ -72,10 +72,12 @@ const Contacts = (props) => {
     return <WarningText text={text} />
   }
 
-  const tenants = contacts.filter((x) => x.tenureType === 'Tenant')
-  const householdMembers = contacts.filter(
-    (x) => x.tenureType === 'HouseholdMember'
-  )
+  const tenants = Array.isArray(contacts)
+    ? contacts?.filter((x) => x.tenureType === 'Tenant')
+    : []
+  const householdMembers = Array.isArray(contacts)
+    ? contacts?.filter((x) => x.tenureType === 'HouseholdMember')
+    : []
 
   return (
     <>

src/components/Property/PropertyDetails.js

@@ -30,7 +30,7 @@ const PropertyDetails = ({
 
       {isCurrentTimeOutOfHours() && (
         <div>
-          <Link href={process.env.NEXT_PUBLIC_OUT_OF_HOURS_LINK}>
+          <Link href={process.env.NEXT_PUBLIC_OUT_OF_HOURS_LINK} legacyBehavior>
             <a
               target="_blank"
               rel="noopener"

src/components/Property/PropertyDetails.test.js

@@ -1,6 +1,5 @@
 import {
   render,
-  act,
   screen,
   waitForElementToBeRemoved,
 } from '@testing-library/react'
@@ -59,12 +58,10 @@ describe('PropertyDetails component', () => {
         />
       )
 
-      await act(async () => {
-        await waitForElementToBeRemoved([
-          screen.getByTestId('spinner-locationAlerts'),
-          screen.getByTestId('spinner-personAlerts'),
-        ])
-      })
+      await waitForElementToBeRemoved([
+        screen.getByTestId('spinner-locationAlerts'),
+        screen.getByTestId('spinner-personAlerts'),
+      ])
 
       expect(asFragment()).toMatchSnapshot()
     })
@@ -90,12 +87,11 @@ describe('PropertyDetails component', () => {
         />
       )
 
-      await act(async () => {
-        await waitForElementToBeRemoved([
-          screen.getByTestId('spinner-locationAlerts'),
-          screen.getByTestId('spinner-personAlerts'),
-        ])
-      })
+      await waitForElementToBeRemoved([
+        screen.getByTestId('spinner-locationAlerts'),
+        screen.getByTestId('spinner-personAlerts'),
+      ])
+
       expect(asFragment()).toMatchSnapshot()
     })
   })

src/components/Property/PropertyDetailsAddress.js

@@ -28,7 +28,7 @@ const PropertyDetailsAddress = ({
       <span className="govuk-!-font-size-14">{subTypeDescription}</span>
       <br></br>
       {hasLinkToProperty ? (
-        <Link href={`/properties/${propertyReference}`}>
+        <Link href={`/properties/${propertyReference}`} legacyBehavior>
           <a className="lbh-link">
             <Address address={address} />
           </a>

src/components/Property/PropertyFlags/index.test.js

@@ -1,6 +1,5 @@
 import {
   render,
-  act,
   screen,
   waitForElementToBeRemoved,
 } from '@testing-library/react'
@@ -59,12 +58,10 @@ describe('PropertyFlags', () => {
 
     expect(asFragment()).toMatchSnapshot()
 
-    await act(async () => {
-      await waitForElementToBeRemoved([
-        screen.getByTestId('spinner-locationAlerts'),
-        screen.getByTestId('spinner-personAlerts'),
-      ])
-    })
+    await waitForElementToBeRemoved([
+      screen.getByTestId('spinner-locationAlerts'),
+      screen.getByTestId('spinner-personAlerts'),
+    ])
 
     expect(axios).toHaveBeenCalledTimes(2)
 
@@ -131,12 +128,10 @@ describe('PropertyFlags', () => {
       />
     )
 
-    await act(async () => {
-      await waitForElementToBeRemoved([
-        screen.getByTestId('spinner-locationAlerts'),
-        screen.getByTestId('spinner-personAlerts'),
-      ])
-    })
+    await waitForElementToBeRemoved([
+      screen.getByTestId('spinner-locationAlerts'),
+      screen.getByTestId('spinner-personAlerts'),
+    ])
 
     expect(mockSetParentLocationAlerts).toHaveBeenCalledWith([
       {

src/components/Property/PropertyRow.js

@@ -10,7 +10,7 @@ const PropertyRow = ({
 }) => (
   <TR className="govuk-table__row--clickable lbh-body-s">
     <TD>
-      <Link href={`/properties/${propertyReference}`}>
+      <Link href={`/properties/${propertyReference}`} legacyBehavior>
         <a className="lbh-link">{address}</a>
       </Link>
     </TD>

src/components/Property/RaiseWorkOrder/RaiseWorkOrderForm.test.js

@@ -1,5 +1,4 @@
 import {
-  act,
   render,
   screen,
   waitForElementToBeRemoved,
@@ -22,6 +21,10 @@ const axios = require('axios')
 
 jest.mock('axios', () => jest.fn())
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}))
+
 describe('RaiseWorkOrderForm component', () => {
   axios.mockResolvedValue({
     data: {
@@ -116,11 +119,9 @@ describe('RaiseWorkOrderForm component', () => {
       </UserContext.Provider>
     )
 
-    await act(async () => {
-      await waitForElementToBeRemoved([
-        screen.getByTestId('spinner-locationAlerts'),
-      ])
-    })
+    await waitForElementToBeRemoved([
+      screen.getByTestId('spinner-locationAlerts'),
+    ])
 
     expect(asFragment()).toMatchSnapshot()
   })
@@ -154,11 +155,9 @@ describe('RaiseWorkOrderForm component', () => {
       </UserContext.Provider>
     )
 
-    await act(async () => {
-      await waitForElementToBeRemoved([
-        screen.getByTestId('spinner-locationAlerts'),
-      ])
-    })
+    await waitForElementToBeRemoved([
+      screen.getByTestId('spinner-locationAlerts'),
+    ])
 
     expect(asFragment()).toMatchSnapshot()
   })
@@ -223,11 +222,9 @@ describe('RaiseWorkOrderForm component', () => {
       </UserContext.Provider>
     )
 
-    await act(async () => {
-      await waitForElementToBeRemoved([
-        screen.getByTestId('spinner-locationAlerts'),
-      ])
-    })
+    await waitForElementToBeRemoved([
+      screen.getByTestId('spinner-locationAlerts'),
+    ])
 
     expect(asFragment()).toMatchSnapshot()
   })