角測試與未能執行失敗的「XMLHttpRequest的」

「發送」我想測試我的角度4.1.0組件 -角測試與未能執行失敗的「XMLHttpRequest的」

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: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/module.ngfactory.js'.

所以我發現this問題，這表明問題是組件具有@Input)_ PARAMS未設置，但是，如果我修改我的測試，像這樣：

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

然後我仍然得到同樣的問題，同樣，如果我從組件中刪除@Input()註釋，仍然沒有區別。我怎樣才能讓這些測試通過？

來源

2017-07-30 George Edwards

爲了創建組件，您需要提供所有依賴關係。你能顯示你所有的測試設置嗎？我將嘗試在[plnkr]上重現該問題（http://plnkr.co/edit/mRT1WDo4tI8IRIaHHcyS） –

我遇到了同樣的問題，並找到了與您相同的帖子。我能找到解決方案。我結束了在其他問題上發佈，但你可以看看這裏：https://stackoverflow.com/a/45419372/6739517希望它有幫助！ –

看到這個：https://github.com/angular/angular-cli/issues/7296 – titusfx

這可能與Chrome隱藏實際測試錯誤有關。測試區域會混淆一些模擬http工廠，它不能加載，因此這是它會報告的錯誤。最有可能的錯誤將出現在一個對象所在的ngOnInit區域，比如說，期望子對象，並且它們沒有被定義。

要嘗試找到錯誤的底部，請暫時切換到PhantomJS，這似乎不會受到這些初始化錯誤的影響，並且希望能夠向您報告實際的錯誤。有幾次我發現，初始化期望的對象不完整。 IE：

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

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

校正允許PhantomJS完成，也鉻就移動到下一個測試對象。

除此之外，我還沒有看到一個解決方案來從Chrome中刪除問題。與以往一樣，嘗試採用「刪除代碼，直到錯誤消失」的策略追查錯誤。

來源

2017-08-08 14:06:36 PeterS

183

這是一個新的Angular Cli的問題。用--sourcemaps=false運行你的測試，你會得到正確的錯誤信息。

看詳情點擊這裏：https://github.com/angular/angular-cli/issues/7296

編輯：

速記是這樣的：

ng test -sm=false

來源

2017-08-09 12:51:50 penghui

你絕對是英雄。由於缺少Angular單元測試錯誤消息的信息，我一直在沮喪地將頭靠在牆上，直到找到它。多謝。 –

這應該是被接受的答案。 – FelixM

對我來說，當一個模擬的是在我的測試中falsy此消息出現：一般您在測試引導程序中提供mockService。如果你的模擬不完整或虛假，那麼角度返回這個愚蠢的錯誤。

對我而言here

來源

2017-08-09 15:07:43 Rebolon

在我的情況的更多信息罪魁禍首是observable.timeout(x).retry(y)地方施加於返回可觀測服務類級別，然後再在其中使用該服務的組件。

一切正常工作在瀏覽器中，直到角度爲1.4。然後在Karma測試期間開始失敗（有這樣一個愚蠢的錯誤）。解決方案當然是要清理這些超時/重試操作符。

來源

2017-08-23 14:13:56

對於我的情況有一個模擬數據問題，並在Array的情況下，我從模擬返回string。

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

The error message is really distracting and was not telling the actual error. Running ng test --source=false pointed the correct error and line, and helped me to fix it quickly.

很多時候，你的模擬數據不完整或不正確的它發生。

來源

2017-10-16 20:38:49

如上所示：https://stackoverflow.com/a/45570571/7085047我的問題出在我的ngOnInit。我正在打電話給一個模擬的Swagger生成的REST控制器代理。它返回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);

，然後添加實例到測試的供應商陣列LIK e這：

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

來源

2017-11-01 14:52:32

如果您有新問題，請點擊[問問題]（https://stackoverflow.com/questions/ask）按鈕。如果有助於提供上下文，請包含此問題的鏈接。 - [來自評論]（/ review/low-quality-posts/17805821） –

好像我的症狀與OP一樣，所以我認爲人們可能會發現有用的修復工作對我來說... –

我也有這個錯誤，哪個真相被告知是相當不健談的。

它涉及到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); 
}

錯誤不見了:)

來源

2018-01-09 08:53:21 Deunz

我會做的是：

添加的console.log（）S，在ngOnint（行後線），並找出它去多遠，然後檢查線它不會通過。

例：

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); 
     }) 
    }

這是失敗對我在這個崗位同樣的錯誤的測試。如上所示，我有兩個console.log。第一個通過，但第二個不通過。所以我意識到這個問題在線const id = params.get（'id'）;我修好了。

希望這會幫助別人。

來源

2018-01-09 21:13:15 Josf

角測試與未能執行失敗的「XMLHttpRequest的」

回答

相關問題