web-dev-qa-db-ja.com

Angular 2およびjQuery-テスト方法は？

Angular 2プロジェクトにAngular-CLI（webpackバージョン）を使用していて、jQueryも使用する必要があります（残念ながら、これはSemantic-UIの依存関係であり、使用しています）メニューのドロップダウンを処理するため）。

私がそれを使用している方法：

npm install jquery --save

次に、scripts配列のangular-cli.jsonファイルをリストします。

scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
]

したがって、バンドルファイルに含まれ、このファイルは自動的にhtmlファイルをルート化するために使用されます。

<script type="text/javascript" src="scripts.bundle.js">

次に、必要なファイルにdeclare var $: any;を入れれば、うまく機能します。

ただし、Karmaがエラーng testをスローするため、$ is not definedテストには問題があります。

jqueryangularkarma-jasmineangular-cliangular2-testing
16
wewo

これは、Karmaによって提供されたテスト用htmlファイルに、通常提供されるバージョンのようにscripts.bundle.jsファイルが含まれていないためです。

解決策は簡単です。 jqueryファイルへの同じパスをプロジェクトのルートフォルダーのkarma.config.jsファイルに含めるだけです。このファイルは、プロジェクトのルートで入手できます。

files配列で、次のようにwatchedフラグを使用してパスを追加します。

files: [
  { pattern: './node_modules/jquery/dist/jquery.min.js', watched: false },    
  { pattern: './src/test.ts', watched: false }
]

KarmaはjQueryの依存関係について知っているはずです。

25
wewo