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

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

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

Зачем тестировать TypeScript-код?

Несмотря на то, что TypeScript проверяет типы на этапе компиляции, он не защищает от ошибок времени выполнения, некорректной бизнес-логики или регрессий. Тесты помогают:

• Обнаруживать ошибки до попадания в продакшн;
• Документировать поведение функций и модулей;
• Упрощать рефакторинг и поддержку кода;
• Ускорять процесс разработки за счёт автоматизации проверок.

Популярные фреймворки для тестирования TypeScript

1. Jest — универсальный выбор

Jest — самый популярный фреймворк, созданный Facebook. Он поддерживает TypeScript «из коробки» через пакет ts-jest или настройку Babel. Jest включает в себя test runner, assertion library, mocking и coverage reports.

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

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

Пример unit-теста для функции сложения:

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

// sum.test.ts
import { 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 — быстрая альтернатива для Vite-проектов

Vitest — современный фреймворк, который использует Vite для сборки. Он совместим с API Jest, но работает значительно быстрее за счёт нативной поддержки ES-модулей и HMR. Отлично подходит для проектов на Vue, React или Svelte.

Пример настройки:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

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

Тест с использованием 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 — гибкая классика

Mocha — гибкий test runner, который часто используется в паре с библиотекой утверждений Chai. Для TypeScript потребуется дополнительно установить ts-node и @types/mocha. Mocha предоставляет множество плагинов и кастомизаций.

Пример:

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

Инструменты для end-to-end (E2E) тестирования

4. Playwright — современный E2E-инструмент

Playwright от Microsoft поддерживает TypeScript нативно, позволяет тестировать Chromium, Firefox и WebKit. Он умеет работать с сетевыми запросами, эмулировать мобильные устройства и делать скриншоты.

Установка:

npm init playwright@latest

Пример теста для проверки заголовка страницы:

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

test('homepage has correct title', async ({ page }) => {
  await page.goto('https://pythonlib.ru');
  await expect(page).toHaveTitle(/PythonLib/);
});

5. Cypress — удобный инструмент для браузерного тестирования

Cypress также имеет отличную поддержку TypeScript. Его ключевая особенность — выполнение тестов в реальном браузере с возможностью отладки через DevTools.

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    base