DEV Community

Muhammad Muhajir
Muhammad Muhajir

Posted on • Updated on

Jest Typescript Unit Testing with Typescript and Jest


Originally published in

In this article we'll try to cover a simple unit testing in Typescript + jest.

We're going to create a simple utility that detect whether an url is internal link or external link.
For example is an external link, while /page1 is an internal link. We're going to name the project is-internal-link, but you can name it anything.


  • NodeJS
  • VSCode + Jest plugin (Optional)

Create new directory

mkdir is-internal-link

Init npm

npm init

Install dependencies

npm install --save-dev @types/jest @types/node jest ts-jest typescript

Create jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

Create tsconfig.json

  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2015"],
    "strict": true,
    "declaration": true,
    "outDir": "dist",
    "sourceMap": true
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]

All right we're ready to write the code. Create file src/main.ts and src/main.spec.ts
Your files tree should now looks like this

├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── main.spec.ts
│   └── main.ts
└── tsconfig.json

Open it in your favorite editor. (VSCode / Atom / Sublime / etc).
I personally use VSCode

import { isInternalLink } from './main'

test('should return false given external link', () => {

test('should return true given internal link', () => {

Now there's to way to test this.

Way 1

Open your package.json. And replace it your scripts with

 "scripts": {
    "test": "jest"

Run npm run test.
Now you should see the error because we haven't implemented the code yet right?

Way 2

With your editor's plugin. I prefer this way. I'll only show it on VSCode. Your favorite editor might have it too.

Install vscode-jest

This GIF, should be self a great explanation how vscode-jest works

Let's continue.

Your VSCode might now looks like this.

Implementing the code

Let's implement our main.ts

export const isInternalLink = (link: string) => /^\/(?!\/)/.test(link)

Switch back to your main.spec.ts. You should see now the error is gone, and it turns green.

PRO TIPS: Use VSCode split editor to see the code (main.ts) and spec (main.spec.ts) at the same time.


Open main.ts on first side cmd+1 cmd+p main.ts

Open main.spec.ts on second side cmd+2 cmd+p1 main.spec.ts

Side note: I am a big fan of VSCode and Vim, And I have tons of tricks on How to Increase Your Productivity with VSCode. Let me know in the comment if you guys interested, I can write about it here


You just did your Unit Testing with Typescript and Jest

Top comments (12)

kukuster profile image

Just wanted to say that it may not work right away.
For example, in VSCode doing Ctrl+Shift+P > TypeScript: Restart TS server helps, as sometimes it fails to recognize jest, or the test file to be a module, etc.
Also, for me, with this guide, I've had my VSCode failing to recognize test and expect functions in *.ts files, showing errors, even though it worked overall with npm run test, passing these 2 tests.
What helped me is to remove test files (here: "**/*.spec.ts") from "exclude" prop in tsconfig.json. Why would you do that in the first place? :)

ivorcummings profile image
Ivor Scott

Nice article. I found it helpful, btw, in the article you say

npm run jest

but the script is called test.

muhajirdev profile image
Muhammad Muhajir • Edited

Ah, nice find @ivorcummings . Now updated

opensas profile image

I'm trying to follow your example but I get an Unexpected token { error then tring to impoet isInternalLink from main.spec.ts
Here's a question at SO:
and the public repo with the example:
What am I doing wrong?

opensas profile image

Sorry, my fault, I used jest.config.ts instead of jest.config.js... great tutorial!

justincalleja profile image
Justin Calleja

Nice post thanks! While following along, I had to add this to tsconfig.json to get it to work (after installing @types/jest):

  "types": ["node", "jest"]

Otherwise, I'd get:

Cannot find name 'test'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.
js2me profile image
Sergey S. Volkov

Thanks for this article so I currently looking for good guide of jest integration with typescript for my library! Thanks!

muhajirdev profile image
Muhammad Muhajir

No problem. Have a good a day :)

ugeshgupta000 profile image

jest.config.js is not shown in the file tree. Also, it would be nice if you explain what is the significance of various config files and their params.

ctownshend profile image
Cameron Townshend

Clap for you Muhajir. Nice clean article.

muhajirdev profile image
Muhammad Muhajir

Thanks bro

pragnyanr profile image

Awesome dude, u saved my time. TQ for posting.