Angular 角度测试失败，无法执行'；发送'；在'；XMLHttpRequest'；

我正在尝试测试我的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>) {
  }
}

---

同样，如果我从组件中删除

@Input（）

注释，我仍然会遇到同样的问题，仍然没有什么区别。如何让这些测试通过？

这可能与Chrome隐藏实际测试错误有关。测试区域将混淆一些它无法加载的模拟http工厂，因此它将报告该错误。最有可能的错误是在ngOnInit区域周围，比如说，在该区域中，一个对象需要子对象，但它们没有定义

为了试图找出错误的根源，暂时切换到PhantomJS，它似乎不会受到这些初始化错误的影响，这将有希望向您报告实际的错误。有几次我发现初始化时预期的对象不完整。 即：

更正对象允许PhantomJS完成，也允许Chrome继续进行下一个测试

除此之外，我还没有看到从Chrome中消除这个问题的解决方案。一如既往，尝试采用“删除代码，直到错误消失”的策略来追踪错误

---

更新：注意，这是一个相当古老的答案，我不建议再使用PhantomJS（EOL）。浏览器测试报告已经变得更好了，如果Chrome让你感到悲伤，那么试试Firefox，它现在也能很好地运行测试

这是新角度Cli的一个问题。使用

--sourcemaps=false

运行测试，您将得到正确的错误消息

详情如下：

编辑：

简写为：

ng测试-sm=false

从angular 6开始，命令为：

---

ng test--source map=false

对于我来说，当模拟在我的测试中出错时，会出现此消息：通常在测试引导中提供模拟服务。如果您的模拟不完整或错误，那么返回这个愚蠢的错误

---

有关我的案例的更多信息

在我的案例中，罪魁祸首是可观察的。超时（x）。重试（y）应用于服务类级别上返回的可观察对象的某处，然后再次应用于使用该服务的组件

---

在angular cli 1.4之前，浏览器中的所有功能都正常工作。然后在因果报应测试中失败（犯了这么愚蠢的错误）。解决方案当然是整理这些超时/重试运算符。

对于我的情况，存在模拟数据问题，对于

数组

，我从模拟中返回

字符串

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、数据、chrome、chrome扩展、https。

我使用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();

我在模仿这个服务：mockMyService.ts

错误出现在这里，因为我的组件使用的是getAll（）方法，而我忘记在mockMyService中实现该方法，所以我只添加了该方法：

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

private mockObjects=[
{
“id”：“1”，
“champ1”：“TECH”，
"冠军2":2,，
“champ3”：“数据比登”
},
{
“id”：“2”，
“champ1”：“TECH”，
"冠军2":2,，
“champ3”：“pif数据”
},
{
“id”：“3”，
“champ1”：“FUNC”，
"冠军2":3,，
“champ3”：“数据查询”
},
];
getAll（）：可观察{
返回可观察的（this.mockObjects）；
}

---

错误消失了：）

我要做的是：

在ngOnint（）中添加console.log（）s，一行接一行，找出它能走多远，然后检查它不能通过的线

例：

这是失败的，我的测试与相同的错误在这篇文章。如上所示，我有两个console.log。第一个通过了thorugh，但第二个没有。所以我意识到这个问题是在线的const id=params.get（'id'）我把它修好了

---

希望这能对其他人有所帮助。

我在使用angualar cli 6时遇到了同样的问题，我使用了此标记来获得正确的错误消息：

ng test --source-map=false

---

可能对某人有帮助：）。

您可以在组件.ts中将input（）属性设置为默认值

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

---

我遇到了同样的问题，我发现要解决它，您必须在每次之前在方法中设置组件的输入，如下所示：

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

---

这肯定会解决您的问题。

为了创建组件，您需要提供所有依赖项。你能展示你所有的测试设置吗？我将尝试重现我的问题，我有同样的问题，并找到相同的职位，你做了。我找到了解决办法。我最后在另一个问题上发帖，但你可以在这里看一下：希望它能有所帮助！看到这个：如果你有一个新问题，请点击按钮提问。如果此问题有助于提供上下文，请包含指向此问题的链接。-看起来我的症状和手术一样，所以我想大家可能会发现对我有用的修复方法……你这个绝对的英雄。由于缺少来自Angular单元测试错误消息的信息，我沮丧地把头撞在墙上，直到我发现了这个。非常感谢。这个回答真的救了我一天！在花了w

ng test --source-map=false

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

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