web-dev-qa-db-ja.com

Cypress、TypeScript、IstanbulJSを連携させようとしています

TypeScript で記述され、 Cypress でテストされたコードに対して、 IstanbulJS でコードカバレッジレポートを生成しようとしています。しかし、物事は場違いに報告されます：

IstanbulJS's HTML report with hit counter in the wrong lines

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で記述されたコードがあり、それをトランスパイルして、 rollup 、 rollup-plugin-TypeScript2 、および rollup-plugin）を使用して単一のJavaScript（ES6）ファイルにバンドルします。 -istanbul 。これは完全に機能します。TypeScriptのソースコードは、<script>タグを付けてブラウザに含めて使用できるファイルになります。

次に、 cypress を使用して、上記のトランスパイルされたJSコードを含むHTMLページでテストを実行します。これも完璧に機能し、サイプレスは元々TypeScriptで書かれた私の関数をテストすることができます。

次に、これらのテストのカバレッジレポートを設定します。サイプレスでFAQ質問コードカバレッジはありますか？を見つけることができます。現在、回答はno（組み込み機能に関して）が 議論中 将来行われることを歓迎するものとして、そして 実際にはそれは可能です） 。

問題は、上記でそれを行った人はTypeScriptを使用していなかったということです。わたし。だから私はやるべき少し余分なステップがあります、そしてこれは私が現在立ち往生しているところです。直感的には、これはソースマップに正しく従うようにIstanbulJSを構成するだけの問題だと思いますが、その方法に関するドキュメントは見つかりませんでした。 私が見つけることができるTypeScript + IstanbulJSに関するすべてのガイド 私はMochaを使用していると想定していますが、そうではありません-TypeScriptからのトランスパイルソースでサイプレスを使用しています。

注：ヒノキのテストに対する通常の「コードカバレッジ」アプローチはあまり意味がないことを私は知っていますが、私の正確な状況では、それはそうだと思います、私はすでにそれについて考えました、このフレームを質問に挑戦させないでください。

編集：明確にするために、ここでロールアップを使用することは難しい要件ではありません。他のものを使用するソリューションがある場合は、それも完全に受け入れられます。重要なのは、タイトルが示すように、サイプレス+ TypeScript + IstanbulJSです。

javascripttypescriptcypressistanbulrollupjs
12
Pedro A

私はこれを理解しようとしばらく時間を費やしました。ロールアップが互換性のあるコードを生成する方法に問題があるようです。 tsconfigターゲットを変更することで、最大75％のブランチを取得できました。

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

すべてのコードをカバーしていますが、渡されるロールアップによって生成されたブランチが必要です。しかし、サイプレスがこのような機能テストを目的としているとは思いません。

0
Sean Kelly