DEV Community

Cover image for Configuring Jest for Typescript Unit Tests
Felix Owino
Felix Owino

Posted on • Updated on

Configuring Jest for Typescript Unit Tests

Jest is a unit testing library for JavaScript. Testing JavaScript code with Jest is straightforward and doesn't require any additional configuration. When testing Typescript code without compiling it to JavaScript first, a few configurations are required. There are two ways for setting up Jest for Typescript unit test; via Babel or ts-jest. Babel is a popular multipurpose transpiler for JavaScript. ts-jest is an extension of the Typescript compiler tailored to work with Jest. In this article, we will explore and demonstrate how to configure Jest to test Typescript code via ts-jest.

To create a Typescript and Jest testing environment, we will execute the following sequence of activities:

  1. Create an initialized working directory.
  2. Install Typescript.
  3. Configure Typescript.
  4. Install Jest and its related dependencies.
  5. Configure Jest for Typescript.
  6. Edit package.json test script.
  7. Try it out.

Let us start by creating an npm-initialized working directory.

1. Create an initialized working directory.

In this step, we will create a directory called jest-ts-tests and initialize it as a node project directory.

Create a directory named ts-jest-env and run

npm init 
Enter fullscreen mode Exit fullscreen mode

to generate package.json file

By executing the above instructions, we now have a directory ready for use. Let us go and install Typescript in the next step.

2. Install Typescript

In the previous step, we created a directory for us to work on. In this step, we will install Typescript as a development dependency as follows.

Run npm i -D typescript
Enter fullscreen mode Exit fullscreen mode

We have successfully installed Typescript, let us configure it in the next step.

3. Configure Typescript

We will install ready-to-use Typescript base configurations instead of starting from scratch. In this article, we will use Typescript base configurations for node version 20. If you are using a different version of node, visit the tsconfig bases docs to find out what you need. You can also create a Typescript configuration file with settings that work for you.

Run the following command to install base Typescript configurations for node version 20.

npm i -D @tsconfig/node20
Enter fullscreen mode Exit fullscreen mode

Create a tsconfig.json file and paste the following configs.

{
  "extends": "@tsconfig/node20/tsconfig.json",
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 20",
  "_version": "20.1.0",

  "compilerOptions": {
    "lib": ["es2023"],
    "module": "node16",
    "target": "es2022",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node16",
    "outDir": "./build",
    "rootDir": "./src"
  },
  "include": ["src/**/*.ts"]
}

Enter fullscreen mode Exit fullscreen mode

4. Install Jest and related dependencies.

We are now ready to write Typescript code. In this step, we will install Jest and all the necessary dependencies related to it.

Run the following command to install Jest and the other dependencies.

npm i -D jest ts-jest @types/jest @jest/globals
Enter fullscreen mode Exit fullscreen mode

We need ts-jest to compile Typescript for Jest and @jest/globals to provide Jest global global utilities for typescript.

5. Configure Jest for Typescript

Here, we tell Jest to execute .ts files with ts-jest. To complete this configuration, we will generate a Jest configuration file with ts-jest presets using the following command.

npx ts-jest config:init
Enter fullscreen mode Exit fullscreen mode

Executing the above command generates a jest.config.js file with ts-jest as a preset.

Well done, let us edit our npm test scripts in the next step.

6. Edit package.json test script.

We want to be able to run tests easily by using a simple npm command. To enable the command, edit the scripts object of package.json as follows:

 "scripts": {
    "test": "jest --watch",
}
Enter fullscreen mode Exit fullscreen mode

The setting above allows us to run tests using the npm test command. The --watch flag tells Jest to run tests every time our code changes.

Next, we proceed to the actual testing to find and verify our configurations.

7. Try it out.

Up to this point, we have installed all the required dependencies for testing Typescript with Jest. Here, we will write a simple function and test it to verify that our configurations are on point.

Create an index.ts file and export a simple function that you want to test. Do not finish the implementation of the function until you write a failing test.

For example: A sum function,

export const sum(num1: number, num2: number): number =>{

}
Enter fullscreen mode Exit fullscreen mode

Create index.test.ts and import sum.

index.test.ts

import {sum} from `index`
Enter fullscreen mode Exit fullscreen mode

Import Jest globals.

index.test.ts

import {sum} from `index`
import { describe, test, expect } from "@jest/globals"
Enter fullscreen mode Exit fullscreen mode

Write test.

index.test.ts

import {sum} from `index`
import { describe, test, expect } from "@jest/globals"

describe('Sum function', () =>{
    test('Returns correct value', () =>{
        expect(sum(2, 3)).toEqual(5)
    })
})
Enter fullscreen mode Exit fullscreen mode

Run the following command to begin your tests:

npm test
Enter fullscreen mode Exit fullscreen mode

Edit your sum function until your test passes.

Congratulations! That's the end of configuring Jest for Typescript unit tests. We have created a working test environment for testing Typescript code using Jest and ts-jest. The resultant directory is available on this GitHub repository. If you are interested in learning other ways of testing typescript code with Jest, feel free to visit the document on using Jest with typescript.

Top comments (4)

Collapse
 
therealseanwallace profile image
Sean Wallace • Edited

Felix, you're the MVP; I wrestled with TypeScript and Jest for hours before I found your guide. Thanks!

Edit: And you're from TOP too!! My man!

Collapse
 
masekere profile image
Gift Masekere

Thanks man for sharing such useful tutorial

Collapse
 
izzy678 profile image
Izzy678

amazing stuff man

Collapse
 
iainelder profile image
Iain Samuel McLean Elder

Thanks for sharing.

There's something missing for me from these steps. When I follow them I get this error:

index.test.ts:1:21 - error TS1141: String literal expected.

I use a single quote instead of a backtick to fix that problem.

The next problem I don't know how to solve.

index.test.ts:1:21 - error TS2307: Cannot find module 'index' or its corresponding type declarations.

When I clone your GitHub repo it works without modifications. I just need to run npm install and npm test.

What is the essential difference between these steps and that repo?