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.

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

NPM 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

NodeJs Typescript Configuration

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 set up config files.

Typescript configuration will live inside tsconfig.json at the root of our project. there, we will add a 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 Typescript 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.

Creating an example app

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 displays them using a MoviesAPI.

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

So we can fix this by partially implementing these methods:

Unit Testing with Jest and Typescript

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:

jest test error

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:

jest test passed

Jest 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:

jest coverage

Creating an express example

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 set up 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

Conclusion

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