upgrade web-vitals, fix test cases failing to run

Author: nishkohli96

apps/react-client/package.json

@@ -25,7 +25,7 @@
     "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^4.2.3"
   },
   "devDependencies": {
     "@nish1896/eslint-config": "^2.0.5",

apps/react-client/src/App.test.tsx

@@ -1,11 +1,19 @@
-/**
- * Need to fix..failing due to redux
- */
 import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { store, persistor } from 'redux-store';
 import App from './App';
 
+const ReactApp = () => (
+  <Provider store={store}>
+    <PersistGate loading={''} persistor={persistor}>
+      <App />
+    </PersistGate>
+  </Provider>
+);
+
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
+  const { getByText } = render(<ReactApp />);
   const linkElement = getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

apps/react-client/src/index.tsx

@@ -20,7 +20,9 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+/**
+ * If you want to start measuring performance in your app, pass a function
+ * to log results (for example: reportWebVitals(console.log))
+ * or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+ */
+reportWebVitals(console.log);

apps/react-client/src/reportWebVitals.ts

@@ -1,19 +1,11 @@
-import { ReportHandler } from 'web-vitals';
-
-/**
- * getXXX() has been renamed to onXXX() in v3.
- *
- * Refer here https://www.npmjs.com/package/web-vitals
- */
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+const reportWebVitals = (onPerfEntry?: () => void) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
+    import('web-vitals').then(({ onLCP, onCLS, onINP, onFCP, onTTFB }) => {
+      onLCP(onPerfEntry);
+      onCLS(onPerfEntry);
+      onINP(onPerfEntry);
+      onFCP(onPerfEntry);
+      onTTFB(onPerfEntry);
     });
   }
 };

yarn.lock

@@ -12434,10 +12434,10 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-web-vitals@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.5.2.tgz#5bb58461bbc173c3f00c2ddff8bfe6e680999ca9"
-  integrity sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==
+web-vitals@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.3.tgz#270c4baecfbc6ec6fc15da1989e465e5f9b94fb7"
+  integrity sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==
 
 webidl-conversions@^3.0.0:
   version "3.0.1"