Question

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

然而，一个简单的＆＃34;应该创造＆＃34;测试引发了这个神秘的错误...

NetworkError：无法执行＆＃39;发送＆＃39; on＆＃39; XMLHttpRequest＆＃39;：无法加载＆n;：///DynamicTestModule /module.ngfactory.js'。

所以我发现this问题，这表明问题是组件有@Input)_参数没有设置，但是，如果我像这样修改我的测试：

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

然后我仍然遇到同样的问题，同样，如果我从组件中删除@Input()注释，仍然没有区别。我怎样才能通过这些测试？

Answer 1

这是新Angular Cli的一个问题。使用--sourcemaps=false运行测试，您将收到正确的错误消息。

请在此处查看详细信息：https://github.com/angular/angular-cli/issues/7296

修改

这方面的简写是：

ng test -sm=false

从角度6开始，命令为：

ng test --source-map=false

Answer 2

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

sims[0]

也许它会帮助某人:)。

Answer 3

对于我的情况，存在模拟数据问题，如果是functions.php，我从模拟中返回Array。

string

错误消息真的让人分心，并没有告诉实际的错误。正在运行someApi = fixture.debugElement.injector.get(SomeApi); spyOn(someApi, 'someMethod') .and.returnValue(Observable.of('this is not a string but array'));指出了正确的错误和行，并帮助我快速修复它。

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

Answer 4

您可以将 input（）属性设置为 component.ts

中的默认值

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

Answer 5

如上所述：https://stackoverflow.com/a/45570571/7085047我的问题出在ngOnInit。我在调用一个模拟swagger生成的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);

然后将实例添加到测试的提供者数组中，如下所示：

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

Answer 6

这可能与Chrome隐藏实际测试错误有关。测试区域会混淆一些它无法加载的模拟http工厂，因此这是它将报告的错误。很可能错误将在ngOnInit区域附近，例如，对象是期望子对象并且未定义它们。

要尝试找到错误的底部，请暂时切换到PhantomJS，这似乎会减少这些初始化错误，这有望向您报告实际错误。我发现有几次在初始化时预期的物体是不完整的。 IE：

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

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

纠正对象允许PhantomJS完成，Chrome也可以继续进行下一次测试。

除此之外，我还没有看到从Chrome中删除问题的解决方案。一如既往地尝试采用＆＃34;删除代码，直到出现错误＆＃34;政策来追逐错误。

Answer 7

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

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

我使用带有2种方法的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);
}

错误消失了：）

Answer 8

我也遇到了同样的问题，我发现要解决此问题，您必须在beforeEach方法中为组件设置输入，如下所示：

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

这肯定会解决您的问题。

Answer 9

对我来说，当我的测试中模拟是假的时，会出现此消息：通常在测试引导程序中提供mockService。如果你的模拟不完整或有假，那么angular会返回这个愚蠢的错误。

有关我的案例的更多信息here

Answer 10

在我的情况下，罪魁祸首是observable.timeout(x).retry(y)在服务类级别返回的Observable上的某处应用，然后再次在使用该服务的组件中。

在浏览器中一切正常，直到angular-cli 1.4。然后在Karma测试期间开始失败（有这么愚蠢的错误）。解决方案当然要整理这些超时/重试操作符。

Answer 11

我要做的是：

在ngOnint（）中逐行添加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);
        })
    }

我的测试失败，在这篇文章中出现了同样的错误。如上所示，我有两个console.logs。第一个通过了，但第二个没通过。所以我意识到问题是在线 const id = params.get（＆＃39; id＆＃39;）; ，我修复了它。

希望这会对某人有所帮助。

角度测试失败，未能执行＆＃39;发送＆＃39; on＆＃39; XMLHttpRequest＆＃39;

11 个答案: