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.
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:
- typescript: it contains the Typescript compiler.
- ts-node: will allow us to run Typescript code without the need to compile then run, basically less work.
- ts-jest: will let us use Typescript with Jest.
- jest: the test framework.
- @types/jest: this contains Typescript typings for the Jest API.
- @types/node: this contains Typescript typings for the Node API.
Nice! now that we understood what each package does, let’s go ahead and set up our scripts.
The scripts will be something like this:
Let’s go through each script:
- build: this will compile our Typescript code into ES5 (like we specified in the config file) and place it in the dist folder(like we also specified in the config file).
- start: will run the compiled es5, for production use mostly.
- dev: will run ts-node and watch for changes.
- test: will run Jest in watch mode.
- coverage: will generate the test coverage report and place it in the coverage folder by default.
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 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 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.
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:
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:
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:
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:
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:
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.