Échec du test de la composante Karma 4 Karma en raison d'un problème avec le CORS
quand je lance ng test j'obtiens cette erreur (j'utilise la configuration standard avec Karma lorsque j'essaie de tester le composant:
XMLHttpRequest cannot load ng:///DynamicTestModule/FullModalHeaderComponent.ngfactory.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Comment puis-je aborder cette question?
Code:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FullModalHeaderComponent } from './full-modal-header.component';
describe('FullModalHeaderComponent', () => {
let component: FullModalHeaderComponent;
let fixture: ComponentFixture<FullModalHeaderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FullModalHeaderComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FullModalHeaderComponent);
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
et
import { Component, Input } from '@angular/core';
import { ProcessingCenter, Publication } from '../../publications/model';
@Component({
selector: 'gom-full-modal-header',
templateUrl: './full-modal-header.component.html'
})
export class FullModalHeaderComponent {
@Input('processingCenter') processingCenter: ProcessingCenter;
@Input('publication') publication: Publication;
@Input('title') title: string;
}
aussi, quand je lance des tests avec ng test --sourcemaps=false problème disparaît.
3 réponses
les tests de composants peuvent échouer avec cette erreur quand il y a un@Input.
Fournir des valeurs par défaut raisonnables pour tous vos @Input propriétés:
@Input('processingCenter') processingCenter: ProcessingCenter = null;
@Input('publication') publication: Publication = null;
@Input('title') title: string = '';
Ou assurez-vous d'initialiser dans vos tests:
it('should be created', () => {
component.processingCenter = new ProcessingCenter();
component.publication = new Publication();
component.title = 'The Title';
expect(component).toBeTruthy();
});
Cela peut aussi arriver si vous avez quelque chose comme ceci:
constructorouonInitles appels de service- ce service est truquée/moqué de sorte qu'elle retourne un résultat
- l'abonnement sur votre service fixe une propriété sur votre composant
- Le composant html a une erreur par exemple:
<strong>{{ result.item.subproperty }}</strong>
<!-- ^^^^^^ -->
<!-- ^ could be null in tests ^ -->
Notez que si itemundefined parce que votre faux/mock ne l'avait pas, le modèle de Composant causera une exception, causant indirectement ce problème.
donc vérifiez votre html pour ce type de problème, et corrigez votre faux/mock et/ou rendez votre modèle plus robuste.
cela m'est arrivé aussi. Pour toute personne qui arrive ici via Google, si vous avez éjecté votre projet angulaire du CLI, j'ai résolu cela en éditant l'angular-cli.JSON et marking se sont éjectés faux.
après cela, j'ai pu lancer la suggestion ci-dessus et trouver mon vrai message d'erreur.
pour moi, c'était un morceau de mon modèle de composant qui utilisait un service injecté qui n'était pas défini dans mon test unitaire.