Step by Step Node.js, Typescript, and Jest Project Setup with Example

By Amenallah Hsoumi - Created on January 4, 2019

In this tutorial we will learn how to set up a basic Node.js Typescript and Jest starter project, we will also test the project structure by creating a small Express app.

Installing Dependencies

First, we will create a package.json file:

> npm init -y

Then we will install the required dependencies:

> npm i -D nodemon rimraf typescript ts-node ts-jest jest @types/jest @types/node

This will install all the dependencies. Let’s go through them one by one to understand their purpose:

Nice! now that we understood what each package does, let’s go ahead and set up our scripts.

Our Scripts

The scripts will be something like this:

Let’s go through each script:

We need to set up a Git repo so that jest –watch command works, so let’s git init:

> git init

Then let’s add a .gitignore file to ignore unnecessary files and folders

Configuring the Tools

Now, we still need one more thing, configuration. We don’t expect the tools to magically do the work without some guidance, thus we have to setup config files.

Typescript configuration

Typescript configuration will live inside tsconfig.json in the root of our project. there, we will add few options to tell Typescript how to compile our code. We can find configuration options at typescript docs. Our basic config will be like this:

Jest configuration

Jest also needs a configuration file, it’s called jest.config.js, and we need to place it at the root of our project too. In the config we will specify a preset to tell Jest that we will be working with Typescript, and a test environment to tell it that we’re going to test Node.js code:

We used the ts-jest preset that we downloaded earlier.

Time For Action

Now that our Node.js Typescript and Jest starter is set up, let’s test it and see if it works properly. We will create a small express app that stores movies and their ratings inside an array and display them using a movies API.

Creating custom typings

To start with our app, we will create a typings folder inside our src folder where we will store all of our custom types.

If you noticed in the tsconfig.json, we have a paths array were we have specified “*” which is for the external libraries types, and also “typings” which will be for the typings that are made by us. Typings are a way to describe to the typescript compiler how something will look like.

So let’s try this by creating an IResoruce interface inside src/typings/IResource/index.d.ts (.d.ts means it’s a type file):

Here we have specified that an IResource must have a create method and a findMany method. The former accepts data and should return a single result while the latter should return an array.

Creating classes

Now let’s go ahead and create a MoviesApi.ts file inside the src/api/. It will contain the MoviesApi class that implements the IResource interface:

Now, if you’re using VsCode you will see that it will complain about our class not implementing the required methods:

Node.js Typescript and Jest Starter

Nice, now when your coworker wants to implement a new API resource he will know what to do by just reading Typescript complaints :D.

So we can fix this by partially implementing these methods:

Testing with Jest

Now let’s try Jest, we will unit test our MoviesApi. Let’s create movies.spec.ts inside src/test/api. We will describe our test and start testing the create method:

Here, we used the create method and expected that the result will be the same data object we passed. To run the tests we will run:

> npm test

This should run Jest in watch mode:

Node.js Typescript and Jest Starter

As you can see, our test has failed because the create method doesn’t return the result we have expected. Let’s fix this by implementing the correct logic inside our MoviesApi:

Once we do this our test should be passing:

Node.js Typescript and Jest Starter

Generating coverage report

to generate coverage report we will run:

> npm run coverage

this will generate the report and save it in a coverage folder inside our root folder, and also display the report in the terminal:

Node.js Typescript and Jest Starter

Creating and express app

We will create an express app to consume our movies API, we will first install the required dependencies:

> npm i express body-parser

Then the express typings

> npm i -D @types/express

Now let’s setup an express server inside src/index.ts:

Now in postman we should be able to consume our api:

Node.js Typescript and Jest Starter
Node.js Typescript and Jest Starter

Final Words

This has been the fruit of some hours of research, luckily we have tools that do a lot of things for us. If you want to use Node.js Typescript and Jest starter without setting up all the stuff by yourself, you can clone the repo from here.

Share via
Copy link
Powered by Social Snap