[英]How do I solve this error when unit testing child component with reactive form as input using Jest and Spectator?
I'm trying to write a basic unit test for an Angular component which is used as a child component and receives a reactive form through an Input() from it's parent. 我正在尝试为用作子组件的Angular组件编写基本的单元测试,并通过其父级的Input()接收反应形式。 I'm trying to write a unit test using a host component to wrap the component to be tested. 我正在尝试使用主机组件编写一个单元测试,以包装要测试的组件。 I'm using https://netbasal.gitbook.io/spectator/ with Jest to write my tests. 我将https://netbasal.gitbook.io/spectator/与Jest一起使用来编写测试。 I can't get the simplest test working for this component and my guess is the problem has something to do with dependencies. 我无法针对该组件进行最简单的测试,我的猜测是问题与依赖关系有关。 I've been searching google extensively but I can't seem to find anybody else running into this error. 我一直在广泛搜索google,但似乎找不到其他人遇到此错误。
I've tried writing the test without the host component but that also doesn't seem to be working. 我试过在没有主机组件的情况下编写测试,但这似乎也不起作用。
describe('ProjectFormComponent', () => {
let host: SpectatorWithHost<ProjectFormComponent>;
const createHost = createHostComponentFactory<ProjectFormComponent>({
component: ProjectFormComponent,
imports: [
CommonModule,
ReactiveFormsModule,
FontAwesomeModule,
HttpClientTestingModule,
RouterTestingModule,
NgxErrorsModule,
NgSelectModule,
ToastrModule.forRoot(),
MaterialImportsModule,
FormsModule,
SharedModule
],
providers: [
{ provide: NgxErrorDirective, useValue: {} },
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: Store, useValue: {} },
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
]
});
test('ProjectFormComponent is created', inject([FormBuilder], (fb: FormBuilder) => {
const mockForm = fb.group({
name: ['', [Validators.required, Validators.maxLength(255)]]
});
host = createHost(`<app-project-form></app-project-form>`, false, { parent_form: mockForm });
expect(host.component).toBeTruthy();
}));
});
It's a simple test which should result positive. 这是一个简单的测试,应该会产生积极的结果。 But when I run ng test I get the error: Cannot override module metadata when the test module has already been instantiated. 但是,当我运行ng test时,出现错误:测试模块已经实例化时,无法覆盖模块元数据。 Make sure you are not using inject
before overrideModule
. 确保您在overrideModule
之前没有使用inject
。
As a way of not repeating the same answers, 为了避免重复相同的答案,
https://github.com/NetanelBasal/spectator/issues/57 https://github.com/NetanelBasal/spectator/issues/57
https://github.com/NetanelBasal/spectator/issues/39 https://github.com/NetanelBasal/spectator/issues/39
https://github.com/NetanelBasal/spectator https://github.com/NetanelBasal/spectator
I think you can be benefited by similar issues, see below, 我认为您可以从类似的问题中受益,请参阅下文,
1) Angular2 RC5 how to properly configure test module 1) Angular2 RC5如何正确配置测试模块
2) angular Testbed overrideModule not working 2) 角度测试平台overrideModule不起作用
Also a good read https://codecraft.tv/courses/angular/unit-testing/dependency-injection/ 也很好阅读https://codecraft.tv/courses/angular/unit-testing/dependency-injection/
Hope this helps 希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.