[Jest setup]: Adding jest setup for the project

.husky/pre-push

@@ -1,3 +1,3 @@
 yarn lint:staged
 yarn prettier:staged
-yarn test:staged
+yarn test

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@babel/preset-env'],
+};

jest.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+    preset: 'ts-jest',
+    verbose: true,
+    globals: {
+        'ts-jest': {
+            isolatedModules: true,
+        },
+    },
+    roots: ['./'],
+    testEnvironment: 'jsdom',
+    collectCoverageFrom: ['src/*.tsx', 'src/**/*.tsx'],
+    moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+    moduleDirectories: ['node_modules', 'src'],
+    moduleNameMapper: {
+        '\\.(css|less)$': 'identity-obj-proxy',
+        '@store/slice': '<rootDir>/src/store/slice',
+        '@store': '<rootDir>/src/store',
+        '@components': '<rootDir>/src/components',
+        '@selectors': '<rootDir>/src/store/selectors',
+    },
+    transform: {
+        '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
+    },
+    // coverageThreshold: {
+    //   global: {
+    //     branches: 80,
+    //     functions: 80,
+    //     lines: 80,
+    //     statements: -10,
+    //   },
+    // },
+};

makefile

@@ -1,9 +1,8 @@
 .PHONY: coverage
 coverage:
 	echo "Running coverage tests"
-	yarn test -- --coverage --watchAll=false
-	open -a Firefox http://localhost:3000
-	serve -s coverage/lcov-report
+	yarn test:coverage
+	open -a "Google Chrome" coverage/lcov-report/index.html
 
 .PHONY: branch-clean
 branch-clean:

package.json

@@ -4,10 +4,6 @@
     "private": true,
     "dependencies": {
         "@supabase/supabase-js": "^2.39.3",
-        "@testing-library/jest-dom": "^5.17.0",
-        "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^27.5.2",
         "@types/node": "^16.18.73",
         "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
@@ -27,7 +23,9 @@
     "scripts": {
         "start": "craco start",
         "build": "craco build",
-        "test": "craco test",
+        "test": "jest --config jest.config.js",
+        "test:coverage": "jest --config jest.config.js --coverage ",
+        "test:craco": "craco test --silent --watchAll=false",
         "test:staged": "craco test --watchAll=false",
         "eject": "craco eject",
         "prettier:write": "prettier --write .",
@@ -56,7 +54,18 @@
         ]
     },
     "devDependencies": {
+        "@babel/core": "^7.24.5",
+        "@babel/preset-env": "^7.24.5",
+        "@babel/preset-typescript": "^7.24.1",
         "@craco/craco": "^7.1.0",
+        "@craco/types": "^7.1.0",
+        "@jest/globals": "^29.7.0",
+        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "@types/jest": "^29.5.12",
+        "babel-core": "^7.0.0-bridge.0",
+        "babel-jest": "^29.7.0",
         "@types/mysql": "^2.15.25",
         "babel-plugin-module-resolver": "^5.0.0",
         "daisyui": "^4.6.0",
@@ -66,7 +75,20 @@
         "eslint-plugin-n": "^16.6.2",
         "eslint-plugin-promise": "^6.1.1",
         "husky": "^9.0.11",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "prettier": "3.2.5",
-        "tailwindcss": "^3.4.1"
+        "tailwindcss": "^3.4.1",
+        "ts-jest": "^29.1.2"
+    },
+    "jest": {
+        "collectCoverage": true,
+        "coverageReporters": [
+            "lcov"
+        ],
+        "collectCoverageFrom": [
+            "src/**/*.ts*"
+        ],
+        "coverageDirectory": "./"
     }
 }

src/__tests__/App.test.tsx

@@ -1,10 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import App from '../App';
 
 test('renders learn react link', () => {
-    render(<App />);
+    const { container } = render(<App />);
 
-    expect(screen).toMatchSnapshot();
-    // const linkElement = screen.getByText(/learn react/i);
-    // expect(linkElement).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
 });

src/__tests__/__snapshots__/App.test.tsx.snap

@@ -1,56 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders learn react link 1`] = `
-Object {
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "logTestingPlaygroundURL": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-}
-`;
+exports[`renders learn react link 1`] = `<div />`;

tsconfig.json

@@ -3,21 +3,22 @@
     "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
-        "allowSyntheticDefaultImports": true,
-        "noFallthroughCasesInSwitch": true,
         "allowJs": true,
         "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
-        "esModuleInterop": true,
+        "noFallthroughCasesInSwitch": true,
         "module": "esnext",
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
-        "jsx": "preserve",
+        "noEmit": true,
+        "jsx": "react-jsx",
         "incremental": true,
-        "types": ["jest"],
-        "noEmit": true
+        "types": ["jest"]
     },
-    "exclude": ["node_modules"]
+    "exclude": ["node_modules"],
+    "include": ["src/**/*", "test/**/*"]
 }