angular-cliで1つのテスト仕様のみを実行する方法


143

Angular-CLI(ベータ20)でビルドされたAngular2プロジェクトがあります。

選択した1つのスペックファイルのみに対してテストを実行する方法はありますか?

以前はAngular2クイックスタートに基づくプロジェクトを使用しており、jasmineファイルに手動でスペックを追加できました。しかし、カルマテスト以外でこれを設定する方法や、Angular-CLIビルドでカルマテストを特定のファイルに制限する方法がわかりません。

回答:


224

.spec.tsファイルには、次のようにすべてのテストがdescribeブロックでグループ化されています。

describe('SomeComponent', () => {...}

describe関数名の前に次を付けることで、この単一のブロックだけを簡単に実行できますf

fdescribe('SomeComponent', () => {...}

このような機能がある場合、他のdescribeブロックは実行されません。ところで it=> でも同様のことができfit、「ブラックリスト」バージョンもありxます。そう:

  • fdescribeそしてfit原因となるだけで実行するには、この方法でマークされた関数を
  • xdescribeそして、xitなり除くすべての機能が実行するために、このようにマーク

1
私のhelloworld.component.spec.tsファイルでfdescribeを使用しましたが、app.component.spec.tsファイルのエラーも表示されます。
マスターヨーダ、

1
これは、すべてのコードが評価されているためです(そうでない場合、テスト内にfdescribesが存在することがわかりません)。fdescribeはテスト結果の実行を制限するだけです。他のファイルの構文/ typescriptエラーを修正する必要があります。
TomekSułkowski、2018年

3
OPはこの回答を受け入れましたが、問題は実際には1つのスペックファイルのみを評価する方法だったと思います:P
robertotomás19年

4
これは答えではありません。@iislucasは以下の答えを持っています。
ベンラシコット

遭遇時に失敗するフラグをCI環境に設定できますfdescribexdescribe?ずさんなレビュー担当者(私)が、すべてのテストをスキップするPRをマージしたくありません。
ILikeFood

80

フォルダtest.ts内のファイルを構成しsrcます。

const context = require.context('./', true, /\.spec\.ts$/);

/\.spec\.ts$/テストするファイル名に置き換えます。例えば:/app.component\.spec\.ts$/

これはのテストのみを実行しapp.component.spec.tsます。


8
回答を受け入れる必要があります。このアプローチは、ログ内の大量のgumpfy出力を削除します-冗長であるfdescribeとは異なり
danday74

3
簡単なソリューション:)は多くの時間を節約しました。
Detoxic-Soul

これは、「app」の前のコンポーネントと一致するため、「product-app.component.spec.ts」または「order-app.component.spec.ts」も一致します。私はregxで最高ではありません。「app.component.spec.ts」を具体的にターゲットにする方法はありますか?
hanesjw

/^app.component\.spec\.ts$/を試しましたが、うまくいきませんでした。正規表現テスターで動作するようですが、ng testは何らかの理由でそれを好きではありません。エラーが発生します。
hanesjw

推奨される答えになるはずです
Anil Vangari

55

次のように、Angular CLIngコマンド)を使用して特定のファイルのみをテストできます。

ng test --main ./path/to/test.ts

その他のドキュメントはhttps://angular.io/cli/testにあります

これはスタンドアロンライブラリファイルでは機能しますが、角度のあるコンポーネント/サービスなどでは機能しません。これは、angularファイルが他のファイルに依存しているためです(つまりsrc/test.ts、Angular 7)。悲しいことに、--mainフラグは複数の引数を取りません。


2
これは素晴らしい提案であり、うまくいきます。ありがとうございました!さらに、自動生成されたcomponent.spec.tsファイルをポイントすると、テストが開始されないことがわかりError: AsyncTestZoneSpec is needed for the async() test helper but could not be found. Please make sure that your environment includes zone.js/dist/async-test.jsます。...さらなる回避策は一緒にハッキングされる可能性がありますが、注意が必要です。なぜなら、src/main.tsこの場合、その中で行われるセットアップとそのインポートは利用できないからです。
pulkitsinghal

コマンドを使用しng tてテスト全体を実行すると、テストは合格ですが、特定のファイルを実行するとエラーが発生します。TypeError:TestBedViewEngine.get(node_modules/@angular/core/fesm2015/testing.js:でTestBedViewEngine._initIfNeeded(node_modules/@angular/core/fesm2015/testing.js:3112:1)でnullのプロパティ 'getComponentFromError'を読み取れません: 3230:1)Function.get(node_modules/@angular/core/fesm2015/testing.js:2960:1)at UserContext。<anonymous>(src / app / timebar.service.spec.ts:14:45) "
canbax

1
この回答はAngular 8でも機能します。正確に1つのテスト仕様ファイルを実行するため、これは受け入れられる答えになるはずです。

2
Angular 9の場合、不明なオプション "--main" :(
rmcsharry

6

コマンドラインから選択するファイルを制御できるようにしたい場合は、Angular 7でこれを行うことができました。

要約する@angular-devkit/build-angular:browserと、カスタムwebpackプラグインをインストールしてから作成し、テストファイルの正規表現を通過させる必要があります。例えば:

angular.json-テストビルダーをから変更し@angular-devkit/build-angular:browser、カスタム構成ファイルを設定します。

...

        "test": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
...

extra-webpack.config.js-コマンドラインから正規表現を読み取るwebpack構成を作成します。

const webpack = require('webpack');
const FILTER = process.env.KARMA_FILTER;
let KARMA_SPEC_FILTER = '/.spec.ts$/';
if (FILTER) {
  KARMA_SPEC_FILTER = `/${FILTER}.spec.ts$/`;
}
module.exports = {
  plugins: [new webpack.DefinePlugin({KARMA_SPEC_FILTER})]
}

test.ts-仕様を編集します

...
// Then we find all the tests.
declare const KARMA_CONTEXT_SPEC: any;
const context = require.context('./', true, KARMA_CONTEXT_SPEC);

次に、次のように使用してデフォルトをオーバーライドします。

KARMA_FILTER='somefile-.*\.spec\.ts$' npm run test

私はここ裏話を文書化しました、タイプとミスリンクについての事前の謝罪。私を正しい方向に向けてくれた@ Aish-Anuによる上記の回答への謝辞


4

これは、Angular 7で動作します。ngコマンドの--mainオプションに基づいています。このオプションが文書化されておらず、変更される可能性があるかどうかはわかりませんが、私にとってはうまくいきます。スクリプトセクションのpackage.jsonファイルに行を追加しました。ng testコマンドで--mainオプションを使用して、実行する.spec.tsファイルへのパスを指定します。例えば

"test 1": "ng test --main E:/WebRxAngularClient/src/app/test/shared/my-date-utils.spec.ts",

このようなスクリプトを実行するときに、スクリプトを実行できます。npmセクションの「test 1」をクリックして、Webstormで実行します。


3

この問題は、うなり声を使って自分で解決しました。以下のうなり声スクリプトがあります。スクリプトが行うことは、実行する特定のテストのコマンドラインパラメーターを取得してtest.tsのコピーを作成し、この特定のテスト名をそこに配置することです。

これを実行するには、まず以下を使用してgrunt-cliをインストールします。

npm install -g grunt-cli

以下の不必要な依存関係をpackage.jsonに入れます:

"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^2.0.0",
"grunt-string-replace": "^1.3.1"

実行するには、以下のgruntファイルをGruntfile.jsとしてルートフォルダーに保存します。次に、コマンドラインから次のように実行します。

grunt --target=app.component

これにより、app.component.spec.tsが実行されます。

Gruntファイルは次のとおりです。

/*
This gruntfile is used to run a specific test in watch mode. Example: To run app.component.spec.ts , the Command is: 
grunt --target=app.component
Do not specific .spec.ts. If no target is specified it will run all tests.
*/
module.exports = function(grunt) {
var target = grunt.option('target') || '';
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: ['temp.conf.js','src/temp-test.ts'],
    copy: {
      main: {
        files: [
             {expand: false, cwd: '.', src: ['karma.conf.js'], dest: 'temp.conf.js'},
             {expand: false, cwd: '.', src: ['src/test.ts'], dest: 'src/temp-test.ts'}
             ],
      }
    },
    'string-replace': {
          dist: {
            files: {
              'temp.conf.js': 'temp.conf.js',
              'src/temp-test.ts': 'src/temp-test.ts'
            },
            options: {
              replacements: [{
                pattern: /test.ts/ig,
                replacement: 'temp-test.ts'
              },
              {
                pattern: /const context =.*/ig,
                replacement: 'const context = require.context(\'./\', true, /'+target+'\\\.spec\\\.ts$/);'
              }]
            }
        }
    },
    'exec': {
        sleep: {
          //The sleep command is needed here, else webpack compile fails since it seems like the files in the previous step were touched too recently
          command: 'ping 127.0.0.1 -n 4 > nul',
          stdout: true,
          stderr: true
        },
        ng_test: {
          command: 'ng test --config=temp.conf.js',
          stdout: true,
          stderr: true
        }
    }
  });

  // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-string-replace');
    grunt.loadNpmTasks('grunt-exec');
  // Default task(s).
  grunt.registerTask('default', ['clean','copy','string-replace','exec']);

};

受け入れられた解決策を見て、私はこの方法が推奨されているとは思いません
Drenai

2
@Brian-私のソリューションでは、ソースコードを変更する必要がなく、ファイルのチェックインで発生する可能性のある間違いを防ぎます。私のソリューションでは、コマンドラインでテスト名を指定するだけで、手動の手順を自動化できます。
vanval 2017

ええ、それは実際には良い点です。xdescribeまたはfdescribeの削除を忘れる可能性は十分あります。テストは完全に削除されます。
ドレナイ2017

3
@Ryan tslint-jasmine-rulesをインストール/設定して、fdescribe / fit / xdescribe / xit呼び出しをチェックし、tslintの実行を失敗させることができます。これがプリコミット手順の一部である場合は、フォーカスされているか無効になっているテストを誤ってチェックインするのを防ぎます。
Neil Menzies

1

これに加えて、Angularで単一のスペックを実行する方法を探していて、このSOを見つけた私のような人々のために。

最新のAngularドキュメント(執筆時点ではv9.0.6)によると、ng testコマンドにはファイルの--includeディレクトリ*.spec.(ts|tsx)または単一の.spec.(ts|tsx)ファイル自体を指定できるオプションがあります。

https://angular.io/cli/test


0

test.tssrcフォルダー内のファイルを少し変更するだけです。

const context = require.context('./', true, /test-example\.spec\.ts$/);

ここで、test-example実行する必要がある正確なファイル名です

同様に、サービスファイルのみをテストする必要がある場合は、「/ test-example.service」のようにファイル名を置き換えることができます。


0

これはすべての場合に私にとってうまくいきました:

ng test --include='**/dealer.service.spec.ts'

しかし、私は通常このために「TypeError:nullのプロパティ 'ngModule'を読み取ることができません」を受け取りました:

ng test --main src/app/services/dealer.service.spec.ts

@ angular / cli 10.0.4のバージョン

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.