angular unit test trying to import module to fix reference causing part of 2 modules error

Question

I have a component test I am writing:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { SharedModule } from '../shared.module';
import { ExclusionsComponent } from './exclusions.component';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [SharedModule],
            declarations: [ExclusionsComponent],
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ExclusionsComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

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

This component is part of the SharedModule and it has another component from the same module. So I added this line:

imports: [SharedModule],

to make it work. But now I am getting an error stating:

Failed: Type ExclusionsComponent is part of the declarations of 2 modules: SharedModule and DynamicTestModule! Please consider moving ExclusionsComponent to a higher module that imports SharedModule and DynamicTestModule. You can also create a new NgModule that exports and includes ExclusionsComponent then import that NgModule in SharedModule and DynamicTestModule.

The html for the component is this:

<div class="table-responsive" *ngIf="items?.length">
    <table class="table card-table table-vcenter text-nowrap">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Field name</th>
                <th>Operator</th>
                <th>Expression</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let exclusion of items">
                <td>{{ exclusion.id }}</td>
                <td>{{ exclusion.name }}</td>
                <td>{{ exclusion.fieldName }}</td>
                <td>{{ exclusion.filterOperator }}</td>
                <td>{{ exclusion.expression }}</td>
                <td class="fit">
                    <button class="btn btn-warning" (click)="openSaveForm(exclusion)"><i
                            class="fas fa-edit"></i></button>
                    <button class="btn btn-danger ml-1" (click)="openModal(exclusion.id)">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<app-confirmation-dialog></app-confirmation-dialog>
<app-exclusions-save #saveForm></app-exclusions-save>

you can see the app-confirmation-dialog which is what is causing the issue. They are both part of the same module. How can I import the SharedModule without getting that error?

Prabh Prabh · Accepted Answer · 2019-11-03T15:24:32

You have two options. Either

Remove SharedModule from imports and add ConfirmationDialog in declarations

beforeEach(async(() => {
  TestBed.configureTestingModule({
    // remove shared dialog
    imports: [],
    declarations: [ExclusionsComponent, ConfirmationDialog]
  }).compileComponents();
}));

Remove ExclusionsComponent from declarations

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [SharedModule],
    // remove ExclusionsComponent
    declarations: []
  }).compileComponents();
}));

angular unit test trying to import module to fix reference causing part of 2 modules error

1 Answers