DEV Community

Effortless Testing Setup for React with Vite, TypeScript, Jest, and React Testing Library 2025

Teyim Asobo on January 28, 2024

Recently, I have been learning to write some tests in React using Jest and RTL(React Testing Library), which has been a fun and eye-opening adventu...

Read full post

Sergey Kachaliuk • Oct 11 '24

Thank for the article! Guys if you're getting an error:
"Cannot use JSX unless the '--jsx' flag is provided" then I hope this might help you(worked for me):

I am using Vite + React + TypeScript + Jest. I deleted tsconfig.app.json (comes out of the box) and tsconfig.node.json. So it's only tsconfig.json(code below). And it solved my problem with imports and jsx.

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "esModuleInterop": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src", "./jest.setup.ts"]
}

Ric Mershon • Mar 19 • Edited

Thank you Sergey! This saved me.

I made a couple changes on top of yours in order to keep the tsconfig.json | tsconfig.app.json | tsconfig.node.json configuration intact.

Modified jest.config.ts to this:

export default {
    testEnvironment: "jsdom",
    transform: {
        "^.+\\.tsx?$": [
            "ts-jest",
            { tsconfig: "tsconfig.test.json" }
        ],
    },
    moduleNameMapper: {
        "\\.(css|less|sass|scss)$": "identity-obj-proxy",
        "^@/(.*)$": "<rootDir>/src/$1"
    },
    setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

Then moved your compilerOptions from above into a new file named tsconfig.test.json.

Cheers!

Rajae Robinson • Feb 4 '24

Great post, it's definitely not straightforward to setup unit testing for a React + Vite project. I recently wrote a similar article on this as well; it covers how to setup vitest, RTL, Husky, ESLint & Prettier.