問題タブ [karma-webpack]

AngularJS で Karma、Jasmine、Webpack を使用してテストをセットアップしようとしています。私のwebpackは正常に動作しており、次を使用してWebサイトを実行できますnpm start

簡単なテストは問題なく動作しますが、app.js を追加しようとするとすべてがうまくいきません。

私は多くの多くの検索と多くの解決策を試しました。考えないでください、行き止まりにぶつかった瞬間にこの質問を書いています。今日は一日中グーグルで検索して、可能な解決策を見つけました。

私の karma.conf.js ファイルがあります

私が書いたテストは

そして、このエラーで失敗します:

私はOSXを使用しています。技術的には、webpack はコンパイルされたファイルを Karma に提供する必要があります。しかし、予期しないトークンのインポートは、ファイルがコンパイルされておらず、Karma に提供されていないことを意味します。

助けてください。

私もbabelでコンパイルしようとしましたが、それもどこにも行きませんでした。既に webpack 構成がビルドされており、プロジェクトが webpage.config を使用してコンパイルされているため、webpack に移動しました。

アップデート

この質問に無頓着な人には、Felix の OPTION #1 を使用しました。コンパイルしたファイルをカルマに含めました。それは魅力のように機能しました。

Webpack は、ファイルが変更されるたびにファイルを自動コンパイルするため、出力を追加するだけで問題なく動作しました。

私のファイル配列は次のようになりました

残念ながら、2 番目のオプションに http を使用する必要がありましたが、正常に動作しています。

私は最近、あらゆる種類のものを処理していたカスタム gulp スクリプトから webpack への移行を開始しました。ブラウザーでのクライアント アプリのトランスパイル、バンドル、および提供がうまく機能するところまで機能しています。

ここで、バンドルされた app.js ファイルに対してカルマ テストを実行するために gulp を使用していたとき、gulp スクリプトは最初に app.js ファイルをバンドルし、それを dist フォルダーに吐き出しました。このファイルは、それに対してテストを実行するためにカルマによって使用されます。私の gulp テスト タスクは、テスト ファイルの変更やバンドル ファイルの変更も監視し、それに基づいてテストを再実行します。

webpack を使用すると、この dist/app.js がディスクに書き込まれるのではなく、メモリ内に存在することを理解しています (少なくともそれが私が設定した方法です)。それに関する問題は、バンドルされたアプリ (で正常に提供webpack-dev-server --openされる) が何らかの理由でカルマによって読み込まれず、欠けているパズルのピースが何であるかを理解できないことです。

これは、私のフォルダー構造がどのように見えるかです (問題に関連する可能性のある最も基本的なものだけを残しました):

これは私のwebpack.config.jsです

これは私の karma.conf.js です

これは、基本的にアプリへのエントリ ポイントである boot.ts です。

これは app.ts です (これは、その下にあるものをすべて参照します。

最後に、account.service.spec.js です。

そして、これは実行の出力ですkarma start

トリガーされないconsole.logsを残したいくつかの場所に注意してください。それが、アプリがロードされないことを私が知っている方法です。それと、ジャスミンがテストしたいサービスを注入できないという事実。

私は使用しています：

何か案は？私は何を間違っていますか？私の webpack.config.js は、私の AngularJS/TS アプリをバンドルし、基本的にそれをカルマにフィードすることになっているという印象を受けていますが、何らかの理由で、それはうまくいかないようです。それとも、これがどのように機能するかについて根本的な誤解がありますか?

ありがとうございました。

問題を簡単に再現できるように、いくつかのファイルを単純なアプリに抽出してgithubに配置しました。

編集：

以下を置き換えることで、テストを実行することができました。

カルマセットアップで

しかし、それはドリルダウンしたり、アプリの残りの部分をロード/インポートしたりしません。次に、テストしたいクラスだけを仕様にインポートしようとしましたが、テストしているクラスが使用している DI 注入サービスをモックできませんでした。とにかく、私はこの段階でこれをほとんどあきらめ、これを行う方法を理解しようとするのをやめ、ang2+ に移行しました。

これについては何も見ていませんが、単一の Karma 実行に複数の karma-conf.js ファイルを含めることができるかどうか疑問に思っていましたか? 基本的には、CI用のカバレッジとtslintの構成と、ローカル開発用のテストのみの構成を考えています。