Setting Up and Mastering Testing in TypeScript with Jest

Introduction to Testing Environment Setup

Welcome to our next step in mastering Test Driven Development (TDD) in TypeScript, where we will focus on setting up a robust testing environment. As you might recall, the TDD process involves the Red-Green-Refactor cycle — starting with a failing test, writing the minimum code needed to pass it, and then refining the implementation. In this lesson, we will set up the tools necessary for testing with Jest and ts-jest, guiding you on how to create an efficient testing environment that complements the TDD cycle. Jest is a popular JavaScript testing framework that integrates smoothly with TypeScript through ts-jest . While other options like Mocha and Chai are available, Jest offers a more straightforward setup, which is why it's our choice for this course. Now, let’s dive into setting up our testing environment in a systematic way.

Installing Jest and TypeScript Testing Essentials

The first step in preparing our environment is installing the necessary libraries. We will use Yarn as our package manager. Here’s how you can do it:

First, install Yarn and TypeScript if you haven't already:

Shell npm install -g yarn yarn add --dev typescript

Next, you can install Jest, the TypeScript Jest runner, along with the TypeScript runtime and the types for Jest

Shell yarn add --dev jest ts-jest ts-node @types/jest jest : The core testing framework. ts-jest : A TypeScript preprocessor for Jest that makes it possible to test TypeScript code without compiling it to JavaScript first. ts-node : Allows the execution of TypeScript code without pre-compilation. @types/jest : Type definitions for Jest, ensuring proper TypeScript support. Remember, on CodeSignal, these libraries are pre-installed, so you can focus on writing and running tests without worrying about setup.

Creating the Jest Configuration

To utilize ts-jest with TypeScript, a configuration file is essential. Let’s create a jest.config.ts file with the following content and place it in the project root: TypeScriptimport type {Config} from '@jest/types'; const config: Config.InitialOptions = { transform: { "^.+\\.tsx?$": "ts-jest", }, }; export default config; The transform property tells Jest to use ts-jest for processing .ts files, ensuring TypeScript compatibility. This setup simplifies test writing and running, maintaining focus on the TDD process: Red-Green-Refactor. Other configuration methods exist, but this one offers a streamlined approach tailored for our TypeScript requirements.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Putting it all together!

TypeScript

import {User, fetchUser} from "../src/user";

describe('User', () => {
  let user: User;

  // Setup - runs before each test
  beforeEach(() => {
    user = new User('Jane Doe', 'jane@example.com');
  });

  it('Creates Users correctly', () => {
    expect(user.getName()).toBe('Jane Doe');
    expect(user.getEmail()).toBe('jane@example.com');
    expect(user).toBeInstanceOf(User);
  });

  describe('User email tests', () => {
    test('getEmail returns correct email', () => {
      expect(user.getEmail()).toBe('jane@example.com');
    });

    test('email contains @ symbol', () => {
      expect(user.getEmail()).toContain('@');
    });
  });
  
  test('invalid email throws an error', () => {
    expect(() => {
      new User('Invalid', 'invalid-email');
    }).toThrow('Invalid email');
  });
  
  describe("fetchUser", () => {
    it('fetches data asynchronously', async () => {
      const user = await fetchUser();
      expect(user).toEqual({
        name: 'John Doe',
        email: 'john@example.com',
      });
    });
  });
});

import {User, fetchUser} from "../src/user";

describe('User', () => {
  let user: User;

  // Setup - runs before each test
  beforeEach(() => {
    user = new User('Jane Doe', 'jane@example.com');
  });

  it('Creates Users correctly', () => {
    expect(user.getName()).toBe('Jane Doe');
    expect(user.getEmail()).toBe('jane@example.com');
    expect(user).toBeInstanceOf(User);
  });

  describe('User email tests', () => {
    test('getEmail returns correct email', () => {
      expect(user.getEmail()).toBe('jane@example.com');
    });

    test('email contains @ symbol', () => {
      expect(user.getEmail()).toContain('@');
    });
  });
  
  test('invalid email throws an error', () => {
    expect(() => {
      new User('Invalid', 'invalid-email');
    }).toThrow('Invalid email');
  });
  
  describe("fetchUser", () => {
    it('fetches data asynchronously', async () => {
      const user = await fetchUser();
      expect(user).toEqual({
        name: 'John Doe',
        email: 'john@example.com',
      });
    });
  });
});

Introduction to Testing Environment Setup

Installing Jest and TypeScript Testing Essentials

First, install Yarn and TypeScript if you haven't already:

Next, you can install Jest, the TypeScript Jest runner, along with the TypeScript runtime and the types for Jest

Creating the Jest Configuration

Join the 1M+ learners on CodeSignal

Running Tests in Watch Mode

Examples of patterns with Jest

Using `describe` for Nesting and Grouping

`it` vs `test`

Setup with `beforeEach`

Matchers with `toBe`, `toEqual`, `toBeInstanceOf`, `toContain`

Async Tests

Testing Code with Exceptions

Putting it all together!

Summary and Next Steps