configure jest as testing framework, and add some test code

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      ['@babel/preset-react', {runtime: 'automatic'}],
+      '@babel/preset-typescript',
+    ],
+  };

package.json

@@ -34,7 +34,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -56,6 +56,12 @@
     ]
   },
   "devDependencies": {
-    "babel-plugin-macros": "^3.1.0"
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "babel-jest": "^29.4.2",
+    "babel-plugin-macros": "^3.1.0",
+    "jest": "^29.4.2",
+    "react-test-renderer": "^18.2.0"
   }
 }

src/App.js → src/App.tsx

@@ -5,6 +5,7 @@ import { useDispatch } from 'react-redux';
 import { setUser } from './store/user/user.slice';
 import Spinner from './components/spinner/spinner.component';
 import GlobalStyle from './global.styles';
+import { User } from "firebase/auth";
 
 const Home = lazy(()=>import('./routes/home/home.component'));
 const Navigation = lazy(()=>import('./routes/navigation/navigation.component'));
@@ -17,10 +18,10 @@ const App = ()=> {
 
   useEffect(() => {
     const unsubscribe = onAuthStateChangeListener((user)=>{
-      const createUser = async (user) => {
+      const createUser = async (user: User|null) => {
         if (!user) {return;}
         // console.log(user); // here can't get displayName from userAuth
-        const userSnapshot = await createUserDocumentFromAuth(user);
+        const userSnapshot = await createUserDocumentFromAuth(user, {});
         const userDoc = userSnapshot.data()
         dispatch(setUser(userDoc));
       };
@@ -34,7 +35,7 @@ const App = ()=> {
   return (
     <Fragment>
       <GlobalStyle />
-      <Suspense callback={<Spinner />}>
+      <Suspense fallback={<Spinner />}>
         <Routes>
           <Route path="/" element={<Navigation />}>
             <Route index element={<Home/>} />

src/components/button/__snapshots__/button.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`changes the class when hovered 1`] = `
+<button
+  className="sc-dkrFOg sc-eDvSVe bAenDU iJPJvM"
+>
+  Test
+</button>
+`;

src/components/button/button.test.js

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer';
+import Button, { BUTTON_TYPES }  from './button.component';
+
+it('changes the class when hovered', () => {
+  const component = renderer.create(
+    <Button buttonType={BUTTON_TYPES.inverted}>Test</Button>,
+  );
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+  }
+);

src/components/cart-icon/cart-icon.styles.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { ReactComponent as Svg } from "../../assets/shopping-bag.svg";
-// TODO: load svg, migrate to typesript
 
 export const CartIconContainer = styled.div`
   width: 45px;

src/index.js

@@ -2,10 +2,9 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { store } from './store/store';
+import { store, persistor } from './store/store';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { persistor } from './store/store';
 import { Elements } from '@stripe/react-stripe-js';
 import { stripePromise } from './utils/stripe/stripe.utils';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';

src/jest.resolver.js

@@ -0,0 +1,34 @@
+// jest.resolver.js
+module.exports = (path, options) => {
+    // Call the defaultResolver, so we leverage its cache, error handling, etc.
+    return options.defaultResolver(path, {
+      ...options,
+      // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+      packageFilter: (pkg) => {
+        const pkgNamesToTarget = new Set([
+          'rxjs',
+          '@firebase/auth',
+          '@firebase/storage',
+          '@firebase/functions',
+          '@firebase/database',
+          '@firebase/auth-compat',
+          '@firebase/database-compat',
+          '@firebase/app-compat',
+          '@firebase/firestore',
+          '@firebase/firestore-compat',
+          '@firebase/messaging',
+          '@firebase/util',
+          'firebase',
+          '@stripe/stripe-js',
+        ]);
+
+        if (pkgNamesToTarget.has(pkg.name)) {
+          // console.log('>>>', pkg.name)
+          delete pkg['exports'];
+          delete pkg['module'];
+        }
+
+        return pkg;
+      },
+    });
+  };

src/routes/categories-preview/categories-preview.component.tsx

@@ -10,7 +10,7 @@ import { selectCategoriesMap } from '../../store/categories/categories.slice';
 const CategoriesPreview = ()=> {
     const isLoading = useSelector((state: RootState) => state.categories.isLoading);
     const categoriesMap = useSelector(selectCategoriesMap);
-    console.log("categories:", categoriesMap);
+    // console.log("categories:", categoriesMap);
     return (
       <Fragment>
         {isLoading ? <Spinner /> : 

src/store/store.ts

@@ -53,7 +53,7 @@ export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
 // then run the saga
-sagaMiddleware.run(rootSaga)
+sagaMiddleware.run(rootSaga);
 
 export const persistor = persistStore(store);
 

src/utils/firebase/firebase.utils.ts

@@ -45,7 +45,7 @@ provider.setCustomParameters({
 
 export const signInWithGooglePopup = ()=> signInWithPopup(auth, provider);
 
-export const db = getFirestore(); 
+const db = getFirestore(); 
 
 export type ObjectToAdd = {
   title: string;

src/utils/test/test.utils.tsx

@@ -0,0 +1,23 @@
+import React, {ReactElement} from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import {render, RenderOptions} from '@testing-library/react';
+import { store } from '../../store/store';
+import { Provider } from 'react-redux';
+
+const AllTheProviders = ({children}: {children: React.ReactNode}) => {
+  return (
+    <BrowserRouter>
+      <Provider store={store}>
+          {children}
+      </Provider>
+    </BrowserRouter>
+  ) 
+};
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) => render(ui, {wrapper: AllTheProviders, ...options});
+
+export * from '@testing-library/react';
+export {customRender as render};