問題タブ [karma-webpack]

Karma で TS ファイルをトランスパイルするように Webpack を構成しました。Node と CoreJS の型も含めました。ただし、テストを実行しようとすると...

を使用して webpack-env を追加しようとしましnpm install --save-dev @types/webpack-envたが、さらに多くのエラーが発生します。

私のカルマ設定は次のようになります...

バージョン

webpack 1.14.0、ノード v6.9.2、Typescript 2.1.4

公式ドキュメントは、webpack 構成を複製する必要があることを暗示しているようです。

ただし、作業中の webpack 構成をコピーして貼り付け始めると、エラーが発生し始めました。たとえば、ES6 コードはトランスパイルされませんでした (babel が構成されていても)。Commons チャンク プラグインは、エラーが発生したため機能しませんでした。karma.conf を以下に示します。

Karma テスト ランナーの「起動」時間が非常に遅いことを経験していました。実行のプロファイリングを行った後、ソース マップの作成が最大の速度低下の原因であることに気付きました。

より具体的にはkarma-webpack、プリプロセッサとして webpack を使用していることを考えると、カルマによってテスト ファイルがロードされるたびに、ソース マップを生成する webpack にフィードされます。

アプリとベンダー コードを分割/チャンクしていないことを考えると、各テスト ファイルは同じベンダー ソース マップ (インライン) を取得していました。

ファイルのソース マッピングが発生しないようにするだけで、これを修正できると思っていnode_modules/ましたが、入力ソース/モジュール ファイルではなく、最終的なアセット ファイルに基づいて、ファイルをソース マッピングから除外することしかできないことに気付きました。

そこで、このプラグインがアプリとベンダー コードを別々のチャンクに自動的に分割することを発見しました (各ベンダー モジュールを手動でリストする必要はありません)。

それでも、Karma の実行中にこのエラーが発生し始めました。 ReferenceError: Can't find variable: webpackJsonp

これは、ベンダーとアプリのコードが別々のチャンクに分割されているという事実をカルマが認識していないため、filesオプションで構成されたコードのみが含まれているためだと確信しています (つまり、テストファイル自体であり、ベンダー ファイル)。

そのfiles構成オプションは、各テスト ファイルが前処理される前に解析され、処理されるようです。つまり、オプションでベンダー チャンクを指定することはできないと思います。Karmafilesは試行時にそれを認識しないためです。それを探す（早すぎる）。

私が見ることができる唯一の解決策は次のとおりです。

• ベンダーとアプリのチャンク ファイルの分離を処理できるように、Karma の実装方法を変更します。
• 使用して前処理する代わりにkarma-webpack、アプリをテスト モードでビルドしてから、テスト ビルド ディレクトリの Karma を実行します (ベンダー チャンクが十分早く存在するようにします)。

私が見逃した解決策はありますか？

一般的な問題ではないように思われるのは奇妙だと思います。

編集 1

私はこれを見つけましたが、そこの人々はwebpack構成で複数のエントリポイントを使用することを提案しています(つまり、アプリ用とベンダー用)。vendorこれが Karma で機能するかどうか試してみますが、配列に何を入れたかを手動で追跡しなければならないという大きな欠点があります (私の意見では) 。つまり、パッケージをインストールするたびに、それをアレイに追加する必要があり、その逆も同様です。

編集 2

複数のエントリ ポイント (webpack 構成内) を使用しても、ソース マップ webpack プラグインを構成してベンダー ファイルを除外する前には機能しません (webpack-split-by-pathプラグインの場合はそうです)。

「最初にビルドしてからテストする」アプローチを実装してみます。

Webpack にバンドルされている Angular 2 アプリケーションがあり、Karma-webpack を使用して Karma を介して Jasmine でテストされています。開発時には、コードがバンドルされ、正しく提供されます。テスト時に、awesome-ts-loader が .spec.ts ファイルで「モジュールの解析に失敗しました」というエラーをスローします。

Github Readme で説明されている karma-webpack の「代替方法」を使用して、すべての .spec ファイル (karma-shim.js 内) をロードしています。

いくつかのサンプル リポジトリによると、私の karma.conf.js の関連セクションは正しく構成されています。

そして、私のWebpack構成のすべてが並んでいます（部分的なサンプル）：

tslint からのエラーは、Webpack が spec ファイルを正しく見つけていると思わせますが、awesome-ts-loader に渡されていないか、tsconfig.json をロードしていない可能性があります。（繰り返しますが、開発時にはすべて正常にロードされます）。

次のエラーが発生しました

テスト

Karma.conf.js の webpack 関連の構成

なぜ私が注射に苦労したか知っていますか？