Тестирование в TypeScript: фреймворки и инструменты

Тестирование в TypeScript: фреймворки, инструменты и лучшие практики

TypeScript — это статически типизированный надстройка над JavaScript, который активно используется в современных веб-проектах. Однако типизация сама по себе не гарантирует отсутствие логических ошибок, багов в рантайме или неправильной работы компонентов. Поэтому тестирование TypeScript-приложений является обязательным этапом разработки. В этой статье мы подробно разберём основные фреймворки и инструменты для тестирования TypeScript, их особенности, примеры использования и рекомендации по выбору.

1. Почему тестирование TypeScript отличается от JavaScript?

TypeScript добавляет статическую проверку типов, но это не заменяет юнит-тесты, интеграционные тесты или E2E-тесты. Однако TypeScript даёт преимущества:

• Типобезопасность — компилятор отлавливает многие ошибки на этапе разработки.
• Лучшая поддержка IDE — автодополнение, рефакторинг, навигация.
• Чистота кода тестов — типы помогают избежать багов в самих тестах.

При этом фреймворки для тестирования TypeScript обычно работают через транспиляцию (ts-jest, esbuild, swc) или используют встроенную поддержку TypeScript.

2. Основные фреймворки для юнит-тестирования

Jest

Самый популярный фреймворк для тестирования JavaScript и TypeScript. Поддерживается Facebook, имеет встроенный assertion-библиотеку, моки, шпионы и покрытие кода.

Установка и настройка:

npm install --save-dev jest @types/jest ts-jest typescript

Конфигурация в jest.config.ts:

export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src']
};

Пример теста:

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

// sum.test.ts
import { sum } from './sum';

describe('sum function', () => {
  it('should add two numbers correctly', () => {
    expect(sum(2, 3)).toBe(5);
  });

  it('should handle negative numbers', () => {
    expect(sum(-1, -2)).toBe(-3);
  });
});

Vitest

Современный аналог Jest, оптимизированный для Vite-проектов. Отличается высокой скоростью работы за счёт использования esbuild/swc под капотом. Полностью совместим с TypeScript из коробки.

Установка:

npm install --save-dev vitest

Пример теста (без дополнительной конфигурации):

// utils.ts
export const capitalize = (str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

// utils.test.ts
import { describe, it, expect } from 'vitest';
import { capitalize } from './utils';

describe('capitalize', () => {
  it('should capitalize first letter', () => {
    expect(capitalize('hello')).toBe('Hello');
  });

  it('should handle empty string', () => {
    expect(capitalize('')).toBe('');
  });
});

Mocha + Chai

Классический дует для гибкого тестирования. Mocha — test runner, Chai — библиотека для утверждений (assertions). Требует дополнительной настройки для TypeScript.

Установка:

npm install --save-dev mocha chai @types/mocha @types/chai ts-node typescript

Пример:

import { expect } from 'chai';
import { describe, it } from 'mocha';

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

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

  it('should handle zero', () => {
    expect(multiply(5, 0)).to.equal(0);
  });
});

3. Инструменты для интеграционного и E2E-тестирования

Cypress

Фреймворк для end-to-end тестирования веб-приложений. Работает в браузере, имеет удобный дашборд, автоматические ожидания и поддержку TypeScript.

Установка:

npm install --save-dev cypress

Настройка TypeScript в cypress/tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

Пример теста:

describe('Login page', () => {
  it('should display error on invalid credentials', () => {