Easiest way to Test TypeScript using Jest by SilvenLEAF

Hey there my Js siblings! Excited to crash into TypeScript and fell madly in love? But ever wondered how to test your love? Well then fear not! Here we go again! Onto the beautiful world of Testing!!

Also stay tuned! Because on our very next blog, we'll learn some amazing DevOps stuff and integrating it with Github Actions as well!

Anyway, let's init the adventure!

---

Step 0: Begin the Project

Create a folder and open it in your favorite editor (mine VS Code). Then type this command on your project terminal

npm init -y

(It'll create a package.json file to track all the packages that you'd download and so on)

Bonus Step: Adding TypeScript

For those who are a bit lost on how to set up the environment and run the TypeScript files, check this one out TypeScript SETUP by SilvenLEAF

Well anyway, in short (for details, checkout the above link)

• install typescript

npm i typescript 

• init our tsconfig (make sure you already have typescript globally installed, if not type npm i -g typescript. And don't get it confused with the previous normal npm i typescript command)

tsc --init

(It'll create a .tsconfig file)

• install ts-node and ts-node-dev

npm i ts-node ts-node-dev

Now let's create an app.ts file and create a basic function that we'll be testing later!

Write this in the app.ts file

export const add = (num1: number, num2: number)=> {
  return num1 + num2;
};

Now that out of the way, let's leap into the beautiful world of testing!

---

Step 1: Setting up Jest

Install the following packages with the following command

npm i -D jest ts-jest @types/jest

Jest is a testing library that we'll be using here.

(npm i -D X is the short-hand for npm install --save-dev X)

Now type the following command

 npx ts-jest config:init

It'll create a jest.config.js file at the same level as package.json with the following content inside it

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

Now inside package.json, write a script named test and give it's value jest. It'll look something like this.

{
  ...other package.json stuff
  "scripts": {
    "test": "jest"
  },
  ...other package.json stuff
}

Now let's write some tests!

---

Step 2: Write some tests

Create a folder named tests at the same level as package.json. And write all your test files inside it. As you might have guessed, the name of your test files will be something like this {file_name}.test.ts

Now let's create a test file, named app.test.ts to test our app.ts file.

Write this inside app.test.ts file. Read the comments to learn in depth what each word and each line does!

// @By SilvenLEAF
import { add } from '../app';



describe('Add function Tests', () => {
  test('Adding 5 and 3 to be number 8', () => {
    expect(add(5, 3)).toBe(8)
  })

  test('Adding 7 and 2 to be string "9"', () => {
    expect(add(7, 2)).toBe('9')
  })

  test('Adding 3 and 2 to be 5', () => {
    expect(add(3, 2)).toBe(5)
  })
})


/*
---------------------------------------
   Let's learn how to write a test
---------------------------------------
  METHOD 1:

  test("Your Test Name", ()=>{
    expect(something).toBe(something)
  })

  [OR]

  METHOD 2:

  it("Your Test Name", ()=>{
    expect(something).toBe(something)
  })


---------------------------------------
.  Modularizing your tests collection
---------------------------------------

  describe('your test module name', () => {
    // inside here you'll write the tests for this module, you can use both test() or it(())
    test('if it does this thing', () => { expect(something).toBe(something) });
    test('if it does the other thing', () => { expect(something).toBe(something) });
  });

  [OR]

  describe('your test module name', () => {
    // inside here you'll write the tests for this module, you can use both test() or it(())
    it('if it does this thing', () => { expect(something).toBe(something) });
    it('if it does the other thing', () => { expect(something).toBe(something) });
  });

---------------------------------------
.      With love from SilvenLEAF
---------------------------------------
*/

---

Step 3: Let's test our tests

Yep, sounds weirdly amazing! So let's do this! Type any of the 3 commands to run our tests.

1. npm run test
2. npm test
3. npm t

All of these do the same thing. One is the short-hand of other and vise versa! Anyway, let's run it. You might see something like this:

Congrats!! We just tested our beloved love TypeScript!! So sweet!

---

Stay tuned for more! Because we are gonna dive onto the DevOps world on our following blogs! We'll learn CI, CD, Github Actions, Automations and many many MORE!!

What's NEXT?

1. How to deploy in the Cloud (Azure VMs)

2. Learning DevOps with Github Actions

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Sequelize Hooks

7. How to create an Android APP with NO XP

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io