角度テストが「XMLHttpRequest」で「送信」を実行できずに失敗する


145

Angular 4.1.0コンポーネントをテストしようとしています-

export class CellComponent implements OnInit {
  lines: Observable<Array<ILine>>;
  @Input() dep: string;
  @Input() embedded: boolean;
  @Input() dashboard: boolean;
  constructor(
    public dataService: CellService,
    private route: ActivatedRoute,
    private router: Router, private store: Store<AppStore>) {
  }
}

ただし、単純な「should create」テストでは、この不可解なエラーがスローされます...

NetworkError:「XMLHttpRequest」で「send」を実行できませんでした:「ng:///DynamicTestModule/module.ngfactory.js」をロードできませんでした。

だから私はこの質問を見つけました、それは問題がコンポーネントが@Input)_設定されていないparamsを持っていることを示唆しています、しかし私が私のように私のテストを変更した場合:

  it('should create', inject([CellComponent], (cmp: CellComponent) => {
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    expect(cmp).toBeTruthy();
  }));

その後、同じ問題が引き続き発生します。同様に@Input()、コンポーネントからアノテーションを削除しても、違いはありません。これらのテストに合格するにはどうすればよいですか?


1
コンポーネントを作成するには、すべての依存関係を提供する必要があります。すべてのテスト設定を表示できますか?私はplnkrで
Aleksandr Petrovskij

1
私はこれと同じ問題を抱えており、あなたがしたのと同じ投稿を見つけました。解決策を見つけることができました。私は他の質問に投稿し終わっていますが、ここを見てとることができます。stackoverflow.com/a/45419372/6739517 希望はそれができます!
Niles Tanner

これを参照してください:github.com/angular/angular-cli/issues/7296
titusfx

回答:


342

これは新しいAngular Cliの問題です。でテストを実行する--sourcemaps=falseと、適切なエラーメッセージが表示されます。

詳細はこちら:https : //github.com/angular/angular-cli/issues/7296

編集:

これの省略形は次のとおりです。

ng test -sm=false

角度6以降のコマンドは次のとおりです。

ng test --source-map=false


19
あなたは絶対的なヒーローです。これが見つかるまで、Angularユニットテストのエラーメッセージからの情報が不足していることに苛立ち、壁に頭をぶつけていました。とても感謝しております。
アランスミス

1
この答えは本当に私の日を救った!ビルドに失敗した人であるのをやめるために、昼夜を費やしてこれを修正しようとした後、私は一般的に開発を
あきらめよ

今日、私はこのエラーメッセージに遭遇しました:HeadlessChrome 65.0.3325(Mac OS X 10.13.4)ERROR {"message": "Script error。\ nat:0:0"、 "str": "Script error。\ nat:0 :0 "}そして--sourcemap = falseを削除すると、詳細情報が表示されます。
ペンフイ

11
ng test --source-map = false ... Angular CLI 6で機能します
danday74

@ danday74 FTW!複雑なテストファイルを書き込んだ後、これに慣れるのは残忍です。
ブラッドリチャードソン

21

私はangualar cli 6を使用して同じ問題を抱えていましたが、このタグを使用して正しいエラーメッセージを取得しました。

ng test --source-map=false

多分それは誰かを助けるでしょう:)。


8

私の場合、モックデータの問題があり、の場合、モックからArray戻っstringていました。

someApi = fixture.debugElement.injector.get(SomeApi);
spyOn(someApi, 'someMethod')
  .and.returnValue(Observable.of('this is not a string but array'));

エラーメッセージは本当に気を散らすものであり、実際のエラーを伝えていませんでした。実行するng test --source=falseと正しいエラーと行が示され、それをすばやく修正するのに役立ちました。

多くの場合、データのモックが不完全または正しくない場合に発生します。


7

input()プロパティをcomponent.tsのデフォルト値に設定することもできます

@Input() tableColumns: Array<any> = [];  
@Input() pageObj: any = '';

または

次の方法で、component.spec.tsファイルを変更します。

beforeEach(() => {  
   fixture = TestBed.createComponent(MyComponent);  
   component = fixture.componentInstance;  
   component.tableColumns = [];  
   component.pageObj = '';  
   fixture.detectChanges();  
});

4

上記の推奨事項https : //stackoverflow.com/a/45570571/7085047私の問題は私のにありましたngOnInit。私は模擬swaggerで生成されたRESTコントローラープロキシを呼び出していました。それはnullを返していました、そして私はそのnullをサブスクライブしていました、それは機能しません...

エラーが戻ってきました:

Failed to load ng:///DynamicTestModule/MockNodeDashboardComponent_Host.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

ts-mockitoを使用して問題を修正しました:https : //github.com/NagRock/ts-mockito

次のようなモックインスタンスを作成するコードを追加しました。

import { mock, instance, when } from 'ts-mockito';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { MockScenario } from './vcmts-api-client/model/MockScenario';

const MockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = mock(VcmtsnodemockresourceApi);
const obs = Observable.create((observer: Observer<MockScenario[]>) => {
  observer.next(new Array<MockScenario>());
  observer.complete();
});
when(MockVcmtsnodemockresourceApi.getMockScenariosUsingGET()).thenReturn(obs);
const instanceMockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = instance(MockVcmtsnodemockresourceApi);

次に、インスタンスを次のようにテストのプロバイダー配列に追加しました。

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));

新しい質問がある場合は、[ 質問する ]ボタンをクリックして質問してください。コンテキストの提供に役立つ場合は、この質問へのリンクを含めます。- レビューから
Anton Balaniuc

私の症状はOPと同じであるように見えたので、私にとって役立つ修正が役立つと思いますか
Datum Geek

3

これは、実際のテストエラーを隠すChromeに関連している可能性があります。テスト領域は、ロードできないモックhttpファクトリーを混乱させるため、レポートされるエラーになります。最も可能性の高いエラーは、オブジェクトが、たとえばサブオブジェクトを予期していて、それらが定義されていないngOnInit領域の周りにあります。

エラーの最下部に到達するために、一時的にPhantomJSに切り替えます。これは、これらの初期化エラーの影響が少ないと思われます。これにより、実際のエラーが報告されます。初期化で予期されたオブジェクトが完全ではなかったことが、いくつかの場合で見つかりました。IE:

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

    component.object = {}
// should be:
    component.object = {"innerObjectThatIsNeeded" : []}

オブジェクトを修正すると、PhantomJSが完了し、Chromeも次のテストに進むことができました。

それ以外は、Chromeから問題を削除するための解決策を見ていません。これまでどおり、「エラーが発生するまでコードを削除する」というポリシーを採用して、エラーを追跡します。

更新:これはかなり古い答えになりました。PhantomJS(EOL)を使用することはお勧めしません。ブラウザーテストのレポートが大幅に改善され、Chromeが悲しみを与えている場合は、Firefoxを試してみてください。Firefoxも最近テストを非常にうまく実行しています。


2

私にもこのエラーがありましたが、その真実はおしゃべりではありません。

サービスを介したHTTP呼び出しに関連していた

2つのメソッドでmyService.tsを使用しています

get();
getAll();

私はこのサービスをあざける:mockMyService.ts

私のコンポーネントがmockMyServiceに実装するのを忘れたgetAll()メソッドを使用していたため、エラーがここにありました。

private mockObjects = [
{
  'id': '1',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data bidon'
},
{
  'id': '2',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data au pif'
},
{
  'id': '3',
  'champ1': 'FUNC',
  'champ2': 3,
  'champ3': 'Data quelconque'
},
 ];

getAll(): Observable<any> {
  return Observable.of(this.mockObjects);
}

エラーはなくなりました:)


2

私は同じ問題に直面し、それを修正するには、メソッドbeforeEachでコンポーネントの入力を以下のように設定する必要があることがわかりました。

beforeEach(() => {
    fixture = TestBed.createComponent(CellComponent );
    cmp = fixture.debugElement.componentInstance;
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    fixture.detectChanges();
});

これは間違いなくあなたの問題を解決します。


1

私の場合、犯人はobservable.timeout(x).retry(y)サービスクラスレベルで返されたObservableのどこかに適用され、そのサービスを使用していたコンポーネントにも適用されました。

angular-cli 1.4までは、ブラウザーですべてが正しく機能していました。その後、カルマテスト中に失敗し始めました(このような愚かなエラーが発生しました)。解決策はもちろん、これらのタイムアウト/再試行演算子を整理することでした。


1

私にとって、このメッセージは、テストでモックが偽物である場合に表示されます。通常、テストのブートストラップでmockServiceを提供します。あなたのモックが不完全または偽物である場合、角度はこの愚かなエラーを返します。

私のケースの詳細はこちら


0

私がしていることは:

ngOnint()の1行ごとにconsole.log()を追加し、それがどこまで進んだかを確認してから、通過しない行を調べます。

例:

ngOnInit() {
    this.route.paramMap
        .switchMap(params => {
            this.busy = true;
            this.updateErrors(null);

            console.log(params);

            **const id = params.get('id');**
            console.log(id);

            if (id === 'new') {
                this.editMode = true;
                return Observable.of(GroupComponent.newGroup());
            }
            return this.apiService.getGroup(id);
        })
    }

これは私のテストで失敗し、この投稿で同じエラーが発生しました。上記のように、2つのconsole.logsがありました。最初のものは通過しましたが、2番目のものは通過しませんでした。だから私は問題が行にあることに気づきました const id = params.get( 'id'); そして私はそれを修正しました。

これが誰かを助けることを願っています。

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