DEV Community

Muhammad Muhajir
Muhammad Muhajir

Posted on • Updated on

Jest Typescript Unit Testing with Typescript and Jest

vscode-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

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

Let's continue.
vscode-jest

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

Top comments (12)

Collapse
 
kukuster profile image
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? :)

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

Collapse
 
muhajirdev profile image
Muhammad Muhajir • Edited

Ah, nice find @ivorcummings . Now updated

Collapse
 
opensas profile image
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?

Collapse
 
opensas profile image
opensas

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

Collapse
 
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!

Collapse
 
muhajirdev profile image
Muhammad Muhajir

No problem. Have a good a day :)

Collapse
 
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.
Collapse
 
ugeshgupta000 profile image
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.

Collapse
 
ctownshend profile image
Cameron Townshend

Clap for you Muhajir. Nice clean article.

Collapse
 
muhajirdev profile image
Muhammad Muhajir

Thanks bro

Collapse
 
pragnyanr profile image
PRAGNYA-NR

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