2

In my unit test I'm doing the following (via @ngneat/spectator):

    const createComponent = createComponentFactory({
        component: AppComponent,
        detectChanges: false,
        declarations: MockComponents(IgxToastComponent, NgxUiLoaderComponent),
        imports: [
            CommonModule, IgxToastModule, RouterTestingModule, NgxUiLoaderModule,
            MockComponent(HeaderComponent)
        ],
        mocks: [ToasterService]
    })

The HeaderComponent is a standalone component and so per the instructions on the ng-mock site I included it in the imports. When I run my tests though, I'm getting errors from the construction of the HeaderComponent since it include other services that this component doesn't use/mock. My understanding is that by using MockComponent it should have faked out the component so that even though the html still has <app-header> it doesn't actually try to load the HeaderComponent.

Am I supposed to be doing something differently?

I'm using ng-mocks 14.0.1

Gargoyle
  • 9,590
  • 16
  • 80
  • 145
  • It looks that something in your particular setup doesn't work well. A similar boilerplate works as expected: https://codesandbox.io/s/vigorous-moon-o9ble5?file=/src/test.spec.ts. Could you create a min repo with the issue and report it on github: https://github.com/ike18t/ng-mocks/issues/new/choose ? – satanTime Jun 22 '22 at 06:08
  • Could you share decoration of the `AppComponent`? Is it standalone? I can assume, if it's standalone, then your description is expected behavior, and you need to use MockBuilder to get correct mock of imports. – satanTime Jun 23 '22 at 05:33
  • Yes everything is standalone. Sorry haven’t been able to create a small sample showing this yet. I’ll try to look at the builder you mentioned when I wake up tomorrow. – Gargoyle Jun 23 '22 at 07:25
  • If AppComponent is standalone, it means it uses own import of HeaderComponent, and ignores what is imported in the parent module. You need to use MockBuilder(AppComponent). It mocks internal dependencies. – satanTime Jun 23 '22 at 08:11

1 Answers1

1

Because your components are standalone, you need to use MockBuilder. It will keep AppComponent as it is, whereas its imports will be mocked:

// building TestingModule definition
const dependencies = MockBuilder(
  [AppComponent, RouterTestingModule],
).build();

const createComponent = createComponentFactory({
  component: AppComponent,
  detectChanges: false,
  mocks: [ToasterService],

  // adding dependencies where AppComponent is kept,
  // and its imports are mocks
  ...dependencies,
});
satanTime
  • 12,631
  • 1
  • 25
  • 73
  • I'm not understanding this at all. If I weren't using HeaderComponent then my code would look like what's in my question, minus the mock of HeaderComponent. Why does add `` to the HTML make me suddenly need to define AppComponent so differently? What you've shown also doesn't seem to handle the HeaderComponent at all. – Gargoyle Jun 26 '22 at 20:01
  • Could you add decoration of the AppComponent to your question? Then I can explain what is happening exactly. Also if you try my suggestion in your project - does it work or still throws? – satanTime Jun 26 '22 at 20:16
  • So, I did extensive testing with `spectator` and, eventually, it ended up that `MockBuilder` is the easiest way: https://ng-mocks.sudo.eu/extra/with-3rd-party#ngneatspectator-and-mockbuilder. The problem here is that if `AppComponent` is standalone, it uses only own imports, not what a module imports / declares. – satanTime Jul 03 '22 at 08:23