tsconfig.json конфигурация

Файл tsconfig.json управляет поведением TypeScript при работе с проектом и является ключевым инструментом для интеграции Cypress в TypeScript-среду. Он определяет компиляцию, пути, поддержку модулей и другие параметры, влияющие на корректность работы тестов.

Структура файла tsconfig.json

Файл состоит из основных разделов:

{
  "compilerOptions": {},
  "include": [],
  "exclude": []
}
  • compilerOptions — задаёт параметры компилятора TypeScript.
  • include — массив путей или шаблонов файлов, которые должны быть включены в компиляцию.
  • exclude — массив файлов или папок, исключаемых из компиляции.

Для проектов с Cypress часто создают отдельный tsconfig.json в папке cypress для тестов, чтобы не смешивать настройки с основной кодовой базой.

Основные compilerOptions для Cypress

  1. target Определяет версию JavaScript, в которую будет транслироваться код TypeScript. Рекомендуется использовать:
"target": "es6"

Это обеспечивает совместимость с современными браузерами и удобную работу с асинхронными функциями.

  1. module Задаёт систему модулей. Для Cypress чаще всего используют:
"module": "commonjs"

Так как Cypress работает в Node.js для исполнения тестов.

  1. strict Включение строгой проверки типов повышает надёжность тестов:
"strict": true

Это включает все строгие проверки TypeScript, включая noImplicitAny, strictNullChecks и другие.

  1. esModuleInterop Обеспечивает корректный импорт CommonJS-модулей:
"esModuleInterop": true

Необходим при использовании сторонних библиотек и плагинов Cypress.

  1. types Позволяет указать глобальные типы, которые будут доступны во всём проекте. Для Cypress важно подключить типы самого фреймворка:
"types": ["cypress", "node"]

node нужен для поддержки встроенных модулей Node.js.

  1. lib Определяет библиотеки, используемые при компиляции. Для современных тестов достаточно:
"lib": ["es6", "dom"]

dom нужен для взаимодействия с браузерными API.

Пример полного tsconfig.json для папки Cypress

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["cypress", "node"],
    "lib": ["es6", "dom"],
    "resolveJsonModule": true,
    "isolatedModules": false
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}
  • skipLibCheck отключает проверку типов в библиотечных файлах, ускоряя компиляцию.
  • forceConsistentCasingInFileNames предотвращает ошибки при работе на системах с разным регистром файлов.
  • resolveJsonModule позволяет импортировать JSON-файлы напрямую.
  • isolatedModules оставляется false, чтобы разрешить использование глобальных типов Cypress.

Взаимодействие с основным проектом

Если основной проект использует TypeScript, часто создают два tsconfig:

  • tsconfig.json — для основной кодовой базы.
  • tsconfig.cypress.json — для тестов.

Файл тестов может расширять основной конфиг через свойство extends:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Это позволяет наследовать настройки основного проекта и добавлять специфические параметры для тестов.

Поддержка IntelliSense и автодополнения

Подключение типов Cypress через types обеспечивает автодополнение команд Cypress в редакторах, таких как VSCode. Например, команды cy.visit(), cy.get() и плагины будут распознаваться как полноценные методы с проверкой типов, что снижает вероятность ошибок при написании тестов.

Рекомендации по организации

  • Разделять конфигурации для приложения и тестов, чтобы не конфликтовали пути и типы.
  • Включать строгий режим для тестов, чтобы ловить потенциальные ошибки на этапе компиляции.
  • Использовать skipLibCheck для ускорения сборки, но не отключать строгую проверку в основном коде.

Эти настройки обеспечивают корректную работу TypeScript в Cypress, поддержку автодополнения и проверку типов, что делает процесс тестирования более надёжным и предсказуемым.

Оглавление