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

Тестирование в TypeScript: Фреймворки и инструменты для качественной разработки

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

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

TypeScript-компилятор ловит ошибки типов, но не проверяет бизнес-логику. Тесты помогают:

• Обнаружить регрессию при рефакторинге
• Документировать ожидаемое поведение функций
• Ускорить код-ревью благодаря автоматической верификации
• Повысить уверенность в работе приложения

Основные категории тестирования

• Unit-тесты — проверка отдельных функций, классов или модулей.
• Интеграционные тесты — взаимодействие между модулями (например, с базой данных).
• E2E-тесты — симуляция действий пользователя в браузере.

1. Jest — универсальный фреймворк для unit-тестов

Jest от Facebook — наиболее популярный выбор для TypeScript. Он работает «из коробки»: не требует сложной конфигурации, имеет встроенный mock-движок и отчёт о покрытии кода.

Установка:

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

Добавьте в jest.config.ts:

export default {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

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

// math.ts
export const add = (a: number, b: number): number => a + b;

// math.test.ts
import { add } from './math';

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

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

Моки (mocks) в Jest:

// api.ts
export const fetchData = async (id: string) => {
  const response = await fetch(`/api/${id}`);
  return response.json();
};

// api.test.ts
jest.mock('./api', () => ({
  fetchData: jest.fn().mockResolvedValue({ id: '1', name: 'Test' }),
}));

import { fetchData } from './api';

test('should return mocked data', async () => {
  const data = await fetchData('1');
  expect(data.name).toBe('Test');
});

2. Mocha + Chai — гибкая альтернатива

Mocha — это тест-раннер, который даёт полный контроль над процессом. Chai добавляет выразительные утверждения (assertions).

Установка:

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

Пример интеграционного теста с асинхронностью:

// database.ts
export class Database {
  async getUser(id: number): Promise<{ id: number; name: string }> {
    // эмуляция запроса
    return { id, name: 'Alice' };
  }
}

// database.test.ts
import { expect } from 'chai';
import { Database } from './database';

describe('Database', () => {
  it('should return user by id', async () => {
    const db = new Database();
    const user = await db.getUser(1);
    expect(user).to.have.property('name', 'Alice');
  });
});

Для запуска используйте команду mocha --require ts-node/register src/**/*.test.ts.

3. Cypress — E2E-тестирование для веб-приложений

Cypress идеально подходит для тестирования фронтенда на TypeScript. Он работает в реальном браузере и имеет удобный GUI-интерфейс.

Установка:

npm install --save-dev cypress @cypress/types

Пример E2E-теста для страницы входа:

// cypress/integration/login.spec.ts
describe('Login Page', () => {
  it('should display error on invalid credentials', () => {
    cy.visit('/login');
    cy.get('[data-cy=email]').type('user@example.com');
    cy.get('[data-cy=password]').type('wrong');
    cy.get('[data-cy=submit]').click();
    cy.get('[data-cy=error]').should('contain', 'Invalid credentials');
  });

  it('should redirect on successful login',