Everything up to date all jest tests pass but the react App still won't start there are a few errors

Author: Solodt55

package.json

@@ -3,7 +3,7 @@
   "description": "build web extension bundle.js",
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production",
-    "dev": "set NODE_OPTIONS=--openssl-legacy-provider&& webpack --mode development --watch",
+    "dev": " webpack --mode development --watch",
     "buildlegacy": "webpack --mode production",
     "devlegacy": "webpack --mode development --watch",
     "test": "jest --verbose --coverage",
@@ -125,7 +125,7 @@
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.21.5",
     "@inrupt/jest-jsdom-polyfills": "^1.6.2",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/chai": "^4.2.14",
@@ -135,26 +135,24 @@
     "@types/jest": "^29.5.0",
     "@types/lodash.isequal": "^4.5.5",
     "@types/node": "^14.0.0",
-    "@types/react": "^17.0.43",
+    "@types/react": "^18.2.0",
     "@types/react-router": "^5.1.20",
-    "@typescript-eslint/eslint-plugin": "^3.6.1",
-    "@typescript-eslint/parser": "^3.6.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "babel-loader": "^8.1.0",
     "babel-preset-airbnb": "^5.0.0",
     "core-js": "^3.6.5",
     "css-loader": "^3.6.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^8.36.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^22.21.0",
-    "eslint-plugin-jest-dom": "^4.0.3",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "eslint-plugin-testing-library": "^5.10.3",
-    "express": "^4.17.1",
+    "eslint": "^8.55.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.0.0",
+    "eslint-plugin-jest-dom": "^5.0.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "express": "^4.18.2",
     "jest": "^29.5.0",
     "jest-cli": "^26.1.0",
     "jest-diff": "^26.1.0",
@@ -164,8 +162,8 @@
     "prettier": "2.8.4",
     "puppeteer": "^14.3.0",
     "react-devtools-core": "^4.27.3",
-    "sass": "^1.26.10",
-    "sass-loader": "^7.3.1",
+    "sass": "^1.69.5",
+    "sass-loader": "^10.5.0",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^0.23.1",
     "ts-jest": "^29.0.5",
@@ -174,38 +172,37 @@
     "typedoc": "^0.5.0",
     "typedoc-webpack-plugin": "^1.1.4",
     "typescript": "^4.9.0",
-    "webpack": "^4.43.0",
-    "webpack-chrome-extension-reloader": "^1.3.0",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.12",
     "@mui/system": "^5.14.12",
-    "@reduxjs/toolkit": "^1.9.6",
-    "@types/react-dom": "^17.0.14",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@types/react-dom": "^18.2.0",
     "@types/react-router-dom": "^5.3.3",
-    "@visx/axis": "^1.0.0",
-    "@visx/brush": "^1.2.0",
-    "@visx/clip-path": "^1.0.0",
-    "@visx/event": "^1.0.0",
-    "@visx/glyph": "^1.0.0",
-    "@visx/gradient": "^1.0.0",
-    "@visx/grid": "^1.0.0",
-    "@visx/group": "^3.0.0",
-    "@visx/hierarchy": "^1.0.0",
-    "@visx/legend": "^1.0.0",
-    "@visx/responsive": "^1.0.0",
-    "@visx/scale": "^1.0.0",
-    "@visx/shape": "^3.0.0",
-    "@visx/text": "^3.0.0",
-    "@visx/tooltip": "^1.0.0",
-    "@visx/zoom": "^1.0.0",
+    "@visx/axis": "^3.5.0",
+    "@visx/brush": "^3.6.0",
+    "@visx/clip-path": "^3.3.0",
+    "@visx/event": "^3.3.0",
+    "@visx/glyph": "^3.3.0",
+    "@visx/gradient": "^3.3.0",
+    "@visx/grid": "^3.5.0",
+    "@visx/group": "^3.3.0",
+    "@visx/hierarchy": "^3.3.0",
+    "@visx/legend": "^3.5.0",
+    "@visx/responsive": "^3.3.0",
+    "@visx/scale": "^3.5.0",
+    "@visx/shape": "^3.5.0",
+    "@visx/text": "^3.3.0",
+    "@visx/tooltip": "^3.3.0",
+    "@visx/zoom": "^3.3.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
-    "apexcharts": "^3.23.1",
+    "apexcharts": "^3.44.2",
     "d3": "^7.6.1",
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^2.0.0",
@@ -219,17 +216,17 @@
     "prop-types": "^15.7.2",
     "rc-slider": "^8.7.1",
     "rc-tooltip": "^3.7.3",
-    "react": "^18.0.0",
-    "react-apexcharts": "^1.3.7",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
     "react-dom": "^18.2.0",
-    "react-hover": "^2.0.0",
-    "react-html-parser": "^2.0.2",
-    "react-json-tree": "^0.11.2",
-    "react-redux": "^8.1.3",
-    "react-router-dom": "^5.2.0",
-    "react-select": "^3.2.0",
-    "react-spinners": "^0.11.0",
-    "redux": "^4.2.1",
+    "react-hover": "^3.0.1",
+    "html-react-parser": "^5.0.7",
+    "react-json-tree": "^0.18.0",
+    "react-redux": "^9.0.4",
+    "react-router-dom": "^6.21.0",
+    "react-select": "^5.8.0",
+    "react-spinners": "^0.13.8",
+    "redux": "^5.0.0",
     "redux-mock-store": "^1.5.4",
     "styled-components": "^6.0.4",
     "util": "^0.12.4",

src/app/__tests__/ActionContainer.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import ActionContainer from '../containers/ActionContainer';
 import TravelContainer from '../containers/TravelContainer';
 import { Provider } from 'react-redux';

src/app/__tests__/ButtonContainer.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { TextEncoder } from 'util';
 global.TextEncoder = TextEncoder;
 import ButtonsContainer from '../containers/ButtonsContainer';

src/app/__tests__/ErrorContainer.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render as rtlRender, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import '@testing-library/jest-dom'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
 import ErrorContainer from '../containers/ErrorContainer';
 import { configureStore } from '@reduxjs/toolkit';
 import { mainSlice } from '../slices/mainSlice';

src/app/__tests__/ErrorMsg.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import '@testing-library/jest-dom'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
 import ErrorMsg from '../components/ErrorMsg';
 
 const props = {

src/app/__tests__/Loader.test.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import '@testing-library/jest-dom'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
 import Loader from '../components/Loader';
 
 describe('unit testing for Loader.tsx', () => {
   test('renders a loading icon', () => {
     const { container } = render(<Loader loading={true} result={false} />);
-    expect(container.firstChild).toHaveClass('css-1tm071a');
+    console.log('this is our container.firstChild: ', container.firstChild);
+    expect(container.firstChild).toHaveClass('docs-story css-kdwx3d');
   });
 
   test('renders a fail icon', () => {
     const { container } = render(<Loader loading={false} result={false} />);
+    console.log('this is a fail2: ', container.getElementsByClassName('fail')[0]);
     expect(container.getElementsByClassName('fail').length).toBe(1);
   });
 

src/app/__tests__/MainSlider.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render as rtlRender, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import MainSlider from '../components/MainSlider';
 import { mainSlice } from '../slices/mainSlice';
 import { Provider } from 'react-redux';

src/app/__tests__/TravelContainer.test.tsx

@@ -7,7 +7,7 @@ import { mainSlice } from '../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../components/theme';
-import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import '@testing-library/jest-dom'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
 
 const customTabs = {
   87: {

src/app/__tests__/TravelForwardBackward.test.tsx

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 import { mainSlice } from '../slices/mainSlice';
 import { useDispatch } from 'react-redux';
-import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import '@testing-library/jest-dom'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
 
 const customTabs = {
   87: {

src/app/__tests__/Tutorial.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { TextEncoder } from 'util';
 global.TextEncoder = TextEncoder;
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import Tutorial from '../components/Tutorial';
 
 const dispatch = jest.fn();