gpt4 book ai didi

Angular2 没有将 "exportAs"设置为 "ngModel"Karma/Jasmine 的指令

转载 作者:太空狗 更新时间:2023-10-29 18:16:47 25 4
gpt4 key购买 nike

我正在开发一个运行良好但 Jasmine 测试抛出模板错误的应用程序。由于运行应用程序有效,模板引用变量可以绑定(bind)到 ngModel,但为什么在运行测试时它不起作用?我正在使用 "@angular/forms": "~2.2.3",

ERROR: 'Unhandled Promise rejection:', 'Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("d="name" required pattern="^[a-zA-Z]+[\s\S]*"
[(ngModel)]="model.name" name="name" [ERROR ->]#name="ngModel" >
</div>
<div [hidden]="name.valid || name.pristine"

我的 app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LinearProgressIndicatorComponent } from './linear-progress-indicator/linear-progress-indicator.component';
import { MyNewDirectiveDirective } from './directives/my-new-directive.directive';
import { MyNewServiceDirective } from './services/my-new-service.directive';
import { HeaderComponent } from './components/header/header.component';
import { MenuComponent } from './components/menu/menu.component';
import { WatchpanelComponent } from './components/watchpanel/watchpanel.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { InputComponent } from './components/input/input.component';
import { LocalStorage } from './services/local-storage.service';
import { MaterialModule } from '@angular/material';

@NgModule({
declarations: [
AppComponent,
LinearProgressIndicatorComponent,
MyNewDirectiveDirective,
MyNewServiceDirective,
HeaderComponent,
MenuComponent,
WatchpanelComponent,
InputComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule.forRoot(),
MaterialModule.forRoot(),
],
exports: [ MaterialModule ],
providers: [LocalStorage],
bootstrap: [AppComponent]
})
export class AppModule { }

输入.component.spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { InputComponent } from './input.component';

describe('InputComponent', () => {
let component: InputComponent;
let fixture: ComponentFixture<InputComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ InputComponent ]
})
.compileComponents();

fixture = TestBed.createComponent(InputComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));

it('should create', () => {
expect(component).toBeTruthy();
});
});

最佳答案

就像您在 AppModule 中所做的一样,您需要将 FormsModule 导入到 TestBed.configureTestingModule 中。您使用它来配置一个完全独立的模块,仅用于测试

TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ InputComponent ]
})

还有一件事。

TestBed.configureTestingModule({
...
})
.compileComponents();

fixture = TestBed.createComponent(InputComponent);

你不能这样做。 .compileComponents 异步解析,并返回一个 promise 。所以你不能在编译之前尝试创建组件。你需要做的

.compileComponents().then(() => {
fixture = TestBed.createComponent(InputComponent);
component = fixture.componentInstance;
fixture.detectChanges();
})

关于Angular2 没有将 "exportAs"设置为 "ngModel"Karma/Jasmine 的指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41198237/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com