Setup Jest in a typescript React project

1. Install React testing library dependencies
run the following command to install React testing library dependencies (as dev dependencies)

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/dom @testing-library/user-event

if you prefer yarn

yarn add --dev @testing-library/react @testing-library/jest-dom @testing-library/dom @testing-library/user-event

2. Install Jest dependencies
run the following command to install jest dependencies (as a dev dependecies)

npm install --save-dev jest jest-environment-jsdom ts-jest @types/jest

if you prefer yarn

yarn add --dev jest jest-environment-jsdom ts-jest ts-node @types/jest

jest: Jest is a delightful JavaScript testing framework with a focus on simplicity. Jest will be used as the testing framework for your project. It allows you to write and run tests to ensure your code behaves as expected.
jest-environment-jsdom: Jest environment for JSDOM. JSDOM is a JavaScript implementation of the DOM (Document Object Model) that allows you to interact with HTML elements in a Node.js environment. Jest uses JSDOM to simulate a browser-like environment when running tests.
ts-jest: A TypeScript preprocessor with source map support for Jest. ts-jest allows Jest to understand TypeScript files and compile them before running tests. It ensures that your TypeScript code can be tested properly within the Jest environment.
ts-node: TypeScript execution and REPL for Node.js, with source map support. ts-node allows you to execute TypeScript files directly in Node.js without the need for precompilation. It's commonly used during development to run TypeScript code seamlessly.
@types/jest: TypeScript type definitions for Jest. These type definitions provide TypeScript with information about the Jest API, allowing for better type checking and editor support when writing Jest tests in TypeScript.

3. Configure Jest
Create a file named jest.config.ts in the root folder and add the following code configuration.

export { };
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts',
    '!**/vendor/**'],
  coverageDirectory: 'coverage',
  testEnvironment: 'jsdom',
  transform: {
    ".(ts|tsx)": "ts-jest"
  },

  coveragePathIgnorePatterns: [
    "/node_modules/",
    "/coverage",
    "package.json",
    "package-lock.json",
    "reportWebVitals.ts",
    "setupTests.ts",
    "index.tsx"
  ],
}

4.Integrate Jest with React testing Library
in the root folder create a file named jest.setup.tsenter the following line of code

import '@testing-library/jest-dom'
this means that we are importing everything from @testing-library/jest-dom package
in the jest.config.ts file we created earlier add another field of setupFilesAfterEnv

export { };
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts',
    '!**/vendor/**'],
  coverageDirectory: 'coverage',
  testEnvironment: 'jsdom',
  transform: {
    ".(ts|tsx)": "ts-jest"
  },

  coveragePathIgnorePatterns: [
    "/node_modules/",
    "/coverage",
    "package.json",
    "package-lock.json",
    "reportWebVitals.ts",
    "setupTests.ts",
    "index.tsx"
  ],
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};

that's how we setup Jest in Typescript React applications!!
Happy Testing!!

-Abhishek