Bug: Mocking standalone components may cause warnings

[clusterberries]

Description of the bug

In my app, I have started using standalone components and found a bug related to it. Note that this issue does not occur with non-standalone components.

Steps:

1. There is a SharedModule with some components used across the application.
2. There is a standalone component StandaloneComponent that uses components from SharedModule.
3. MyComponent (not standalone) uses StandaloneComponent and also some components from SharedModule.
4. Create tests for MyComponent and mock the dependencies using MockComponent like the following example:

   TestBed.configureTestingModule({
     imports: [MockComponent(StandaloneComponent)],
     declarations: [MyComponent, MockComponent(SharedComponent2)],
   }).compileComponents();

Result: After running this test there is a warning in the console NG0304: 'app-shared2' is not a known element (used in the 'MyComponent' component template)

Workaround: mock the entire SharedModule instead of mocking separate components. However, this approach may cause performance issues if SharedModule contains a large number of components.

An example of the bug

Link: https://stackblitz.com/edit/github-pyxbdq?devToolsHeight=33&file=src%2Ftest.spec.ts

Expected vs actual behavior

Actual result: a warning in the console NG0304: 'app-shared2' is not a known element (used in the 'MyComponent' component template). Expected result: The warning should not appear, since the SharedComponent2 is properly mocked.

Thank you for checking this out!

[satanTime]

Hi @clusterberries,

thanks for highlighting the issue. Working on its fix.

[satanTime]

The fix is here. However, even without ng-mocks it throws:

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

ng-mocks will process declarations in the same way and will throw the same error now:

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

[satanTime]

The right way is to import a mock of SharedModule.

[satanTime]

So, I found a way to fix that in a flexible way. In case of ng-mocks, TestBed will receive SharedModule in imports instead of SharedComponent2 in declarations.

[satanTime]

v14.12.0 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.

[clusterberries]

Hi @satanTime, thank you! It works excellently now