角度测试失败，未能在“ 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()注释，仍然没有区别。我怎样才能通过这些测试？

59664 次浏览
小开

这可能与 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，它现在也运行得很好。

小开

这是一个新的角倾斜的问题。用 --sourcemaps=false运行您的测试，您将得到正确的错误消息。

详情请参阅: https://github.com/angular/angular-cli/issues/7296

编辑:

这里的简写是:

ng test -sm=false

角度6的命令是:

ng test --source-map=false

小开

对于我来说，这个消息出现在我的测试中一个 mock 是假的时候: 通常你在测试引导程序中提供的是 mock 服务。如果你的模仿是不完整的或者虚假的，那么棱角就返回这个愚蠢的错误。

关于我的案子的更多信息

小开

在我的案例中，罪魁祸首是 observable.timeout(x).retry(y)应用于服务类级别上返回的 Obesable 上的某个位置，然后再次应用于使用该服务的组件中。

一切都在浏览器正常工作，直到角-cli 1.4。然后在因果报应测试中开始失败(犯了这么愚蠢的错误)。解决方案当然是整理这些超时/重试操作符。

小开

对于我的例子，有一个模拟数据问题，对于 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指出了正确的错误和行，并帮助我快速修复它。

很多时候，当您模拟的数据不完整或不正确时，就会发生这种情况。

小开

正如上面所建议的: 我的问题是在我的 ngOnInit。我正在调用一个模拟的大摇大摆生成的 REST 控制器代理。它返回空值，我订阅了那个空值，但它不工作..。

错误又回来了:

未能加载 ng:///DynamicTestModule/MockNodeDashboardComponent _ Host. ngfactory.js: 跨源请求只支持协议方案: http、 data、 chrome、 chrome 扩展、 https。

我修复的问题使用 t- 模仿: 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();
}));
小开

我也有这个错误，说实话，这是相当不健谈的。

它与通过我的服务进行的 HTTP 调用有关

我使用 myService.ts 有两个方法

get();
getAll();

我正在嘲笑这个服务: 嘲笑我的服务

出现这个错误是因为我的组件使用了 getAll ()方法，而我忘记在 mock MyService 中实现这个方法，所以我只添加了这个方法:

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

错误消失了:)

小开

我要做的是:

添加 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’) ;和我修复它。

希望这能帮到别人。

小开

我有同样的问题使用盎格拉 cli 6，我已经使用这个标记得到正确的错误消息:

ng test --source-map=false

也许它会帮助某人:)。

小开

可以将 输入()属性设置为 组件中的默认值

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

或者

按以下方式修改 Spec.ts 组件文件,

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

我遇到了同样的问题，我发现要解决这个问题，你必须在方法之前设置组件的输入，如下所示:

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

这绝对能解决你的问题。


提交答案