Testing setup with jest and RTL

.eslintrc.cjs

@@ -1,15 +1,15 @@
 module.exports = {
-  env: { browser: true, es2020: true },
+  env: { browser: true, es2020: true, node: true, jest: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
   },
-}
+};

babel.config.cjs

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

jest-setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package.json

@@ -7,21 +7,36 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.0.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
     "vite": "^4.3.2"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest-setup.js"
+    ]
   }
-}
+}

src/App.jsx

@@ -1,6 +1,7 @@
 import { createContext, useEffect, useState } from "react";
 import ProductsPage from "./ProductsPage/ProductsPage";
 import Cart from "./Cart/Cart";
+import { getProducts } from "./api/api";
 import "./App.css";
 
 export const CartContext = createContext();
@@ -10,8 +11,7 @@ function App() {
   const [cartItems, setCartItems] = useState([]);
 
   const fetchProducts = async () => {
-    const data = await fetch("https://dummyjson.com/products");
-    const resp = await data.json();
+    const resp = await getProducts("https://dummyjson.com/products");
     setProducts(resp.products.map((item) => ({ ...item, addedToCart: false })));
   };
 

src/App.test.js

@@ -0,0 +1,3 @@
+test("that jest is working", () => {
+  expect(true).toBe(true);
+});

src/api/api.js

@@ -0,0 +1,5 @@
+export async function getProducts(url) {
+  const res = await fetch(url);
+  const data = await res.json();
+  return data;
+}