カルマ+ webpackの例vueユニットテスト環境を設定する方法

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

私は最近、vueコンポーネント自動化テストのシェアを行いました。次に、vueコンポーネントのテスト環境構築プロセスを構成します。 今回構築したテスト環境は開発環境から分離されているため、理論的にはvueを使用するすべての開発環境に適用できます。

準備する

この記事の焦点はテスト環境を構築することです。だから私はwebpack vue開発環境を書きました。

コードアドレス: https : //github.com/MarxJiao/vue-karma-test

ディレクトリ構造は次のとおりです

ディレクトリ構造

App.vueとchild.vueコード

App.vue

Child.vue

その効果は次のとおりです。

操作効果

テスト環境のセットアップ

注:ここではwebpack 1.xのバージョンが使用されています。webpack 2+の設定は後で紹介されます。

カルマをインストールする

カルマがコマンドで実行されるので、まずカルマ-cliをインストールします:npm install -g karma-cli

カルマをインストールする:npm install karma -save-dev

プロジェクトのルートディレクトリ(karma init)で実行します。

現時点では、テストフレームワークの使用を促すメッセージが表示され、キーボードを使用してフレームワークを選択することができます。ジャスミン、モカ、クォーツ、ノードユニット、nunitがあります。 ここではジャスミンをテストフレームワークとして使用し、ジャスミンにはアサーションライブラリが付属していますので、他のライブラリを導入する必要はありません。

選択枠

require.jsを使用するかどうかを確認するために、ここでは使用しません。

require.jsを使用する

ブラウザを選択し、より多くを選択することができます。 単体テストではjsの環境、すなわちインタフェースを実行できないようにする必要があります。そのためPhantomJSを選択します。 PhantomJSは、事前にコンピュータにインストールする必要があることに注意してください。 あなたが困っている場合、クロムを選ぶのが最も便利です。

ブラウザを選択

テストスクリプトの格納場所を記入し、ユニバーサルマッチングをサポートします。 これをtest / unitディレクトリに置き、.spec.jsで終了します。

スクリプトファイル

現時点では、テストケースの作成を開始していないため、一致するファイルは存在しないため、最初に無視してください。

プロンプトがファイルと一致しませんでした

以前の形式に一致する質問ファイルが除外される必要がありますか? 直接スキップしてください。

ファイルを除外する

カルマにすべてのファイルを監視させ、ファイルが変更されたときにテストを自動的に実行できるようにするかどうか。 環境段階なので、いいえを選びません。

時計を開くかどうか

Enterを押すと、カルマ構成ファイルkarma.conf.jsがプロジェクトのルートディレクトリに生成されていることがわかります。

ディレクトリ

インストールの依存関係

上記の操作を実行して、カルマが私たちのために次の依存関係をインストールしていることを確認します。カルマ – ジャスミンはカルマのジャスミンプラグインです。カルマ – ファントムジャス – ランチャはファントムを開くためのプラグインです

カルマ自身がインストールした依存関係

テストフレームワークはジャスミンを選択し、ジャスミンコアをインストールする

webpackを使用してvueコンポーネントをパッケージ化するには、webpack、karma-webpack、vue-loader、vue-template-compiler、css-loaderをインストールする必要があります。

bableを使用してES6構文を処理し、babel-core、babel-loader、babel-preset-es2015をインストールします。

実行:npm install -save-devジャスミンコアwebpackカルマwebpack vue-loader vueテンプレートコンパイラcss-loader babel-core babel-loader babel-preset-es2015

設定ファイルを変更する

karma.conf.jsの先頭にある最初のリファレンスwebpack

Karma.conf.js

webpack設定を設定項目に追加します。

Karma.conf.js

Webpackで処理したファイルを前処理オプションに追加します。 ここでは、webpackを使用してテストケースを処理します。

Karma.conf.js

最初のテストを書く

テストケースを作成して実行するには、最初にapp.vueファイルのタイトル値が期待どおりに読み込まれているかどうかをテストします。 新しいテストフォルダを作成し、テストフォルダの下にユニットフォルダを作成し、ユニットフォルダにapp.spec.jsファイルを作成します。 ディレクトリ構造は次のとおりです。

ディレクトリ

App.spec.jsの内容は次のとおりです

Test / unit / app.spec.js

現在のディレクトリでコマンドラインを開き、karma startと入力すると、karmaはテストを待機するサービスを開始します。

運命の始まり

現在のコマンドウィンドウを閉じずにコマンドウィンドウを開き、カルマ実行を入力すると、テストによって渡されたプロンプトが表示されます。

カルマ実行

テストカバレッジを表示する

ユニットテストはホワイトボックステストであり、テストカバレッジはテストインジケータの1つです。 カルマは、テストカバレッジを見るためのカルマカバレッジを提供します。

karma-coverageをインストールする:npm install karma-coverage -save-dev

カバレッジを設定し、前処理されたファイルにカバレッジを追加する

Karma.conf.js

レポートでカバレッジを使用する

Karma.conf.js

カバレッジレポートの表示方法を設定する

Karma.conf.js

カルマ開始とカルマ実行を再度実行すると、カバレッジビューフォルダが生成されていることがわかります。

ディレクトリ

ブラウザの上の画像でindex.htmlを開くと、カバレッジが生成されていることがわかります。

Index.html

「unit /」をクリックすると、app.spec.jsコードに3036行が表示され、テストカバレッジはパッケージ化後のファイルのカバレッジです。

Unit / index.html

ファイルをクリックすると、パッケージ化された後のコードになります。 この範囲は明らかに、テストしたいソースファイルの範囲ではありません。

Unit / app.spec.js

どうすればいいですか? ブラウザの開発についても、コンパイルされたファイルであると考えて、ソースをどのように見つけますか?

ビンゴ!sourcemap。

もちろん、sourcemapだけでは十分ではありません。テストカバレッジのartifact ispartaがデビューしました。

インストール:npm install -save-dev isparta isparta-loader

vueのjsローダーを変更する

Karma.conf.js

カルマスタートとカルマを再度実行すると、テストカバレッジファイルがソースファイルを見つけることができ、カバレッジはjsコードのみであり、無関係なテンプレートやスタイルは含まれていないことがわかります。

Index.html

Src / index.html

Src / app.vue.html

待って、どのようにファイルの3000以上の行が来る、このカバレッジは無駄です、あなたはそれを取り除くことができますか? 答えは「はい」です。 karma.conf.jsでプリプロセッサのカバレッジを削除するだけです。

Karma.conf.js

カルマスタートとカルマを再実行すると、カバレッジファイルがこのようになります。

Index.html

最後に、カルマウォッチモードを開き、カルマスタートを実行してファイルの変更を監視し、テストを自動的に実行する必要があります。

Karma.conf.js

この時点で、karma + webpackによって構築されたvueユニットテスト環境が準備されました。

記事には写真がたくさんありますが、それは少し引っ張られています。気分が良くない場合は、嘔吐することができます。

テストスクリプトの記述方法については、この記事のVueユニットテストケースの記述を参照してください。

webpack2を更新

上記の内容はwebpack 1.xバージョンに基づいていますが、webpack 2以上を使用する場合は、isparta-loaderをi stanbul -instrumenter-loaderに置き換え、 karma-coverage-istanbul-reporterを使用してテストレポートを生成する必要があります。 設定方法: https : //github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js

関連リンク

Vueユニットテストケースの作成

カルマ公式サイト

Vueユニットテスト

Ispartaローダー


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ