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

Question

Я пытаюсь сгенерировать отчеты о покрытии кода с помощью 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.

Answer 1

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

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

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

тогда вы сможете просматривать отчет о покрытии html в каталоге coverage/

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

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

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

create-реакции-app-ejected :

кипарис с настройкой покрытия кода для недавно извлеченного 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

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

Answer 2

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

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

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