Live demos are back. See Testim Mobile in action on Feb 21 | Save your spot

Mocha for TypeScript Testing: How to Get Started

Mocha is a popular JavaScript test framework that's often used for testing Node.js applications. It's a widely used testing tool…

Author Avatar
By Erin,

Mocha is a popular JavaScript test framework that’s often used for testing Node.js applications. It’s a widely used testing tool for both JavaScript and TypeScript projects. However, using Mocha with TypeScript is a little different than JavaScript because TypeScript is a typed superset of JavaScript and, thus, requires type definitions for many of its features. In this post, we’ll show you how to get started using Mocha for TypeScript testing.

Prerequisites

To follow along with this tutorial, you should have the following:

  • a basic understanding of TypeScript
  • Node.js (version 14.0.0 or newer) and npm installed on your machine
  • a code editor of your choice (we’ll be using Visual Studio Code)

Create a TypeScript Project

To create a new project named mocha-ts-demo, type the following command in your terminal or command prompt:

$ mkdir mocha-ts-demo && cd mocha-ts-demo

This creates a new directory called mocha-ts-demo and takes you inside this newly created directory. Now, initialize this as a new npm project by running the following command:

$ npm init -y

This creates a package.json file with default values. Next, to initialize TypeScript, run the following command:

$ tsc --init

This creates a tsconfig.json file inside the mocha-ts-demo directory with the default TypeScript configuration.

Install Development Dependencies for Mocha

First, make sure that you have Mocha installed. You can do this by running the following command from the terminal or command prompt:

$ npm install mocha --save-dev

The above command installs the mocha npm package globally on your machine. After installation is completed successfully, you’ll see the following screen:

Installing Mocha
Installing the mocha npm package using terminal

And if Mocha is installed correctly, you should be able to run the following Mocha command from the terminal:

$ mocha --version

After running that command, you should see the following output:

10.0.0

This verifies that Mocha was installed successfully. Next, let’s create a new project.

The next step is to install some dependencies that we’ll be using in this project. For this post, we’ll be using the following two dependencies:

  1. Chai: It’s an assertion library used with Mocha. It provides various functions to compare the actual and expected output.
  2. Sinon: It provides functions to create spies, stubs, and mocks.

To install types associated with Chai, run the following command:

$ npm install chai @types/chai --save-dev

And, similarly, to install Sinon and its associated types, run the following command:

$ npm install sinon @types/sinon --save-dev

The following command installs the types associated with Mocha.

$ npm install @types/mocha --save-dev

Next, install TypeScript by running the following command:

$ npm install --save-dev typescript

The above command installs TypeScript and ts-node as your development dependencies on your machine.

You can open the folder in Visual Studio Code or any other code editor of your choice.

Write Tests in TypeScript Using Mocha

In this section, we’ll see how to write Mocha tests to test a simple calculator function in TypeScript. The function takes two input parameters and returns the addition of those two numbers.

First, let’s create a new file named src/calculator.ts inside the mocha-ts-demo directory and add the following code to it.

// src/calculator.ts
export function addition (a: number, b: number): number {
   return a + b;
}

Now that we have the calculator function ready, let’s write the Mocha test for it. Create a new file named src/calculator.spec.ts inside mocha-ts-demo and add the following code to it:

// tests/calculator.spec.tx
import { assert } from "chai";
import { addition } from "./calculator";

describe("Calculator Tests", () => {
      it("should return 5 when 2 is added to 3", () => {
      const result = addition(2, 3);
      assert.equal(result, 5);
   });
});

In the above code, we’ve imported assert from Chai and the additional function from calculator.ts. The assert module provides various functions to compare the actual and expected output. In our case, we’re using the equal function to compare the result of the addition function with the expected value of 5.

Your folder structure should look like this:

mocha-ts-demo
├── node_modules
├── src
| └── calculator.ts
├── test
| └── calculator.spec.ts
├── package-lock.json
├── package.json
└── tsconfig.json

Now update the package.json file as below:

{
   "name": "mocha-ts-demo",
   "version": "1.0.0",
   "description": "Getting Started with Mocha for TypeScript Testing",
   "main": "index.js",
   "scripts": {
      "test": "mocha",
      "build": "tsc"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
       "chai": "^4.3.6",
       "mocha": "^10.0.0",
       "sinon": "^14.0.0",
       "@types/mocha": "^9.1.1",
       "@types/sinon": "^10.0.12",
       "@types/chai": "^4.3.1",
       "typescript": "^4.7.4"
   }
}

Execute the Tests Within an IDE

You can run the tests by executing the following command:

$ npm run build
$ npm test

If the tests are successful, you should get the following output:

Mocha Run Test
Running Mocha tests in Visual Studio Code

Create Mocks Using Sinon

You can use the Sinon library to create mocks and stubs in your TypeScript tests. In this section, we’ll see how to use Sinon to create mocks for a simple function. First, let’s create a new file named src/user.ts inside the mocha-ts-demo directory and add the following code to it:

// user.ts
export class User {
  id: number;
  name: string;
  constructor(id: number, name: string) {
     this.id = id;
     this.name = name;
  }
  public static findUser(id: number): Promise<User> {
      return new Promise((resolve, reject) => {
         // User Service REST API call to fetch User with a specific id.
         // ...
     });
  }   
}

In the user.ts file, we have a class called User. The class has two properties: id and name. We’ve also defined a constructor for the class that takes two parameters: id and name. The file also contains a static method called findUser. The function takes an ID as a parameter and returns a promise. The promise resolves to an object that contains the user data fetched from back-end User Service REST API. The code for calling the REST API is purposefully omitted for brevity.

Test Asynchronous Code With Mocks

Now that we have the findUser(id: number) function ready, let’s write the Mocha test for it. Create a new file named /test/user-service.spec.ts inside the same mocha-ts-demo project folder and add the following code to it:

import { assert } from "chai";
import sinon from "sinon";
import {User} from "../src/user";

describe("User Service Tests", () => {
   it("should return user data when id is 1", async () => {
      // create a mock for the User class
      const userMock = sinon.mock(User);

     // return a mock user when the getUser function is called with id 1
     userMock.expects("findUser").resolves(newUser(1, "John"));

     // call the findUser function
     constuser: User = awaitUser.findUser(1);

     // assert that the user id is 1
     assert.equal(user.id, 1);
  });
});

In the above code, we have imported assert object from chai and sinon object from the Sinon library. We’ve also imported the User class from the /src/user.ts file. Next we’ve created a test group called “User Service Tests” to group all test related to User Service. The it() function is used to define a test. In this case, we’re testing that the findUser function returns the correct user data when we pass it an ID of 1.

Then, the sinon.mock() function is used to create a mock for the User class. This means that we’re creating a fake User object that we can use for our tests. After that, we tell our mock what to do when its findUser function is called with an ID of 1. We tell it to return a new User object with an ID as 1 and name as John. This is done using expext().resolves(). Finally, we assert that the user ID is 1 using the assert.equal() function. If it is, then our test passes. Otherwise, it fails.

You can run your test once again using the following command (same as before):

$ npm run build
$ npm test

After your test executes successfully, you should get the following output:

Mocha Run Test View 2
Executing Mocha tests containing a Sinon mock

Conclusion

Now that you’ve learned how to write and run tests for your TypeScript code using Mocha, we encourage you to start writing tests for all of your projects. By doing so, you’ll be able to catch bugs early on and ensure that your code is working as expected. In addition, using a testing framework like Mocha will help you make sure that your code remains testable and maintainable in the long run.