'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