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 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 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;import 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

Shell

npm install -g yarn
yarn add --dev typescript

Shell

yarn add --dev jest ts-jest ts-node @types/jest

TypeScript

import type {Config} from '@jest/types';

const config: Config.InitialOptions = {
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
};
export default config;

Shell

yarn jest --watchAll

yarn jest --watchAll

TypeScript

describe('User', () => {
  describe('Initialization', () => {
    it('Creates Users correctly', () => {
      // test logic
    });
  });

  describe('User email tests', () => {
    test('getEmail returns correct email', () => {
      // test logic
    });

    test('email contains @ symbol', () => {
      // test logic
    });
  });
});

describe('User', () => {
  describe('Initialization', () => {
    it('Creates Users correctly', () => {
      // test logic
    });
  });

  describe('User email tests', () => {
    test('getEmail returns correct email', () => {
      // test logic
    });

    test('email contains @ symbol', () => {
      // test logic
    });
  });
});

TypeScript

beforeEach(() => {
  user = new User('Jane Doe', 'jane@example.com');
});

beforeEach(() => {
  user = new User('Jane Doe', 'jane@example.com');
});

TypeScript

expect(user.getName()).toBe('Jane Doe');
expect(user).toEqual({ name: 'Jane Doe', email: 'jane@example.com' });
expect(user).toBeInstanceOf(User);
expect(user.getEmail()).toContain('@');

expect(user.getName()).toBe('Jane Doe');
expect(user).toEqual({ name: 'Jane Doe', email: 'jane@example.com' });
expect(user).toBeInstanceOf(User);
expect(user.getEmail()).toContain('@');

TypeScript

describe("fetchUser", () => {
  it('fetches data asynchronously', async () => {
    const user = await fetchUser();
    expect(user).toEqual({
      name: 'John Doe',
      email: 'john@example.com',
    });
  });
});

describe("fetchUser", () => {
  it('fetches data asynchronously', async () => {
    const user = await fetchUser();
    expect(user).toEqual({
      name: 'John Doe',
      email: 'john@example.com',
    });
  });
});

TypeScript

test('invalid email throws an error', () => {
  expect(() => {
    new User('Invalid', 'invalid-email');
  }).toThrow('Invalid email');
});

test('invalid email throws an error', () => {
  expect(() => {
    new User('Invalid', 'invalid-email');
  }).toThrow('Invalid email');
});

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',
      });
    });
  });
});

Shell

yarn jest --watchAll

TypeScript

describe('User', () => {
  describe('Initialization', () => {
    it('Creates Users correctly', () => {
      // test logic
    });
  });

  describe('User email tests', () => {
    test('getEmail returns correct email', () => {
      // test logic
    });

    test('email contains @ symbol', () => {
      // test logic
    });
  });
});

TypeScript

beforeEach(() => {
  user = new User('Jane Doe', 'jane@example.com');
});

TypeScript

expect(user.getName()).toBe('Jane Doe');
expect(user).toEqual({ name: 'Jane Doe', email: 'jane@example.com' });
expect(user).toBeInstanceOf(User);
expect(user.getEmail()).toContain('@');

TypeScript

describe("fetchUser", () => {
  it('fetches data asynchronously', async () => {
    const user = await fetchUser();
    expect(user).toEqual({
      name: 'John Doe',
      email: 'john@example.com',
    });
  });
});

TypeScript

test('invalid email throws an error', () => {
  expect(() => {
    new User('Invalid', 'invalid-email');
  }).toThrow('Invalid email');
});

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',
      });
    });
  });
});