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

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

HTML-отчет IstanbulJS со счетчиком посещений в неправильных строках

Я создал репозиторий 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-plugin-typescript2 и rollup-plugin-istanbul. Это работает отлично, мой исходный код на TypeScript становится файлом, готовым для включения с тегом <script> в браузер и использования.

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

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

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

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

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


typescript javascript rollupjs cypress istanbul
person Pedro A    schedule 01.03.2019    source источник
comment
Вам действительно нужно использовать Cypress? Для аналогичной вещи я использовал Intern.js с некоторой транспиляцией из ES6 в ES5 с Rollup, и покрытие кода работало как шарм.   -  person Troopers    schedule 01.03.2019
comment
@Troopers Привет, спасибо за подсказку, посмотрю позже. Я хотел, чтобы cypress проводил тестирование интерфейса, нажатие на кнопки, тестирование снимков и т. Д. Именно то, на что кипарис светит. Может ли Intern.js это сделать?   -  person Pedro A    schedule 01.03.2019
comment
Функциональное тестирование поддерживается. Для снимка я не уверен   -  person Troopers    schedule 01.03.2019
comment
@Troopers Спасибо. Я рассмотрю возможность его использования, но пока я все еще ищу решение в Cypress. Также вы сказали, что использовали транспиляцию ES6 - ›ES5, но как насчет TypeScript? Это сработает?   -  person Pedro A    schedule 01.03.2019
comment
Intern.js написан на TypeScript и протестирован с помощью Intern. Так что я думаю, что это работает   -  person Troopers    schedule 01.03.2019
comment
Vue-cli может сгенерировать точно такую ​​же конфигурацию. Вы должны создать образец проекта и посмотреть, что они сделали   -  person Sean Kelly    schedule 07.03.2019
comment
@SeanKelly - Вы уверены, что он делает отчеты о покрытии кода? Похоже, они используют только cypress + typescript, но не instanbuljs или nyc   -  person Pedro A    schedule 08.03.2019

Ответы (2)


arrow_upward
6
arrow_downward

Я использовал 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-react-app-ejected :

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

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

vanilla-typescript-webpack:

Покрытие кода в обычном проекте машинописного текста и веб-пакета использует:

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

введите описание изображения здесь

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

person bkucera    schedule 10.03.2019
comment
Идеально!! Большое тебе спасибо. Награда заслуженная. Я также открыл PR по вашему репо с незначительным исправлением. В ближайшем будущем я буду обновлять свое собственное репо с вашими изменениями, добавляя их вручную, по частям, так что я полностью понимаю, что происходит. Пока у меня был только шанс запустить ваш код и убедиться, что он действительно работает! Большое тебе спасибо. - person Pedro A; 11.03.2019

arrow_upward
0
arrow_downward

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

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

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

person Sean Kelly    schedule 07.03.2019
comment
Привет, прежде всего, большое спасибо за то, что уделили время :) Я сейчас разговариваю по телефону, не могу сейчас подробно рассмотреть, но сделаю это позже или, возможно, завтра. Кстати, если вы думаете, что накопительный пакет не работает, не стесняйтесь предлагать решение с чем-нибудь другим. Rollup не является жестким требованием для этого вопроса, только TypeScript, IstanbulJS и Cypress. - person Pedro A; 08.03.2019
comment
Еще раз спасибо за попытку, но это не решило мою проблему. Покрытие изменилось, но в отчете о покрытии все еще нет данных: см. Здесь результат I ' получил с вашими доработками. - person Pedro A; 10.03.2019