角测试与未能执行失败的“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的”

回答

相关问题