Angular 2-е тестирование - получение ошибки Не удалось загрузить 'ng:///DynamicTestModule/module.ngfactory.js'
У меня есть приложение angular 2 webpack, все настройки webpack, karma, созданные в соответствии с руководством по angular.io webpack.
Я не использую aot.
Я пишу жасмин unit test для тестирования моих компонентов.
Сначала я попробовал без async-блока, в этом случае unit test просто получите выполнение только до вызова fixture.detectChanges(), после чего код не будет выполнен. Похоже, что fixture.detectChanges вызывает бесконечную блокировку.
Я попытался включить код в асинхронный блок.
Затем я получаю следующую ошибку.
Ошибка: не удалось выполнить 'send' в 'XMLHttpRequest': не удалось загрузить 'ng:///DynamicTestModule/module.ngfactory.js'
Код без async
beforeeach(()=> {
TestBed.configureTestingModule({
imports:[],
declaration :[Mycomp],
providers:[{ provide:MyService, useclass:MyMockService}]
});
fixture=TestBed.createComponent(Mycomp);
console.log(' before detect changes'):
fixture.detectChanges():
console.log('after detect changes');// this is not getting
logged .. karma shows 0 of 1 executed successfully
});
С асинхронным
beforeeach(async(()=> {
TestBed.configureTestingModule({
imports:[],
declaration :[Mycomp],
providers:[{ provide:MyService, useclass:MyMockService}]
});
fixture=TestBed.createComponent(Mycomp);
fixture.detectChanges():
}));
Получение ошибки Не удалось загрузить dynamictestmodule/module.ngfactory.js
Ответы
Ответ 1
Я столкнулся с этим вопросом вчера. Проблема заключалась в том, что у меня было свойство Input() в моем классе компонентов, которое я не устанавливал в тесте. Так, например, в my-component.ts:
@Component({
selector: 'my-component'
})
export class MyComponent {
@Input() title: string;
}
и my-component.spec.ts:
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
component.title = 'Hello there!' // <-- this is required!
fixture.detectChanges();
});
Или вы можете указать значение по умолчанию в компоненте. В любом случае, тест сработает, если какие-либо входы не будут установлены, и вы получите эту неинтуитивную ошибку.
Примечание. Запуск ng test -sm=false
приведет к появлению фактического сообщения об ошибке, вызывающего проблему. Кредит: fooobar.com/questions/107025/...
Ответ 2
Чтобы выяснить причину ошибки, отключите исходные карты:
Для angular-cli> = v6.x:
ng test --source-map=false
Для angular-cli v1.x:
ng test -sm=false
Затем вы увидите ошибку получше, например, Msgstr "Невозможно прочитать свойство 'x' из неопределенного" в исходном файле, вызвавшем ошибку. По какой-то причине в тестировании сейчас есть ошибка с исходными картами, и вы просто получаете эту загадочную ошибку.
Ответ 3
текущие тесты с --sourcemaps=false
не заставят вас карма молча, но вы получите некоторые подробности об ошибке.
Ответ 4
Добавление к ответу Дэна Филда
Это проблема с версией Angular Cli
1.2.2 или новее. Запустите тест с --sourcemaps=false
, и вы получите правильные сообщения об ошибках.
тест ng --sourcemaps = false
сокращение для этого:
тест ng -sm = false
Подробности смотрите здесь: https://github.com/angular/angular-cli/issues/7296
Ответ 5
У меня также была эта проблема, и это было связано с искаженными издевательскими данными.
В моем компоненте у меня была служба, которая сделала http-вызов.
что-то вроде: (код службы)
getData() {
return this.http.get(obj);
}
В компоненте я назвал эту функцию и подписался на нее: (код компонента)
this.service.getData().subscribe((data) => {
this.componentData = data.things; //**<=== part that broke everything**
}, (error) => {
console.log(error);
});
Решение:
Когда я высмеивал сервисную функцию, мне не удалось вернуть данные с атрибутом things
. Это то, что вызвало сбой XMLHttpRequest, я полагаю, что angular похоже, что произошла ошибка, как если бы это был запрос HTTP. Убедившись, что я вернул правильные атрибуты на любые издевавшиеся HTTP-запросы, исправили проблемы.
Надеюсь, это прояснит ситуацию. Ниже приведен код реализации макета.
(component.specs)
function fakeSubscribe(returnValue,errorValue) {
return {
subscribe:function(callback,error){
callback(returnValue);
error(errorValue);
}
}
}
class MockService {
getData() {
var fakeData = {
things:[]
}
return fakeSubscribe(fakeData,0);
}
}
Ответ 6
Это наиболее ошибочное сообщение об ошибке, которое я когда-либо встречал в Angular.
В моем случае это не имело никакого отношения к отправке, не имеет ничего общего с XmlHttpRequest - по крайней мере, не на уровне, который вы предполагаете при попытке следовать сообщению.
Это было слишком насмехаться над классом, а именно ngrx/store. Я представил два метода Observable в контейнере, которые раньше не были включены в мой макет-класс, и я забыл сделать это, когда начал использовать их. После добавления к макету ошибка исчезла.
... оставляя Карму счастливым, чтобы выполнить "отправить" из XmlHttpRequest, что бы это ни значило.
Ответ 7
Я был укушен той же ошибкой на следующий день - на этот раз проблема была похожа на файл HTML. Использование простого теста длины массива для *ngIf
<ng-container *ngIf="myArray.length > 0">
пришлось реорганизовать в
<ng-container *ngIf="myArrayNotEmpty">
с геттером, как в:
get myArrayNotEmpty(){
return this.myArray && this.myArray.length > 0;
}
Я немного раздражен, хотя такое множество причин покрывается одним очень вводящим в заблуждение и бесполезным сообщением.
Ответ 8
В моем случае в моей макетной службе отсутствовали некоторые общедоступные переменные, к которым обращается компонент в методе ngOnInit.
Ответ 9
У меня тоже была эта проблема. Это оказалось простой ошибкой нулевой ссылки в моем компоненте в одной из моих проверок * ngIf.
Я бы предложил запустить ng serve и проверить, работает ли компонент в браузере без ошибок, или просто запустить ng test --source-map = false, чтобы получить более полезное сообщение об ошибке.
Ответ 10
У меня была та же ошибка, когда я получил доступ к переменной неопределенного объекта.
Пример:
Компонент:
soemthing = {}
Шаблон:
<demo-something [someinput]="something.anotherthing.data"> ...
Таким образом, something
был определен, anotherthing
не определен, и data
может быть недоступен.
Очень досадная ошибка и, насколько я мог судить, пока нет в списке :)