How to setup a custom test reporter for Jest

As one of the most popular test runners in the Javascript ecosystem, Jest gives us a variety of helpful tools to help us test our code. The test reporter is one of these features.

With a few lines of code, we can effortlessly create visibility into runtime performance and test failures — both of which are super helpful for debugging flakey tests. As an added bonus, we can also make our test reporter more robust by writing in Typescript.

📦 Setting up Jest in our project

To begin, we’ll install some dependencies and setup Typescript.

> yarn init
> yarn add typescript jest ts-node @jest/reporters @jest/types -D
> yarn tsc --init

After setting up our Typescript project, we need to add a new property called reporters to our Jest configuration. This property accepts an array that we will use to point to our custom reporter.

Note: You can have many reporters, but we’re just creating one.

// jest.config.js

module.exports = {
  reporters: ["<rootDir>/test-reporter/index.js"],
};

We can then create a new folder called test-reporter and create two files:

• index.js — our entry point that we can use to compile Typescript