Setting Up a React + TypeScript + JEST Project with Create React App (No Headaches!)

Lavz — Sun, 02 Feb 2025 15:55:29 +0000

When I decided to start a new React project with TypeScript and Jest, I thought it would be as simple as running npx create-react-app my-app --template typescript and diving right into coding. Boy, was I wrong! 😅

I ran into some library version conflicts and had to tweak a few configurations before everything worked smoothly. To save you from the same frustration, I’m sharing my step-by-step setup process. If you’re in a hurry, you can skip to the end and clone the GitHub repository with the initial project setup.

Let’s get started!

Step 1: Create the React App with TypeScript

Run the following command to create your React app with TypeScript:

npx create-react-app my-app --template typescript

While this runs, go grab a coffee ☕️—it might take a few minutes.

Step 2: Resolve Dependency Conflicts

At the time of writing, create-react-app installs React version ^19.0.0, which caused a dependency conflict with @testing-library/react@13.4.0. The error looked like this:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0

You could downgrade React and React DOM to version 18 to fix this, but I decided to stick with version 19. Here’s how I made it work:

Ensure react and react-dom are both set to version 19.0.0.

Install the necessary dependencies with the following command:

npm i --save-dev @testing-library/react@16.2.0 @types/react @types/react-dom @types/jest @testing-library/jest-dom @babel/plugin-proposal-private-property-in-object
npm i --save web-vitals@4.2.4

Step 3: Configure `tsconfig.json`

Create a tsconfig.json file in the root folder with the following content:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "lib": ["DOM", "ESNext"],
        "jsx": "react-jsx",
        "strict": true,
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "types": ["react-scripts", "jest"],
        "allowSyntheticDefaultImports": true
    },
    "include": ["src"]
}

This configuration ensures TypeScript works seamlessly with React and Jest.

Step 4: Update `reportWebVitals.ts`

If you’re using web-vitals@4.2.4, you’ll need to update the reportWebVitals.ts file (inside src folder). Replace its content with the following code:

import { onCLS, onFCP, onLCP, onTTFB } from "web-vitals";

const reportWebVitals = (onPerfEntry?: (metric: any) => void) => {
    if (onPerfEntry && onPerfEntry instanceof Function) {
        onCLS(onPerfEntry);
        onFCP(onPerfEntry);
        onLCP(onPerfEntry);
        onTTFB(onPerfEntry);
    }
};

export default reportWebVitals;

Step 5: You’re All Set! 🎉

Now you’re ready to start coding! To run your application, use:

npm run start

And to run your tests, use:

npm run test

GitHub Repository

If you want to skip all the setup and dive right into the code, you can clone the repository here:

👉 GitHub Repo: React with TypeScript and Jest

Final Thoughts

Setting up a React + TypeScript project isn’t always as straightforward as it seems, especially when dealing with dependency conflicts. But once you’ve got everything configured, it’s smooth sailing from there. I hope this guide saves you some time and frustration!

If you have any questions or run into issues, feel free to leave a comment below. Happy coding! 🚀

DEV Community: Lavz