Testing in TypeScript: Overview of Frameworks and Tools

Testing in TypeScript: Overview of Modern Frameworks and Tools

TypeScript is a strictly typed superset of JavaScript that is actively used in modern web development. However, typing alone does not guarantee the absence of logical errors. To ensure code quality, proper testing is necessary. In this article, we will review the main frameworks and tools for testing TypeScript applications, their features, and usage examples.

Why Test TypeScript Code?

Despite the fact that TypeScript checks types at compile time, it does not protect against runtime errors, incorrect business logic, or regressions. Tests help to:

• Detect errors before they reach production;
• Document the behavior of functions and modules;
• Simplify code refactoring and maintenance;
• Speed up the development process through automated checks.

Popular Frameworks for Testing TypeScript

1. Jest — The Universal Choice

Jest is the most popular framework, created by Facebook. It supports TypeScript out of the box via the ts-jest package or Babel configuration. Jest includes a test runner, assertion library, mocking, and coverage reports.

Installation and Setup:

npm install --save-dev jest ts-jest @types/jestnpx ts-jest config:init

Example of a unit test for an addition function:

// sum.tsexport function sum(a: number, b: number): number {  return a + b;}

// sum.test.tsimport { sum } from './sum';

describe('sum function', () => {  test('adds 1 + 2 to equal 3', () => {    expect(sum(1, 2)).toBe(3);  });

  test('adds negative numbers', () => {    expect(sum(-1, -2)).toBe(-3);  });});

2. Vitest — A Fast Alternative for Vite Projects

Vitest is a modern framework that uses Vite for bundling. It is compatible with the Jest API but works significantly faster due to native support for ES modules and HMR. It is an excellent choice for projects using Vue, React, or Svelte.

Configuration Example:

// vitest.config.tsimport { defineConfig } from 'vitest/config';

export default defineConfig({  test: {    globals: true,    environment: 'node',  },});

Test using describe/it:

import { describe, it, expect } from 'vitest';

function multiply(a: number, b: number): number {  return a * b;}

describe('multiply', () => {  it('should multiply two numbers', () => {    expect(multiply(3, 4)).toBe(12);  });});

3. Mocha + Chai — Flexible Classics

Mocha is a flexible test runner often used in conjunction with the Chai assertion library. For TypeScript, you will additionally need to install ts-node and @types/mocha. Mocha offers many plugins and customizations.

Example:

import { expect } from 'chai';

function greet(name: string): string {  return `Hello, ${name}!`;}

describe('greet', () => {  it('should return a greeting', () => {    expect(greet('Alex')).to.equal('Hello, Alex!');  });});

Tools for End-to-End (E2E) Testing

4. Playwright — A Modern E2E Tool

Playwright from Microsoft natively supports TypeScript and allows testing on Chromium, Firefox, and WebKit. It can handle network requests, emulate mobile devices, and take screenshots.

Installation:

npm init playwright@latest

Example test for checking a page title:

import { test, expect } from '@playwright/te