 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.

 and add more tests using some of the other matcher functions.

If you want to learn more about testing TypeScript with Jest, then check out 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Testing TypeScript Code with Jest</h1><p><strong><a href="https://github.com/facebook/jest" rel="noopener noreferrer nofollow">Jest</a></strong> is an open-source, JavaScript testing framework maintained by Facebook. With an exceptionally large assertion library and a <a href="https://jestjs.io/docs/en/api" rel="noopener noreferrer nofollow">simple, well-documented API</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.</p><p>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.</p><p>Below, I'm going to show you:</p><ul><li><p>How to statically analyze application code with TypeScript.</p></li><li><p>How to view type definitions via VSCode's Intellisense.</p></li><li><p>How to configure Jest for TypeScript code.</p></li><li><p>How to use write Jest tests for TypeScript code.</p></li></ul><h2 class="heading-anchor-text" id="why-typescript-and-jest?"><span>Why TypeScript and Jest?</span><a class="d-inline" href="#why-typescript-and-jest?">#</a></h2><p>Pairing TypeScript and Jest creates layers of code quality assurance for any project.</p><p>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.</p><p><strong>VSCode Intellisense (JavaScript)</strong>:</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/031falsq0vhycm9/Screen%20Shot%202021-01-14%20at%204.50.30%20PM.png" alt="Plain JavaScript in VSCode (Intellisense)" contenteditable="false"><div></div></figure><p><strong>VSCode Intellisense (TypeScript)</strong>:</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/psk9r1qg3d51dcm/Screen%20Shot%202021-01-14%20at%204.51.14%20PM.png" alt="TypeScript in VSCode (Intellisense)" contenteditable="false"><div></div></figure><p>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.</p><p>The combination of TypeScript and Jest ultimately leads to long-term maintainability.</p><h2 class="heading-anchor-text" id="preparation"><span>Preparation</span><a class="d-inline" href="#preparation">#</a></h2><p>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.</p><p>Download this <a href="https://github.com/newline-sandbox/rgb-hex" rel="noopener noreferrer nofollow">project</a> from GitHub:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-RkK6dFIgcQeLOmbRbkkhZ" id="cm-RkK6dFIgcQeLOmbRbkkhZ">$ git clone --branch jestless https://github.com/newline-sandbox/rgb-hex.git</textarea><p><em>Note</em>: 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.</p><h2 class="heading-anchor-text" id="installation"><span>Installation</span><a class="d-inline" href="#installation">#</a></h2><p>Install Jest as a dev. dependency.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-Cwk9cQ4VWO3kcaJI8M7fe" id="cm-Cwk9cQ4VWO3kcaJI8M7fe">$ npm install --save-dev jest</textarea><p>Because Jest supports TypeScript via Babel, install <code><a href="https://babeljs.io/docs/en/babel-plugin-transform-typescript" rel="noopener noreferrer nofollow">@babel/plugin-transform-typescript</a></code>, a plugin that adds support for the TypeScript syntax, as a dev. dependency.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-lstoxgXhqYIgs7JZ7Opf-" id="cm-lstoxgXhqYIgs7JZ7Opf-">$ npm install --save-dev @babel/preset-typescript</textarea><p>To use <code>import</code> statements in Jest test files (and support the latest, commonly-used JavaScript features), install <code><a href="https://babeljs.io/docs/en/babel-preset-env" rel="noopener noreferrer nofollow">@babel/preset-env</a></code> 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 <code>@babel/plugin-transform-arrow-functions</code> for arrow functions and <code>@babel/plugin-transform-spread</code> for the spread operator.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-JWn6Jr_6PFgVVnj2LiEX6" id="cm-JWn6Jr_6PFgVVnj2LiEX6">$ npm install --save-dev @babel/preset-env</textarea><h2 class="heading-anchor-text" id="configuring-babel-for-jest"><span>Configuring Babel for Jest</span><a class="d-inline" href="#configuring-babel-for-jest">#</a></h2><p>Add a <code>babel.config.js</code> file to the root of the project to configure Babel with these presets. Set the target environment of <code>@babel/preset-env</code> 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.</p><p>(<code>babel.config.js</code>)</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-rfovgwHvU5ZW9R1gSxFZi" id="cm-rfovgwHvU5ZW9R1gSxFZi">module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],
};</textarea><h2 class="heading-anchor-text" id="adding-and-running-jest-tests"><span>Adding and Running Jest Tests</span><a class="d-inline" href="#adding-and-running-jest-tests">#</a></h2><p>This library provides two simple methods for converting color values, <code>rgbToHex</code> and <code>hexToRgb</code>:</p><ul><li><p><strong><code>rgbToHex</code></strong></p><p>Converts numerical decimal color values (RGB) into its hexadecimal equivalent.</p><p><em>Example Usage</em>:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-ah6iS3Pk1JWp4AxF1OZkL" id="cm-ah6iS3Pk1JWp4AxF1OZkL">rgbToHex(255, 255, 255); // "#FFFFFF"</textarea></li><li><p><strong><code>hexToRgb</code></strong></p><p>Converts a stringified hexadecimal color value into its decimal equivalent.</p><p><em>Example Usage</em>:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-A_M_UcGxLCHmgDo7AOL8M" id="cm-A_M_UcGxLCHmgDo7AOL8M">hexToRgb("#FFFFFF"); // [255, 255, 255]</textarea></li></ul><p>Let's add several unit tests for each method.</p><p>In the root of the project, create a <code>__tests__</code> directory. Inside of that directory, create a new file named <code>index.test.ts</code>.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-c4nGyo9XrndwgtSVgI9Rj" id="cm-c4nGyo9XrndwgtSVgI9Rj">$ mkdir __tests__ &amp;&amp; touch index.test.ts</textarea><p>Inside of <code>index.test.ts</code>, define two top-level <code>describe</code> blocks to encapsulate all the unit tests. Each block will group together unit tests related to one of the methods.</p><p>(<code>__tests__/index.test.js</code>)</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-iIvq0hLvigJjVBXA64stj" id="cm-iIvq0hLvigJjVBXA64stj">describe("`rgbToHex`", () =&gt; {
  // ...
});

describe("`hexToRgb`", () =&gt; {
  // ...
});</textarea><p>Next, at the top of the <code>index.test.ts</code> file, import the methods <code>rgbToHex</code> and <code>hexToRgb</code>.</p><p>(<code>__tests__/index.test.js</code>)</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-te30FEZm4_OYH5u_OzOCf" id="cm-te30FEZm4_OYH5u_OzOCf">import { rgbToHex, hexToRgb } from "../index";</textarea><p>Inside the body of the first <code>describe</code> block (housing <code>rgbToHex</code> tests), let's write some simple tests. Each <code>it</code> block represents a single test (also called spec), and inside of each test is an assertion.</p><p>(<code>__tests__/index.test.js</code>)</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-ASWSqxnv9cMUCXD3Y8FWM" id="cm-ASWSqxnv9cMUCXD3Y8FWM">describe("`rgbToHex`", () =&gt; {
  it('should convert (255, 255, 255) to "#FFFFFF"', () =&gt; {
    expect(rgbToHex(255, 255, 255)).toEqual("#FFFFFF");
  });

  it('`rgbToHex` converts (0, 0, 0) to "#000000"', () =&gt; {
    expect(rgbToHex(0, 0, 0)).toEqual("#000000");
  });
});</textarea><p>To test the code, add the following NPM script to <code>package.json</code> and execute it.</p><p>(<code>package.json</code>)</p><textarea data-iscodemirror="true" data-mode="application/json" data-uniqueid="cm-_zRYfMf3bkpBkAbiylVvM" id="cm-_zRYfMf3bkpBkAbiylVvM">{
  "script": {
    "test": "jest"
  }
}</textarea><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-il3gd7C-7l1pNZU8HzJM-" id="cm-il3gd7C-7l1pNZU8HzJM-">$ npm run test</textarea><p>All the tests should pass with flying colors!</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/aus6z7s0vj9lsda/Screen%20Shot%202021-01-14%20at%209.50.31%20PM.png" alt="Testing rgbToHex" contenteditable="false"><div></div></figure><p>Now let's test the remaining method <code>hexToRgb</code>.</p><p>Inside the body of the second <code>describe</code> block (housing <code>hexToRgb</code> tests), let's write some simple tests.</p><p>(<code>__tests__/index.test.js</code>)</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-fZqOtqGuj-D2nniXGjhYy" id="cm-fZqOtqGuj-D2nniXGjhYy">describe("`hexToRgb`", () =&gt; {
  it('should convert "#FFFFFF" to (255, 255, 255)', () =&gt; {
    expect(hexToRgb("#FFFFFF")).toEqual([255, 255, 255]);
  });

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

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

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

  it("should throw an error when given an invalid hexadecimal color value", () =&gt; {
    expect(() =&gt; hexToRgb("#XYZ")).toThrow(Error);
  });
});</textarea><p>When you run the tests, all the tests should pass with flying colors!</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/lgzxilza0d0fezd/Screen%20Shot%202021-01-14%20at%209.53.00%20PM.png" alt="Testing hexToRgb" contenteditable="false"><div></div></figure><p>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.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/6agxuveijjhj4l6/Screen%20Shot%202021-01-14%20at%209.53.57%20PM.png" alt="Intellisense Tooltip - TypeScript" contenteditable="false"><div></div></figure><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline" href="#next-steps">#</a></h2><p>Experiment! Visit the <a href="https://jestjs.io/docs/en/api" rel="noopener noreferrer nofollow">Jest documentation</a> and add more tests using some of the other matcher functions.</p><p>If you want to learn more about testing TypeScript with Jest, then check out <em><a href="https://www.newline.co/fullstack-react-with-typescript" rel="noopener noreferrer nofollow">Fullstack React with TypeScript</a></em>:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210125193031613_20201130032331550_hero-2.jpg" attachmentid="47d90701-9ed3-4b8b-883f-623a4a9df19e" contenteditable="false" data-width="600" data-height="356"><div></div></figure><p></p><p></p>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Testing TypeScript Code with Jest

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript