vite config(compatible with tird-part libs that use nodejs builtin objects such as global and process.env ), jest config, snapshot resolver, styled components, etc

jest.config.js

module.exports = {
  clearMocks: true,
  reporters: [
    "default",
    ["jest-junit", { outputDirectory: "coverage", outputName: "report.xml" }],
    ["jest-silent-reporter", { useDots: true }],
  ],
  coverageReporters: ["clover", "json", ["lcov", {}], ["text", { skipFull: true }]],
  collectCoverageFrom: ["src", "!**/*.d.ts", "!**/node_modules/**"],
  moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",

    // Handle CSS imports (without CSS modules)
    "^.+\\.(css|sass|scss|less)$": "<rootDir>/__mocks__/styleMock.js",

    // Handle image imports
    // https://jestjs.io/docs/webpack#handling-static-assets
    "^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i": `<rootDir>/__mocks__/styleMock.js`,

    // Handle module aliases
    "^components/(.*)$": "<rootDir>/src/components/$1",
    "^utils/(.*)$": "<rootDir>/src/utils/$1",
    "^constants/(.*)$": "<rootDir>/src/constants/$1",
    "^api/(.*)$": "<rootDir>/src/api/$1",
    "^models/(.*)$": "<rootDir>/src/models/$1",
    "^states/(.*)$": "<rootDir>/src/states/$1",
    "^types/(.*)$": "<rootDir>/src/types/$1",
    "^hooks/(.*)$": "<rootDir>/src/hooks/$1",
    "^assets/(.*)$": "<rootDir>/src/assets/$1",
    "^mappings/(.*)$": "<rootDir>/src/mappings/$1",
    "^form-validation-schema/(.*)$": "<rootDir>/src/form-validation-schema/$1",
  },
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/__tests__/constants"],
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    "^.+\\.(js|jsx|ts|tsx)$": [
      "babel-jest",
      {
        presets: [
          "@babel/preset-env",
          [
            "@babel/preset-react",
            {
              runtime: "automatic",
            },
          ],
          "@babel/preset-typescript",
        ],
        plugins: ["babel-plugin-styled-components"],
      },
    ],
  },
  transformIgnorePatterns: [
    `node_modules/(?!(node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)`,
    "^.+\\.module\\.(css|sass|scss|less)$",
  ],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  snapshotResolver: "<rootDir>/jest.snapshot_resolver.js",
  moduleDirectories: ["node_modules", "<rootDir>/"],
  globals: {
    "ts-jest": {
      isolatedModules: true,
    },
  },
  testEnvironment: "jsdom",
}

jest.snapshot_resolver.js

import path from "path"

const root = process.cwd()

export default {
  // resolves from test to snapshot path
  resolveSnapshotPath: (testPath, snapshotExtension) =>
    `__snapshots__/${(path.isAbsolute(testPath) ? path.relative(root, testPath) : testPath).slice(
      testPath.indexOf("src/") + 4 /* length of src/ */, 
    )}${snapshotExtension}`,

  // resolves from snapshot to test path
  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
    snapshotFilePath.replace("__snapshots__", "src").slice(0, -snapshotExtension.length),

  // Example test path, used for preflight consistency check of the implementation above
  testPathForConsistencyCheck: "src/module/example.test.js",
}

vite.config.ts

import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import svgrPlugin from "vite-plugin-svgr"
import viteTsconfigPaths from "vite-tsconfig-paths"

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  if (command === "serve") {
    if (mode === "development") {
      return {
        define: {
          global: {},
          "process.env": {},
        },
        server: {
          host: "0.0.0.0",
          port: 3000,
          strictPort: true,
        },
        plugins: [
          react({
            babel: {
              plugins: ["styled-components"],
            },
          }),
          viteTsconfigPaths(),
          svgrPlugin(),
        ],
      }
    } else {
      return {
        preview: {
          host: "0.0.0.0",
          port: 3000,
          strictPort: true,
        },
      }
    }
  } else {
    return {
      plugins: [
        react({
          babel: {
            plugins: ["styled-components"],
          },
        }),
        viteTsconfigPaths(),
        svgrPlugin(),
      ],
    }
  }
})