angular-cli를 사용하여 하나의 테스트 사양 만 실행하는 방법


143

Angular-CLI (베타 20)로 Angular2 프로젝트 빌드가 있습니다.

하나의 선택된 스펙 파일에 대해서만 테스트를 실행하는 방법이 있습니까?

나는 Angular2 빠른 시작을 기반으로 한 프로젝트를 가지고 있었고 Jasmine 파일에 사양을 수동으로 추가 할 수있었습니다. 그러나 Karma 테스트 외부에서 이것을 설정하는 방법이나 Angular-CLI 빌드를 사용하여 Karma 테스트를 특정 파일로 제한하는 방법을 모르겠습니다.

답변:


224

.spec.ts파일에는 describe다음과 같이 모든 테스트가 블록 단위로 그룹화되어 있습니다 .

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

describe함수 이름 앞에 다음을 붙여이 단일 블록 만 쉽게 실행할 수 있습니다 f.

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

이러한 기능이 있으면 다른 describe블록이 실행 되지 않습니다 . Btw. it=> fit와 비슷한 작업을 수행 할 수 있으며 "블랙리스트"버전도 x있습니다. 그래서:

  • fdescribefit원인 에만 실행하려면이 방법을 표시 기능을
  • xdescribexit원인 을 모두하지만, 기능을 실행하려면이 방법을 표시

1
helloworld.component.spec.ts 파일에서 fdescribe를 사용했지만 app.component.spec.ts 파일의 오류도 표시됩니다.
마스터 요다

1
그것은 모든 코드가 평가되고 있기 때문입니다 (그렇지 않으면 테스트 내에 fdescribes가 있다는 것을 알지 못할 것입니다)-fdescribe는 테스트 결과 실행 만 제한합니다. 다른 파일에서 구문 / typescript 오류를 수정해야합니다.
Tomek Sułkowski

3
영업 이익은 질문 acutally했다이 답변을 받아 비록 나는 하나 개의 사양 파일을 평가하는 방법을 생각 : P
의 Tomás 로베르토

4
이것은 답이 아닙니다. @iislucas 아래에 답변이 있습니다.
Ben Racicot

CI 환경에서 fdescribe또는 실패시 실패 할 플래그를 설정할 수 있습니까 xdescribe? 나는 모든 검토를 건너 뛴 PR을 병합하기 위해 조잡한 검토 자 (me)를 원하지 않습니다.
ILikeFood

81

폴더 test.ts안에 파일을 구성 하십시오 src.

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

교체 /\.spec\.ts$/테스트 할 파일 이름으로. 예를 들면 다음과 같습니다./app.component\.spec\.ts$/

에 대해서만 테스트가 실행됩니다 app.component.spec.ts.


8
장황 달리 fdescribe - 허용 대답을해야한다,이 방법은 로그에 gumpfy 출력의 부하 제거
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 테스트는 어떤 이유로 든 좋아하지 않습니다. 오류가 발생합니다.
hanesjw

추천 답변이어야합니다
Anil Vangari

55

다음과 같이 Angular CLI ( ng명령)를 사용하여 특정 파일 만 테스트 할 수 있습니다 .

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

추가 문서는 https://angular.io/cli/test에 있습니다.

독립 실행 형 라이브러리 파일에는 작동하지만 각도 구성 요소 / 서비스 / 등에는 작동하지 않습니다. 각도 파일은 다른 파일 (즉 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 2016

명령을 사용하여 전체 테스트를 실행 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'특성을 읽을 수 없습니다. UserContext. <anonymous> (src / app / timebar.service.spec.ts : 14 : 45)의 Function.get (node_modules/@angular/core/fesm2015/testing.js : 2960 : 1)에서 3230 : 1)
canbax

1
이 답변은 Angular 8에서도 작동합니다. 정확히 하나의 테스트 사양 파일을 실행하므로 허용되는 답변이어야합니다.

2
Angular 9의 경우 알 수없는 옵션 "--main"이 표시됩니다. (
rmcsharry

6

명령 줄에서 선택한 파일을 제어하려면 Angular 7 에서이 작업을 수행했습니다.

요약 @angular-devkit/build-angular:browser하면 테스트 파일 정규식을 통과시키기 위해 사용자 정의 웹팩 플러그인을 설치 한 다음 작성 해야합니다 . 예를 들면 다음과 같습니다.

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- 명령 행에서 정규식을 읽는 웹팩 구성을 작성하십시오.

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

grunt를 사용 하여이 문제를 직접 해결했습니다. 아래에 그런 스크립트가 있습니다. 스크립트는 특정 테스트의 명령 행 매개 변수를 실행하여 test.ts의 사본을 작성하고이 특정 테스트 이름을 거기에 넣습니다.

이를 실행하려면 먼저 다음을 사용하여 grunt-cli를 설치하십시오.

npm install -g grunt-cli

아래 grunt 의존성을 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가 실행됩니다.

그런트 파일은 다음과 같습니다.

/*
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

예, 실제로 좋은 지적입니다. xdescribe 또는 fdescribe를 제거하는 것을 잊을 수있는 좋은 기회가 있으며 테스트가 영구적으로 제거됩니다!
Drenai

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.