configure jest as test framework, and add some test code

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/button.test.tsx

@@ -0,0 +1,16 @@
+import {cleanup, fireEvent, render, screen} from '../../utils/test/test.utils';
+import Button from './button.component';
+
+// Note: running cleanup afterEach is done automatically for you in @testing-library/[email protected] or higher
+// unmount and cleanup DOM after the test is finished.
+afterEach(cleanup);
+
+it('button with specific text exit', async () => {
+  const {getByText} = render(
+    <Button>TEST</Button>,
+  );
+
+  expect(await screen.findByText("TEST")).toBeTruthy();
+  fireEvent.click(getByText(/test/i));
+
+});

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};