Попытка заставить Cypress, TypeScript и IstanbulJS работать вместе
Я пытаюсь создать отчеты о покрытии кода с помощью СтамбулJS для моего кода, написанного на Машинопись и протестированного с помощью Кипарис. Но о вещах сообщают не к месту:
Я создал 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) с свернуть, накопительный плагин-typescript2 и накопительный плагин-Стамбул. Это отлично работает, мой исходный код на TypeScript становится файлом, готовым для включения с тегом <script> в браузер и использования.
Во-вторых, я использую кипарис для запуска тестов на HTML-странице, которая включает упомянутый выше транспилированный код JS. Это также отлично работает, Cypress может тестировать мои функции, изначально написанные на TypeScript.
Теперь я хочу настроить отчеты о покрытии для этих тестов. В часто задаваемых вопросах Cypress мы можем найти вопрос Есть ли покрытие кода?, ответ на который в настоящее время нет (относительно встроенной функциональности), но в обсуждении, как желательное решение в будущем, и на самом деле это можно сделать.
Дело в том, что парень, который сделал это выше, не использовал TypeScript. Я. Итак, мне нужно сделать небольшой дополнительный шаг, и именно здесь я сейчас застрял. Интуитивно я думаю, что это просто вопрос настройки IstanbulJS для правильного следования исходным картам, но я не смог найти никакой документации о том, как это сделать. Все руководства по TypeScript + IstanbulJS, которые я могу найти предполагает, что я использую Mocha, но это не так — я использую Cypress с транспилированным исходным кодом из TypeScript.
Примечание. Я знаю, что в целом обычный подход «покрытия кода» к тестированию кипариса не имеет особого смысла, но в моей конкретной ситуации я думаю, что имеет, я уже думал об этом, пожалуйста, не делайте этот кадр вызов на вопрос.
Обновлено: Чтобы было ясно, использование свертки здесь не является жестким требованием. Если у вас есть решение, которое использует что-то еще, оно также вполне приемлемо. Главное, как говорится в заголовке, Cypress + TypeScript + IstanbulJS.
@Troopers Привет, спасибо за совет, я посмотрю позже. Я хотел, чтобы кипарис делал тестирование интерфейсов, нажатие на кнопки, тестирование снимков и т. д. Именно то, в чем кипарис светит. Может ли Intern.js сделать это?
@ Солдаты Спасибо. Я рассмотрю возможность его использования, но пока я все еще ищу решение в Cypress. Кроме того, вы сказали, что использовали транспиляцию ES6 -> ES5, но как насчет TypeScript? Будет ли это работать?
Intern.js написан на TypeScript и протестирован с помощью Intern. Так что я думаю, что это работает
Vue-cli может генерировать именно такую конфигурацию. Вы должны создать пример проекта и посмотреть, что они сделали
@SeanKelly - Вы уверены, что он составляет отчеты о покрытии кода? Похоже, они используют только кипарис + машинопись, но не инстанбулдж или нью-йорк.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я потратил некоторое время, пытаясь понять это. Кажется, проблема заключается в том, как накопительный пакет генерирует совместимый код. Я смог поднять ветку до 75%, изменив цель tsconfig.
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
}
}
Он охватывает весь код, но должна быть ветвь, сгенерированная накопительным пакетом, который передается. Но я не думаю, что Cypress предназначен для функционального тестирования, подобного этому.
Привет, во-первых, большое спасибо за потраченное время :) Я сейчас на телефоне, не могу сейчас подробно посмотреть, но сделаю позже или, возможно, завтра. Между прочим, если вы считаете, что свертка не работает, не стесняйтесь предлагать решение с чем-то другим. Rollup не является жестким требованием для этого вопроса, только TypeScript, IstanbulJS и Cypress.
Еще раз спасибо за попытку, но это не решило мою проблему. Покрытие изменилось, но в отчете о покрытии все еще не так: глянь сюда результат, который я получил с вашими изменениями.
Я использовал webpack + babel-loader + @babel/preset-typescript + babel-plugin-istanbul
в основном стратегия такова:
- настройте код своего приложения так, чтобы покрытие создавалось на
window.__coverage__ - после запуска спецификации кипариса используйте
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 проекта:
создать-реагировать-извлеченное приложение:
cypress с настройкой покрытия кода на только что извлеченном create-react-appиспользует:
@babel/preset-typescript@cypress/webpack-preprocessorbabel-loaderbabel-plugin-istanbul
ванильный машинописный веб-пакет:
покрытие кода в проекте vanilla typescript и webpack использует:
@babel/preset-typescript@cypress/webpack-preprocessorbabel-loaderbabel-plugin-istanbul
В обоих из них я также использую код кипариса, чтобы вы могли объединить отчеты о покрытии, но в настоящее время я этого не делаю.
Идеально!! Большое Вам спасибо. Награда заслуженная. Я также открыл PR в вашем репо с небольшим исправлением. В ближайшее время я буду обновлять свое собственное репо вашими изменениями, добавляя их вручную, по частям, поэтому я полностью понимаю, что происходит. На данный момент у меня была только возможность запустить ваш код и убедиться, что он действительно работает! Большое Вам спасибо.
Вам действительно нужно использовать
Cypress? Для аналогичной вещи я использовал Стажер.js с некоторой транспиляцией ES6 в ES5 сRollup, и покрытие кода работало как шарм.