ng-mocks MockDirectives(MatTooltip) Error: NG0300: Multiple components match node with tagname button

Question

I'm facing an issue with failed unit tests:

Error: NG0300: Multiple components match node with tagname app-progress-button.

Error: NG0300: Multiple components match node with tagname button


 Error: NG0300: Multiple components match node with tagname mat-icon.

And after some investigation, I found this line of code:

  beforeEach(
waitForAsync(() => {
  TestBed.configureTestingModule({
    declarations: [
      ContextViewerComponent,
      MockComponents(MatToolbar, MatToolbarRow, MatIcon, MatCard, AgGridAngular),
      MockDirectives(MatTooltip)
    ],
    providers: [
      mockWith(Router, Mock.of<Router>({ url: `/dashboards/${DASHBOARD_ID}` })),
      mockWith(
        RepositoryService,
        Mock.of<RepositoryService>({
          getObjects: () => of([]),
          configTypes$: of({}),
          userActionActionCategoryMap$: of(new Map()),
          actionCategoryUserActionMap$: of(new Map()),
          workflowTransitions$: of({})
        })
      ),
      mockWith(
        ContextHttpService,
        Mock.of<ContextHttpService>({
          getContext: () => of(Mock.of<Context>({ objectIds: ['a', 'b'] })),
          updateContext: () => of(void 0)
        })
      ),
      mockWith(
        DashboardStateService,
        Mock.of<DashboardStateService>({
          openEditor: () => {},
          openFileEditor: () => {},
          programRunStarted: () => {},
          contextEdited: () => {},
          contextActivated: () => {}
        })
      ),
      mockWith(
        DashboardQueryService,
        Mock.of<DashboardQueryService>({
          contextActivated$: of({}),
          contextEdited$: of({}),
          detachedFromContext$: of(),
          attachedToContext$: of({}),
          getDashboard: () => of(DASHBOARD)
        })
      ),
      mockWith(
        MatDialog,
        Mock.of<MatDialog>({
          open: () => ({
            afterClosed: () =>
              of({
                name: dialogNameResult,
                description: dialogDescriptionResult
              })
          })
        })
      ),
      mockAll(ConfigTypeUtil),
      mockAll(DashboardHttpService),
      mockAll(HelpService),
      mockAll(ToastService),
      { provide: Clipboard, useValue: clipboardSpy }
    ]
  }).compileComponents();
  gridApi = Mock.all();
})

);

is the reason failure, any explanation for that?

Could you add the decorators of the FabMenu and ProgressButton? Also, please add the whole beforeEach. — satanTime, Oct 14 '22 at 08:01
I have update my question and I included all the beforeach blok — Rebai Ahmed, Oct 14 '22 at 08:33
Hm, in my case it doesn't fail at all. Also, it doesn't look like `app-progress-button` is provided by any declaration here. What do you get if you remove `MockComponents` and `MockDirectives`, and pass the declaration as it is? — satanTime, Oct 22 '22 at 13:30

score 1 · Answer 1 · answered Dec 24 '22 at 12:04

There was a similar discussion in ng-mocks, which covers how kept and mock declarations are defined in TestBed.

The result of the discussion is 2 fixes released in ng-mocks@14.5.1. Under the hood of TestBed, they redefine TestingModule in the way which should fix all Multiple components match node with tagname.

Could you try ng-mocks@14.5.1 and check whether it has solved your issue too? Please note that v14 works with all Angular versions.

ng-mocks MockDirectives(MatTooltip) Error: NG0300: Multiple components match node with tagname button

1 Answers1