'Type X is part of the declarations of 2 modules: Y and Y! ... in Angular Jest tests
When running my Angular Jest tests, I get the following error:
"Type InButtonComponent is part of the declarations of 2 modules: InButtonModule and InButtonModule! Please consider moving InButtonComponent to a higher module that imports InButtonModule and InButtonModule. You can also create a new NgModule that exports and includes InButtonComponent then import that NgModule in InButtonModule and InButtonModule."
I've encountered the "declarations of 2 modules" problem before and it's usually an easy fix; don't declare the same component in two different modules. But, in this case I DON'T declare InButtonComponent in two different modules. It's like Angular is complaining that I'm declaring the component twice in the SAME module? The error message doesn't make any sense to me.
I do not get this error in the app, whether I'm building for prod or running the dev server. Yet, when I run my Jest tests, they fail.
If it helps here are some of the files that may be involved:
// button.component.ts single file SCAM
// ...
@NgModule({
declarations: [InButtonComponent],
imports: [CommonModule],
exports: [InButtonComponent],
})
export class InButtonModule {}
// list-filter.component.ts single file SCAM
// ...
@NgModule({
imports: [CommonModule, InIconModule, InButtonModule],
declarations: [InListFilterComponent],
exports: [InListFilterComponent],
})
export class InListFilterComponentModule {}
// listing.module.ts Feature module
// ...
@NgModule({
declarations: [
ListingComponent,
CardGroupedComponent,
CardViewComponent,
CardCommonFeatureComponent,
QuickFiltersComponent,
ListNotGroupedComponent,
ListGroupedComponent,
ListingHeaderComponent,
ListingListComponent,
ListingDetailComponent,
FilterComponent,
TableViewComponent,
DetailViewListsComponent,
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
InDividerModule,
InIconModule,
InCheckboxModule,
InListingsStatusLabelComponentModule,
InButtonModule,
InToggleComponentModule,
InCarouselModule,
InFormFieldModule,
InListFilterComponentModule,
ListingRoutingModule,
],
providers: [{ provide: QUICK_FILTER_SERVICE, useExisting: ListingQuickFiltersService }],
})
export class ListingModule {}
// filter.component.spec.ts
// one of the tests that fail with the above error message
describe('FilterComponent', () => {
let component: FilterComponent;
let fixture: ComponentFixture<FilterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ListingModule, HttpClientTestingModule, RouterTestingModule],
providers: [DatePipe],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(FilterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
What is the cause of this issue and how can I fix it?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
