Jest Typescript Unit Testing with Typescript and Jest

Originally published in https://muhajirframe.com/writing/unit-test-typescript-jest/

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 https://www.google.com 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.

Prerequisites

• 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', () => {
  expect(isInternalLink('https://google.com')).toBe(false)
})

test('should return true given internal link', () => {
  expect(isInternalLink('/some-page')).toBe(true)
})

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.

TL;DR

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

Congratulations!

You just did your Unit Testing with Typescript and Jest

Comments

[Kukuster]

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? :)

[Ivor Scott]

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

npm run jest

but the script is called test.

[Muhammad Muhajir]

Ah, nice find @ivorcummings . Now updated

[opensas]

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: stackoverflow.com/questions/578390...
and the public repo with the example: gitlab.com/opensas/jest-typescript
What am I doing wrong?

[opensas]

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

[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.

[Sergey S. Volkov]

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

[Muhammad Muhajir]

No problem. Have a good a day :)

[ugeshgupta000]

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.

[Cameron Townshend]

Clap for you Muhajir. Nice clean article.

[Muhammad Muhajir]

Thanks bro

[PRAGNYA-NR]

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