回答:
各.spec.ts
ファイルには、次のようにすべてのテストがdescribe
ブロックでグループ化されています。
describe('SomeComponent', () => {...}
describe
関数名の前に次を付けることで、この単一のブロックだけを簡単に実行できますf
。
fdescribe('SomeComponent', () => {...}
このような機能がある場合、他のdescribe
ブロックは実行されません。ところで it
=> でも同様のことができfit
、「ブラックリスト」バージョンもありx
ます。そう:
fdescribe
そしてfit
原因となるだけで実行するには、この方法でマークされた関数をxdescribe
そして、xit
なり除くすべての機能が実行するために、このようにマークfdescribe
かxdescribe
?ずさんなレビュー担当者(私)が、すべてのテストをスキップするPRをマージしたくありません。
フォルダtest.ts
内のファイルを構成しsrc
ます。
const context = require.context('./', true, /\.spec\.ts$/);
/\.spec\.ts$/
テストするファイル名に置き換えます。例えば:/app.component\.spec\.ts$/
これはのテストのみを実行しapp.component.spec.ts
ます。
次のように、Angular CLI(ng
コマンド)を使用して特定のファイルのみをテストできます。
ng test --main ./path/to/test.ts
その他のドキュメントはhttps://angular.io/cli/testにあります
これはスタンドアロンライブラリファイルでは機能しますが、角度のあるコンポーネント/サービスなどでは機能しません。これは、angularファイルが他のファイルに依存しているためです(つまりsrc/test.ts
、Angular 7)。悲しいことに、--main
フラグは複数の引数を取りません。
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
この場合、その中で行われるセットアップとそのインポートは利用できないからです。
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) "
コマンドラインから選択するファイルを制御できるようにしたい場合は、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による上記の回答への謝辞
これは、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で実行します。
この問題は、うなり声を使って自分で解決しました。以下のうなり声スクリプトがあります。スクリプトが行うことは、実行する特定のテストのコマンドラインパラメーターを取得して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']);
};
これに加えて、Angularで単一のスペックを実行する方法を探していて、このSOを見つけた私のような人々のために。
最新のAngularドキュメント(執筆時点ではv9.0.6)によると、ng test
コマンドにはファイルの--include
ディレクトリ*.spec.(ts|tsx)
または単一の.spec.(ts|tsx)
ファイル自体を指定できるオプションがあります。