Покрытие кода TypeScript

Karma — это тестовый раннер для JavaScript и TypeScript, который позволяет запускать тесты в реальных браузерах и получать подробные отчёты о покрытии кода. Использование Karma в связке с TypeScript требует настройки транспиляции, интеграции с тестовым фреймворком (обычно Jasmine, Mocha или QUnit) и подключением инструментов для анализа покрытия, таких как Istanbul через karma-coverage.

Настройка проекта для TypeScript

Для корректной работы с TypeScript требуется подготовить несколько ключевых компонентов:

  1. tsconfig.json Этот файл определяет правила компиляции TypeScript в JavaScript. Для тестирования важно включить опцию sourceMap: true, чтобы отчёты о покрытии отображали оригинальный TypeScript-код, а не транспилированный JavaScript. Пример минимального tsconfig для тестов:
{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["src/**/*.ts", "test/**/*.ts"]
}
  1. Установка необходимых зависимостей
npm install --save-dev karma karma-jasmine jasmine-core karma-chrome-launcher karma-coverage ts-loader typescript
  • karma — основной раннер тестов.
  • karma-jasmine и jasmine-core — фреймворк тестирования.
  • karma-chrome-launcher — запуск тестов в браузере Chrome.
  • karma-coverage — сбор покрытия кода.
  • ts-loader — транспиляция TypeScript для Karma.

Конфигурация Karma

Файл karma.conf.js содержит настройки тестового окружения. Ключевые элементы для работы с TypeScript и покрытием кода:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.ts',
      'test/**/*.ts'
    ],
    preprocessors: {
      'src/**/*.ts': ['webpack', 'sourcemap'],
      'test/**/*.ts': ['webpack', 'sourcemap']
    },
    webpack: {
      mode: 'development',
      devtool: 'inline-source-map',
      module: {
        rules: [
          {
            test: /\.ts$/,
            use: [
              {
                loader: 'ts-loader',
                options: { transpileOnly: true }
              }
            ],
            exclude: /node_modules/
          }
        ]
      },
      resolve: {
        extensions: ['.ts', '.js']
      }
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/',
      includeAllSources: true
    },
    browsers: ['ChromeHeadless'],
    singleRun: true
  });
};

Основные моменты конфигурации:

  • preprocessors — позволяют Karma обрабатывать TypeScript через Webpack и генерировать sourcemaps для корректного покрытия.
  • webpack.devtool = inline-source-map — обеспечивает правильное отображение строк TypeScript в отчётах покрытия.
  • coverageReporter — настройка генерации отчётов покрытия. Опция includeAllSources: true гарантирует, что файлы без тестов тоже попадут в отчёт.

Генерация и интерпретация отчётов покрытия

После запуска karma start создаётся директория coverage/, в которой находятся:

  • index.html — визуальный отчёт с подсветкой строк, которые покрыты тестами и которые пропущены.
  • lcov.info — машинно-читаемый формат отчёта, который может быть использован CI/CD системами.

Покрытие кода измеряется по следующим критериям:

  • Statements — выполнение каждой инструкции кода.
  • Branches — проверка всех ветвлений (if/else, switch).
  • Functions — вызовы всех функций.
  • Lines — покрытие по строкам.

Визуальный отчёт позволяет легко определить, какие части TypeScript-кода не тестируются, и добавлять недостающие тесты для повышения качества проекта.

Советы по улучшению покрытия TypeScript

  1. Разделение тестов на модульные Тесты должны проверять отдельные функции или классы. Это упрощает анализ покрытия и позволяет точно видеть, какие ветви кода не используются.

  2. Использование sourceMap Без sourceMap отчёты покрытия будут ссылаться на скомпилированный JavaScript, что делает отладку сложной.

  3. Интеграция с CI/CD Karma и karma-coverage можно подключить к Jenkins, GitHub Actions или GitLab CI для автоматической проверки покрытия при каждом коммите.

  4. Игнорирование стороннего кода В конфигурации можно исключать node_modules или генерируемые файлы, чтобы отчёт отражал только собственный TypeScript-код.

Интеграция с TypeScript-проектами больших масштабов

Для больших проектов важно правильно структурировать тесты:

  • src/ — основной код на TypeScript.
  • test/ — отдельные файлы тестов с зеркальной структурой модулей src/.
  • Использовать path mapping через tsconfig.paths для удобного импорта модулей.
  • Настроить karma-webpack для оптимизации сборки и ускорения тестирования.

Использование Karma совместно с TypeScript и karma-coverage позволяет обеспечить прозрачное, детализированное покрытие кода, выявлять пропущенные ветви и улучшать качество программного обеспечения на этапе разработки.

Оглавление