Skip to content
/ react-ts-jest-vite Public template

Template for React with Jest and Typescript with Vite

Notifications You must be signed in to change notification settings

mishaszu/react-ts-jest-vite

Repository files navigation

init vite template:

yarn create vite@latest app-name --template react-ts

init jest template:

yarn add -D jest
yarn add -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
yarn add -D @babel/preset-react @babel/preset-typescript @babel/preset-env
yarn add -D identity-obj-proxy

^ from here

init jest with:

jest --init

init files:

configure babel file with:

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

configure ts file with:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "./jest-setup.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

configure jest.config.ts with:

export default {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
  testEnvironment: "jsdom",
};

configure jest-setup.ts with:

import '@testing-library/jest-dom'

About

Template for React with Jest and Typescript with Vite

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published