deps: update next 14.2.4 + jest + MUI (chaynHQ#1017)

* update to next 13.5.6

* update to 14.2.4

* update next + mui + jest to latest

Author: annarhughes

.github/workflows/build-and-test-prs.yml

@@ -33,6 +33,9 @@ jobs:
       - name: Run linting
         run: yarn lint
 
+      - name: Run type checks
+        run: yarn type-check
+
       - name: Build app
         run: yarn build
         env:

.github/workflows/dependabot-pr-review.yml

@@ -19,4 +19,4 @@ jobs:
         uses: actions/dependency-review-action@v4
         with:
           # fails when moderate vulnerabilities are deteched
-          fail-on-severity: high
+          fail-on-severity: moderate

components/common/Column.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 
 interface ColumnProps {
   children: any;

components/common/Quote.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { ISbRichtext } from '@storyblok/react';
 import { richtextContentStyle } from '../../styles/common';
 

components/common/Row.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { richtextContentStyle, rowStyle } from '../../styles/common';
 
 interface RowProps {

components/storyblok/Placeholder.tsx

@@ -1,5 +1,4 @@
-import { Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Typography } from '@mui/material';
 
 interface PlaceholderProps {
   componentName: string;

components/storyblok/StoryblokAudio.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { storyblokEditable } from '@storyblok/react';
 import dynamic from 'next/dynamic';
 import { richtextContentStyle } from '../../styles/common';

components/storyblok/StoryblokCard.tsx

@@ -1,5 +1,6 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import {
+  Box,
   Card,
   CardActionArea,
   CardActions,
@@ -9,7 +10,6 @@ import {
   Link,
   Typography,
 } from '@mui/material';
-import { Box } from '@mui/system';
 import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';

components/storyblok/StoryblokCarousel.tsx

@@ -1,7 +1,6 @@
 import NavigateBeforeSharp from '@mui/icons-material/NavigateBeforeSharp';
 import NavigateNext from '@mui/icons-material/NavigateNext';
-import { IconButton, useMediaQuery, useTheme } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, IconButton, useMediaQuery, useTheme } from '@mui/material';
 import { SbBlokData, storyblokEditable } from '@storyblok/react';
 import NukaCarousel from 'nuka-carousel';
 import { columnStyle } from '../../styles/common';

components/storyblok/StoryblokImage.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { storyblokEditable } from '@storyblok/react';
 import Image from 'next/image';
 import { richtextContentStyle } from '../../styles/common';

components/storyblok/StoryblokQuote.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import Image from 'next/image';
 import Quote from '../common/Quote';

components/storyblok/StoryblokSpacer.tsx

@@ -1,5 +1,4 @@
-import { useTheme } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, useTheme } from '@mui/material';
 import { storyblokEditable } from '@storyblok/react';
 interface StoryblokSpacerProps {
   _uid: string;

components/storyblok/StoryblokStatement.tsx

@@ -1,5 +1,4 @@
-import { Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Typography } from '@mui/material';
 import { storyblokEditable } from '@storyblok/react';
 import { richtextContentStyle } from '../../styles/common';
 

components/storyblok/StoryblokVideo.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/system';
+import { Box } from '@mui/material';
 import { storyblokEditable } from '@storyblok/react';
 import dynamic from 'next/dynamic';
 import { YouTubeConfig } from 'react-player/youtube';

components/video/Video.tsx

@@ -1,5 +1,4 @@
-import { Box, Theme, debounce } from '@mui/material';
-import { SxProps } from '@mui/system';
+import { Box, SxProps, Theme, debounce } from '@mui/material';
 import dynamic from 'next/dynamic';
 import { Dispatch, SetStateAction, useRef, useState } from 'react';
 import { OnProgressProps } from 'react-player/base';

guards/PartnerAdminGuard.tsx

@@ -1,5 +1,4 @@
-import { Container, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Container, Typography } from '@mui/material';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useTranslations } from 'use-intl';

guards/SuperAdminGuard.tsx

@@ -1,5 +1,4 @@
-import { Container, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Container, Typography } from '@mui/material';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useTranslations } from 'use-intl';

guards/TherapyAccessGuard.tsx

@@ -1,5 +1,4 @@
-import { Container, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Container, Typography } from '@mui/material';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useTranslations } from 'use-intl';

jest.config.js

@@ -1,7 +1,8 @@
 // jest.config.js
 
 module.exports = {
-  preset: 'ts-jest',
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
   collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}', '!**/*.d.ts', '!**/node_modules/**'],
   moduleNameMapper: {
     /* Handle CSS imports (with CSS modules)

next.config.js

@@ -1,5 +1,6 @@
-/** @type {import('next').NextConfig} */
-
+/**
+ * @type {import('next').NextConfig}
+ */
 const runtimeCaching = require('next-pwa/cache');
 
 const withPWA = require('next-pwa')({
@@ -37,9 +38,6 @@ module.exports = withBundleAnalyzer(
       defaultLocale: 'en',
       localeDetection: true,
     },
-    experimental: {
-      nextScriptWorkers: true,
-    },
     async redirects() {
       return [
         {

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "resolutions": {
-    "@types/react": "18.2.43",
+    "@types/react": "^18.3.3",
     "redux": "^5.0.0"
   },
   "scripts": {
@@ -13,6 +13,7 @@
     "https:proxy": "local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
+    "type-check": "tsc",
     "format": "prettier . --write",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -24,12 +25,12 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.19",
-    "@mui/lab": "^5.0.0-alpha.155",
-    "@mui/material": "^5.14.20",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/lab": "^5.0.0-alpha.171",
+    "@mui/material": "^5.16.0",
     "@newrelic/next": "^0.7.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@storyblok/react": "^3.0.0",
@@ -39,16 +40,16 @@
     "gemoji": "^8.1.0",
     "js-cookie": "^3.0.1",
     "newrelic": "^11.8.0",
-    "next": "13.5.1",
-    "next-intl": "^2.20.0",
+    "next": "^14.2.4",
+    "next-intl": "^3.15.5",
     "next-pwa": "^5.6.0",
     "next-redux-wrapper": "^8.1.0",
     "nextjs-hotjar": "^1.2.0",
     "nuka-carousel": "^7.0.0",
     "phone": "^3.1.33",
-    "react": "18.2.0",
+    "react": "^18.3.1",
     "react-cookie-consent": "^8.0.1",
-    "react-dom": "18.0.0",
+    "react-dom": "^18.3.1",
     "react-international-phone": "^4.0.4",
     "react-player": "^2.13.0",
     "react-redux": "^9.1.2",
@@ -57,26 +58,25 @@
   "devDependencies": {
     "@builder.io/partytown": "^0.8.1",
     "@next/bundle-analyzer": "^14.0.4",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.0.2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@types/jest": "^29.5.12",
     "@types/js-cookie": "^3.0.2",
     "@types/newrelic": "^9.14.3",
-    "@types/react": "18.2.43",
-    "babel-jest": "^27.2.4",
+    "@types/react": "18.3.3",
     "cypress": "^13.2.0",
     "dotenv": "^16.0.3",
     "eslint": "8.56.0",
-    "eslint-config-next": "14.0.4",
+    "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.2.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mailslurp-client": "^15.7.5",
     "pre-commit": "^1.2.2",
     "prettier": "^3.1.1",
-    "react-test-renderer": "^17.0.2",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^29.2.0",
     "typescript": "5.3.3"
   }
 }

pages/404.tsx

@@ -1,5 +1,4 @@
-import { Button, Container, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Button, Container, Typography } from '@mui/material';
 import { GetStaticPropsContext, NextPage } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';

pages/500.tsx

@@ -1,5 +1,4 @@
-import { Button, Container, Typography } from '@mui/material';
-import { Box } from '@mui/system';
+import { Box, Button, Container, Typography } from '@mui/material';
 import { GetStaticPropsContext, NextPage } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';

tsconfig.json

@@ -21,5 +21,5 @@
     ]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", "cypress"]
+  "exclude": ["node_modules", "cypress", "./cypress.config.ts", "**/*.cy.tsx"]
 }

tsconfig.tsbuildinfo

@@ -6,12 +6,14 @@ import hasAccessToPage from './hasAccessToPage';
 const emptyPartnerAdmin: PartnerAdmin = {
   partner: null,
   id: null,
+  active: null,
   createdAt: null,
   updatedAt: null,
 };
 const partnerAdmin: PartnerAdmin = {
   partner: { name: 'Bumble' } as PartnerContent,
   id: null,
+  active: null,
   createdAt: null,
   updatedAt: null,
 };