When testing a component that consumes other components from a library that is compiled against an older version of angular, the mocked components that shallow-render generates are not correctly marked with the standalone flag.
See the following setup:
Test:
describe('DraftAvailableComponent', () => {
let shallow: Shallow<DraftAvailableComponent>;
beforeEach(() => {
shallow = new Shallow(DraftAvailableComponent, DraftsModule).mockPipe(LanguagePipe, (key: string) => key);
});
it('should init DraftAvailableComponent', async () => {
const { instance } = await shallow.render();
expect(instance).toBeDefined();
});
it('display DraftAvailableComponent', async () => {
const { instance, find } = await shallow.render();
expect(instance).toBeDefined();
expect(find('.draft-desc').nativeElement.textContent).toContain('mss.DRAFT_AVAILABLE_MESSAGE');
expect(find('.continue-draft').nativeElement.textContent).toContain('mss.CONTINUE_DRAFT');
expect(find('.new-action').nativeElement.textContent).toContain('mss.NEW_ACTION ');
});
});
Module:
@NgModule({
imports: [CommonModule, MyAdpCommonModule, SynergButtonModule, SynergIconModule, SynergModalModule],
declarations: [DraftAvailableComponent, DraftSavedModalComponent],
exports: [DraftAvailableComponent, DraftSavedModalComponent]
})
export class DraftsModule {}
In this example the Synerg modules originate from a library compiled against an older angular version and provide components to the component being tested. When running the tests this error occurs:
Unexpected "MockOfIconComponent" found in the "declarations" array of the "MockOfIconModule" NgModule, "MockOfIconComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?
As you can see, shallow-render is failing to tag the generated mock components with standalone: false
When testing a component that consumes other components from a library that is compiled against an older version of angular, the mocked components that shallow-render generates are not correctly marked with the standalone flag.
See the following setup:
Test:
Module:
In this example the Synerg modules originate from a library compiled against an older angular version and provide components to the component being tested. When running the tests this error occurs:
As you can see, shallow-render is failing to tag the generated mock components with
standalone: false