Guide - Setting Up Jest for Unit Testing in a TypeScript React Project

Recently, I got a chance to work on my first typescript project, and my first task was to set up unit test cases. At first glance, it seemed simple enough. I started following random documentation and ChatGPT suggestions, only to end up with a mess. If you’ve experienced GPT giving a solution only to later suggest removing it, you’ll relate to my frustration.

After countless docs, GitHub issues, and a little frustration, I finally cracked the code and set up a clean, robust unit testing environment. 🎉

And then I thought, “Why not document this to save future-me and fellow devs from the same struggle?” So, here it is:

Here, I’ve written one more comprehensive guide on the internet to help fellow developers set up their first unit test environment in a TypeScript project—the right way.

---

Step 1: Install Required Libraries

Start by installing the necessary libraries to set up a Jest environment:

npm install -D @types/jest @types/react-dom @types/react ts-jest typescript @testing-library/jest-dom @testing-library/react

---

Step 2: Initialize tsconfig.json

Run the following command to create a tsconfig.json file in your project’s root directory:

ts-jest config:init

---

Step 3: Configure tsconfig.json

Replace the content of your tsconfig.json file with the following configuration:

{
  "compilerOptions": {
   "types": ["@testing-library/jest-dom", "node", "jest"],
    "module": "commonjs",
    "target": "es6",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "jsx": "react",  
    "lib": ["es2019", "dom"]  
  },
  "include": ["./src/**/**.*", "src/*.ts", "src/setupTests.tsx"]
  "exclude": ["node_modules"]
}

---

Step 4: Configure Jest

Replace the content of your jest.config.js file with the following:

module.exports = {
  testEnvironment: "jest-environment-jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.tsx"], // Update the path if your setupTests file is located elsewhere
  transform: {
    "^.+\\.tsx?$": "babel-jest", // Or ts-jest if you're using ts-jest
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
};

Next, create a setupTests.tsx file in your src folder and add the following:

import "@testing-library/jest-dom";

---

Step 5: Write Test Cases

Create a test file, e.g., YourComponent.test.tsx, in your project’s tests folder. This is where you’ll write your unit test cases.

---

Step 6: Run Tests

Run the following command to execute your tests:

npm test

Personal Note - When you are working with Typescript you will see this below error

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'

To resolve I have already added configuration in the above code but If you still see the issue then

• Try importing this library @testing-library/jest-dom in all your test files.

• Make sure that you have the correct Babel configuration.

---

Notes

• Remember, this guide focuses on setting up the environment; you’ll need to figure out how to write the actual test cases based on your application.

I hope this guide saves you the frustration I faced. Happy testing! 🚀

Comments

[Kasope Johnson]

Good one
In 2025 I'd definitely recommend using vite & vitest, especially if it's a new project. Very minimal configuration needed and transpiles typescript out of the box

[Rakhi Singh]

That's correct, vite needs minimal configuration. But for large production-ready code does Vite give the dev option to configure according to need, I am trying to understand and a new post on that will be soon published.

[Kasope Johnson]

yes, you can use the devServer option.. if I remember correctly it supports dev mode https (with your provided cert path), preferred port setting and much more

It works out of the box, but if you want you can configure a lot, including rollup options (which it uses behind the scenes), for instance for custom chunk strategies