Jest Testing for TypeScript Apps: A Comprehensive Guide

Unlock the Power of Jest: A Comprehensive Guide to Testing Your JavaScript Applications

When it comes to software engineering, testing is an essential aspect that cannot be overlooked. It’s where we determine the expectations and test cases for our application and ensure they are met. JavaScript has a plethora of testing frameworks available, but today, we’re going to focus on one of the most popular ones: Jest.

What is Jest?

Jest is a lightweight, simple testing framework that provides a wide range of testing capabilities to JavaScript and TypeScript projects. It offers features like assertions, mocking, spies, running tests in parallel, prioritizing failed tests, and coverage analysis.

Setting Up Jest

To demonstrate Jest’s testing capabilities, we’ll use a project from a previous LogRocket article titled “Using Sequelize with TypeScript.” To follow along, you’ll need to install:

• Git
• Node.js
• A JavaScript package manager (we’ll use Yarn)
• An IDE or text editor of your choice (like Sublime Text or Visual Studio Code)

Once you have all these installed, clone the TypeScript/Sequelize project by running the following command:

Configuring Jest

Next, we’ll install our test libraries as development dependencies. We’ll configure Jest for our app by creating a file called jest.config.ts and adding the following configuration:

There are several other options for configuring Jest based on your preference, such as running jest --init which creates a jest.config.js file with default configuration or adding the configuration within package.json. Jest supports many configuration options, but there’s no additional benefit to any of the configuration options you choose.

Setting Up Our Project Test Structure

For our project, we’ll focus on two types of functional tests:

• Integration Tests: These tests focus on how our application’s components interact with each other to achieve expected results.
• Unit Tests: These tests focus on the actions of a specific component without paying attention to the other components it references.

Let’s create our tests directory with the folders for integration tests and unit tests.

Implementing Jest Concepts and Test Functions

Now that we have created a structure for our tests, we’ll go through the available Jest concepts and how they can be used in our project.

• Setup and Teardown: This refers to the tasks we need to perform to get our app in the necessary state for testing, such as populating or clearing tables. Jest provides the ability to perform these tasks via functions like beforeAll, beforeEach, afterAll, and afterEach.
• Matchers: Matchers are the functions of Jest that test the values produced in our test. Primarily, this refers to the functions we append to expect(), such as toEqual and toBeNull.
• Testing Routes and HTTP Requests with Jest and SuperTest: We can test the routes defined in our API using Jest and SuperTest.
• Testing with Mock Objects: We’ve talked about unit tests that focus on testing a single component alone, ignoring the external files or services it calls. To do this effectively, we create mock objects to replace those external files and services.
• Spying and Overwriting Object Attributes: With Jest, we can spy on and overwrite the implementation of an object’s attribute.

Running Specific Tests or Test Groups

Jest provides the ability to run or skip specific tests and test groups using the functions only and skip.

Using Jest to Check Test Coverage

We can ask Jest to check our test coverage by adding --coverage to our test script in our package.json. Jest’s coverage indicates how much of our application is covered in our tests using metrics per file.

Conclusion

Now that we’ve added some tests to our API, we can run them using yarn test and get an output like:

All the code from this article is available on my GitHub. Please share in the comments any cool finds and tricks from test libraries you’ve used in your own projects!