DEV Community

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

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

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"]
}

Rajae Robinson • Feb 4

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.