vite + react + @swc/jest

.__init.md

yarn create vite

._dev-dependencies.md

yarn add --dev @swc/core @swc/jest @testing-library/jest-dom @testing-library/react @types/jest eslint eslint-config-prettier eslint-plugin-jest-dom eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library jest prettier

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "settings": {
    "react": {
      "version": "latest"
    }
  }
}

.prettierrc.json

{
  "arrowParens": "avoid",
  "printWidth": 90,
  "singleQuote": true,
  "semi": false
}

file-transformer.js

module.exports = {
  process: () => "module.exports = 'test-file-stub'",
}

jest.config.js

module.exports = {
  clearMocks: true,
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/file-transformer.js',
    '^.+\\.(css|scss|sass|less)$': '<rootDir>/__mocks__/style-transformer.js',
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'ecmascript',
            jsx: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
        },
      },
    ],
  },
}

jest.setup.js

import '@testing-library/jest-dom/extend-expect'

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

scripts.json

{
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "test": "jest",
  "test:coverage": "jest --coverage && open coverage/lcov-report/index.html",
  "test:watch": "jest --watch"
}

style-transformer.js

module.exports = {
  process: () => 'module.exports = {}',
}

vite.config.js

import react from '@vitejs/plugin-react'
import path from 'node:path'

export default {
  plugins: [react()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
}