Is there a way to obtain a standalone component mock while completely clearing out its imports array?

[skorupka-k]

Given the following example component:

@Component({
    selector: 'app-foo',
    standalone: true,
    imports: [AnotherStandaloneComponent, SomeModule],
    template: 'test <app-another-standalone></app-another-standalone>'
})
FooStandaloneComponent {
  @Input() foo = '';
  @Output() bar = new EventEmitter<void>();
}

During the testing, I would like to get something like:

@Component({
    selector: 'app-foo',
    standalone: true,
    imports: [], // no deps, no mocks
    template: '<ng-content></ng-content>' // or just an empty template
})
FooStandaloneComponent {
  @Input() foo = '';
  @Output() bar = new EventEmitter<void>();
}

so the thing is to get rid of the component deps completely (then ofc skip mocking or keeping them) as in fact in a mocked component I don't need them anymore (when methods are dummies and template is basically empty). This should also have positive effect on performance.

To shed more light on this, one of my scenarios is to be able to use such a mock when testing it's parent component. Simplified example (with Spectator):

const createComponent = createComponentFactory({
    component: StandaloneComponentUnderTest, // this one uses SomeModule as well
    overrideComponents: [
      [
        StandaloneComponentUnderTest,
        {
          remove: {
            imports: [FooStandaloneComponent],
          },
          add: {
            imports: [MockComponent(FooStandaloneComponent)], // SomeModule gets mocked too, not desired
          },
        },
      ],
    ],
  });

So if I use MockComponent(AppFooComponent), all imports of the standalone will get mocked as well and if e.g. the parent also happens to use SomeModule things just get messy, because the module is mocked now.
I know in the example above I can just use:

const deps = MockBuilder(StandaloneComponentUnderTest).mock(FooStandaloneComponent).keep(SomeModule).build();

const createComponent = createComponentFactory({
  component: StandaloneComponentUnderTest,
  ...deps,
});

but this is just a simplified example, real life scenarios are often much more complicated and it's not convenient to track all the deps of the child components over time and keep what's needed. What I need is a way to get just a "shallow", mocked standalone component. Any suggestions?

[satanTime]

Hi @skorupka-k,

The example you gave about MockBuilder and createComponentFactory is the way to go.

The issue with your request is that it would only work in case of @Input and @Output with FooStandaloneComponent, whereas, in reality, FooStandaloneComponent can have dependencies, provide services, expose view and content children etc which require correct imports and declarations even to produce a mock of it.

Could you elaborate your example to demonstrate the exact problem of having chains of MockBuilder?

If you need to keep SomeModule, you can also use ngMocks.globalKeep(SomeModule).
Then the code would be:

const createComponent = createComponentFactory({
  component: StandaloneComponentUnderTest,
  ...MockBuilder(StandaloneComponentUnderTest).build(),
});

Anyway, let's discuss the exact issue you are are facing and see how it could be solved.