Setting Up Jest in TypeScript: A Step-by-Step Guide

Jest is a powerful testing framework for JavaScript and TypeScript projects. It provides an easy-to-use interface for writing tests and comes with a variety of features that make testing your codebase efficient and effective. In this guide, we’ll walk through the process of setting up Jest in a TypeScript project from scratch.

What we are doing?

1. Setup Node.js Project
   - Initialize project with pnpm.
2. Add TypeScript Support
   - Install TypeScript and necessary dependencies.
   - Configure tsconfig.json.
3. Add Jest and its type definitions
   - Install Jest and initialize configuration.
4. Integrate ts-jest
   - Configure Jest to work seamlessly with TypeScript.
5. Writing Tests

Step 1: Setup Node.js Project

First, let’s initialize a new project using pnpm:

pnpm init

Step 2: Add TypeScript Support

Now, let’s add TypeScript support to our project by installing the necessary packages:

pnpm add -D typescript ts-node-dev @types/node

Next, generate a tsconfig.json file:

pnpm tsc -init

Make sure to modify tsconfig.json to include:

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ESNext",
    "outDir": "dist",
    "esModuleInterop": true
},
  "include": ["src/**/*"]
}

Step 3: Add Jest and its type definitions

Let’s add Jest to our project. Also, ensure Jest understands TypeScript types by installing necessary type definitions.

pnpm add -D jest @types/jest

Initialize Jest configuration:

pnpm jest --init

You will be asked some prompt questions, follow the prompts, and adjust the configurations based on your project requirements.

I have attached my configuration in the image below.

Step 4: Integrate ts-jest

To seamlessly integrate TypeScript with Jest, install ts-jest:

pnpm add -D ts-jest

Optional: You can initialize the configuration if needed and copy its content to jest.config.ts :

pnpm ts-jest config:init

Modify jest.config.ts to include:

import type { Config } from "jest";
const config: Config = {
  preset: "ts-jest",
};
export default config;

Writing Tests

Create a folder tests in your root directory. And create files isEven.ts and isEven.test.ts inside the tests folder. This is optional, you can create the file anywhere, but just make sure the test file has the extension .test.ts

Now that we have Jest set up in our TypeScript project, let’s write a simple test.

isEven.ts

export function isEven(num: number): boolean {
  return num % 2 === 0;
}

isEven.test.ts

import { isEven } from './isEven';

describe('isEven', () => {  

  it('should return true for even numbers', () => {
    const evenNumber = 10;

    const result = isEven(evenNumber);

    expect(result).toBe(true);
  });

  it('should return false for odd numbers', () => {
    const oddNumber = 7;

    const result = isEven(oddNumber);

    expect(result).toBe(false);
  });

  it('should return true for zero', () => {
    const zero = 0;

    const result = isEven(zero);

    expect(result).toBe(true);
  });

});

Now let us run our test :

pnpm test

You will get output like below, and see if the test is passed or failed.

Conclusion

In this guide, we’ve successfully set up Jest in a TypeScript project, allowing us to write and run tests for our codebase. By following these steps, you can ensure your TypeScript projects are well-tested and maintainable. Happy testing!

I have attached the boilerplate GitHub repo here.

For those interested in further exploration, stay tuned for my upcoming story where we’ll delve into writing tests for a Todo CRUD application built with Node.js and Express.js. We’ll cover how to test endpoints, handle database operations, and ensure the reliability of your RESTful APIs. Until then, keep coding and testing!