 is an open-source, JavaScript testing framework maintained by Facebook. With an exceptionally large assertion library and a 

, writing tests for JavaScript code with Jest is easy and requires no additional configuration. For TypeScript code (and JavaScript code that needs to be transcompiled with Babel), you will need to install a few extra NPM packages and provide a small Babel configuration. This process is not difficult and takes little time to complete.

By setting up TypeScript and Jest in the early stages of your project, this upfront investment will pay exponential dividends in the latter stages of your project.

Pairing TypeScript and Jest creates layers of code quality assurance for any project.

With TypeScript, static type-checking can immediately catch many common mistakes such as invalid arguments being passed to a function, etc. Adding type annotations not only enforces type checking, but also serves as a form of documentation. Editors with intelligent code completion are able to instantly notify the developer of potential bugs in their code.

With Jest, a robust test suite can be written with little boilerplate code. Plus, developers are able to confidently refactor or add features to an application without having to worry about introducing new unexpected bugs or regressions to other parts of the application.

The combination of TypeScript and Jest ultimately leads to long-term maintainability.

To demonstrate how quick it is integrate Jest into a TypeScript project, we will add Jest to a small Node.js library built with TypeScript.

$ git clone --branch jestless https://github.com/newline-sandbox/rgb-hex.git

: The "master" branch hosts the library with Jest. If you find yourself lost during the walkthrough, then feel free to refer to the code in the "master" branch.

Because Jest supports TypeScript via Babel, install 

, a plugin that adds support for the TypeScript syntax, as a dev. dependency.

$ npm install --save-dev @babel/preset-typescript

 statements in Jest test files (and support the latest, commonly-used JavaScript features), install 

 as a dev. dependency. A single preset conveniently contains an array of Babel plugins. This eliminates the need to manually install individual Babel plugins for standard JavaScript features that you would expect out-of-the-box support for such as 

$ npm install --save-dev @babel/preset-env

 file to the root of the project to configure Babel with these presets. Set the target environment of 

 to the current version of Node that you are running, which allows Babel to only transpile features that are not natively supported by the specified environment.

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],
};

This library provides two simple methods for converting color values, 

Let's add several unit tests for each method.

 directory. Inside of that directory, create a new file named 

 blocks to encapsulate all the unit tests. Each block will group together unit tests related to one of the methods.

describe("`rgbToHex`", () => {
  // ...
});

describe("`hexToRgb`", () => {
  // ...
});

import { rgbToHex, hexToRgb } from "../index";

 tests), let's write some simple tests. Each 

 block represents a single test (also called spec), and inside of each test is an assertion.

describe("`rgbToHex`", () => {
  it('should convert (255, 255, 255) to "#FFFFFF"', () => {
    expect(rgbToHex(255, 255, 255)).toEqual("#FFFFFF");
  });

  it('`rgbToHex` converts (0, 0, 0) to "#000000"', () => {
    expect(rgbToHex(0, 0, 0)).toEqual("#000000");
  });
});

To test the code, add the following NPM script to 

All the tests should pass with flying colors!

describe("`hexToRgb`", () => {
  it('should convert "#FFFFFF" to (255, 255, 255)', () => {
    expect(hexToRgb("#FFFFFF")).toEqual([255, 255, 255]);
  });

  it('should convert "#000000" to (0, 0, 0)', () => {
    expect(hexToRgb("#000000")).toEqual([0, 0, 0]);
  });

  it('should convert "#FFF" to (255, 255, 255)', () => {
    expect(hexToRgb("#FFF")).toEqual([255, 255, 255]);
  });

  it('should convert "#000" to (0, 0, 0)', () => {
    expect(hexToRgb("#000")).toEqual([0, 0, 0]);
  });

  it("should throw an error when given an invalid hexadecimal color value", () => {
    expect(() => hexToRgb("#XYZ")).toThrow(Error);
  });
});

When you run the tests, all the tests should pass with flying colors!

If you happen to forget what kind of arguments need to be passed to a method, or need to be reminded of what the method does via a documentation comment (JSDoc/TSDoc), then hover over the method name and Intellisense will display a tooltip with the full function signature (with type annotations) and along with the comment.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Babel

Testing TypeScript Code with Jest

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript