web-dev-qa-db-ja.com

Angular 「XMLHttpRequest」で「send」を実行できなかったというテストの失敗

私は私の角の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>) {
  }
}

しかし、単純な「作成すべき」テストではこの不可解なエラーが発生します。

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

だから私は これ という質問を見つけました、それは問題がコンポーネントが設定されていない@Input)_パラメータを持っていることを示唆しています、しかし、私が私のように私のテストを修正するなら：

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

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

angularunit-testingkarma-jasmineangular-cli
129
George Edwards

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

ここで詳細を参照してください： https://github.com/angular/angular-cli /issues/7296

編集：

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

ng test -sm=false

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

ng test --source-map=false

324
penghui

角度のあるCLI 6を使用して同じ問題が発生しましたが、このタグを使用して正しいエラーメッセージを取得しました：

ng test --source-map=false

たぶんそれは誰かを助けるでしょう:)。

20
jmuhire

私の場合はモックデータの問題があり、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を実行すると正しいエラーと行が示され、それを素早く修正するのに役立ちました。

あなたがデータをモックするのが不完全または不正確であるとき、それは何度も起こります。

8
Aniruddha Das

component.ts のデフォルト値に input（） propertyを設定することができます。

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

OR

以下の方法で component.spec.ts ファイルを修正してください。

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

ここに上で示唆されたように： https://stackoverflow.com/a/45570571/7085047 私の問題は私のngOnInitにありました。私はモックスワガーで生成された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);

次に、このインスタンスをテストのprovider配列に次のように追加しました。

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

これは、Chromeが実際のテストエラーを隠していることに関連している可能性があります。テスト領域はそれをロードすることができない、そしてそれがそれが報告するエラーであることをある疑似httpファクトリを混乱させるでしょう。ほとんどの場合、エラーはオブジェクトが存在するngOnInit領域周辺で発生し、サブオブジェクトが定義されていません。

試してみてエラーの原因を突き止めるには、一時的にPhantomJSに切り替えてください。これらの初期化エラーの影響はそれほどありません。実際にエラーが報告されます。初期化時に予想されるオブジェクトが完成していない場所であることがいくつかありました。 IE：

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

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

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

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

2
PeterS

私もこの誤りを抱えていましたが、それは真実ではありません。

それは私のサービスを通じたHTTP呼び出しに関連していました

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

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
Deunz

私は同じ問題に直面しました、そして私はそれを修正するためにあなたが以下に示されるようにメソッドbeforeEachの中のコンポーネントのためにあなたの入力を設定しなければならないとわかりました：

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

これで間違いなく問題は解決します。

2
Jayant Patil

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

私の場合の詳細情報 ここ

1
Rebolon

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

Angular-Cli 1.4までは、ブラウザですべて正常に機能していました。それからカルマテストの間に失敗し始めました（そのようなばかげた誤りで）。解決策はもちろん、これらのタイムアウト/再試行演算子を整理することでした。

1
Marcin R

私がやることは、

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.logを持っていました。最初の人は屠殺しましたが、2番目の人は通過しませんでした。だから私は問題が行にあることに気づいた const id = params.get（ 'id'）; そして私はそれを修正しました。

これが誰かに役立つことを願っています。

0
Josf