#Shallow testing standalone components

1 messages · Page 1 of 1 (latest)

sour skiff
#

Hi all.
Is there a way to use mock components while testing a standalone component?
I've tried using overrideComponent but I'm not having luck with that. It complains about missing imports ( Failed: [ 'NG0304: 'mat-card' is not a known element, etc).

  beforeEach(
    waitForAsync(() => {
      TestBed.overrideComponent(HomeChartCardComponent, { set: { imports: [] } })
        .configureTestingModule({
          declarations: [
            MockButtonToggleComponent,
            MockCurrencyChipsComponent,
            MockHeaderPriceGraphComponent,
            MockPriceLineComponent,
          ],
          imports: [HomeChartCardComponent, MatCardModule, NgIf, ReactiveFormsModule, RouterTestingModule],
          providers: [mockActionServiceProvider, mockAnalyticsService, mocki18nExtended],
        })

        .compileComponents();
    }),
  );

The components/providers prefixed with mock are the mock components we use for testing, in order to create a shallow test.
I've tried adding a schema of CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA but I still get the same issues.

Is there a way to do this without resorting to a third-party library?

tribal garden
#

I think the best way is to use overrideComponent, but only use remove and add to remove the sub-components you want to stub by their stub.