Попытка заставить Cypress, TypeScript и IstanbulJS работать вместе

Я пытаюсь создать отчеты о покрытии кода с помощью IstanbulJS для моего кода, написанного на TypeScript и протестированного с Cypress. Но вещи сообщают о неуместном:

Я создал репозиторий git MCVE специально для этого вопроса, чтобы вы могли воспроизвести именно мою ситуацию:

git clone https://github.com/papb/cy-ts-istanbul-question
cd cy-ts-istanbul-question
npm install
npm test
# And then open the file 'coverage/index.ts.html' to see the image above.

Как это исправить?

подробности

У меня есть некоторый код, написанный на TypeScript, который я переносю и объединяю в один файл JavaScript (ES6) с помощью rollup, rollup-plugin-typescript2 и rollup-plugin-istanbul. Это прекрасно работает, мой исходный код в TypeScript становится файлом, готовым для включения в браузер и использования тега <script>.

Во-вторых, я использую Cypress для запуска тестов на HTML-странице, которая включает в себя транспонированный JS-код, упомянутый выше. Это также отлично работает, Cypress может проверить мои функции, изначально написанные на TypeScript.

Теперь я хочу настроить отчеты о покрытии для этих тестов. На Cypress FAQ мы можем найти вопрос Есть ли покрытие кода? на который в настоящее время нет ответа (относительно встроенной функциональности), но обсуждается как долгожданная вещь, которую нужно сделать в будущем, и на самом деле это можно сделать.

Дело в том, что парень, который сделал это выше, не использовал TypeScript. Я. Так что у меня есть небольшой дополнительный шаг, и вот где я сейчас застрял. Интуитивно, я думаю, что это просто вопрос настройки IstanbulJS для правильного следования исходным картам, но я не смог найти никакой документации о том, как это сделать. Каждое руководство по TypeScript + IstanbulJS, которое я могу найти, предполагает, что я использую Mocha, но я не - я использую Cypress с переданным источником, полученным из TypeScript.

Примечание: я знаю, что в общем случае обычный подход "покрытия кода" к кипарисному тестированию не имеет большого смысла, но в моей конкретной ситуации я думаю, что это так, я уже думал об этом, пожалуйста, не делайте этот кадр вызов на вопрос.

РЕДАКТИРОВАТЬ: Чтобы быть ясно, использование свертки здесь не является жестким требованием Если у вас есть решение, которое использует что-то другое, оно также вполне приемлемо. Важным моментом, как следует из названия, является Cypress + TypeScript + IstanbulJS.

Ответ 1

Я использовал webpack + babel-loader + @babel/preset-typescript + babel-plugin-istanbul

в основном стратегия такова:

инструмент код вашего приложения, так что покрытие создается в window.__coverage__
после cy.writeFile спецификации cy.writeFile используйте cy.writeFile чтобы сохранить отчет в .nyc_output
и сгенерируйте отчет с помощью cy.exec('nyc report --reporter=html')

После этого вы сможете просмотреть отчет о coverage/ в формате html в каталоге coverage/

Вот изменения, которые я внес в ваш проект, переключившись на webpack с полностью рабочим покрытием кода:

https://github.com/Bkucera/cypress-code-coverage/commit/40f88aa27778dc55ad3fae56af66724f73b6496d

Я собрал другие рабочие примеры здесь. В нем приведены примеры настройки покрытия кода поверх недавно извлеченного приложения create-react-app (использует webpack) и проекта vanilla typescript + webpack:

создать-реагировать-приложение-выбрасывается:

кипарис с покрытием коды создан на недавно выбитое create-react-app использует:

@babel/preset-typescript
@cypress/webpack-preprocessor
babel-loader
babel-plugin-istanbul

vanilla-typcript-webpack:

покрытие кода в проекте Vanilla Typcript & Webpack использует:

@babel/preset-typescript
@cypress/webpack-preprocessor
babel-loader
babel-plugin-istanbul

В обоих случаях я также использую код кипариса, чтобы вы могли объединить отчеты о покрытии, но в настоящее время я этого не делаю

Ответ 2

Я провел некоторое время, пытаясь понять это. Похоже, проблема заключается в том, как в результате объединения создается совместимый код. Я смог увеличить ветку до 75%, изменив цель tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

Он охватывает весь код, но должна быть ветвь, сгенерированная с помощью накопительного пакета, который передается. Но я не думаю, что Cypress предназначен для функционального тестирования, как это