Every it causes an additional MockMiddleware... component to be created

[tmercswims]

First of all, thank you very much for this wonderful package, it has made my life testing an Angular application with tons of services so much better.

I've encountered a strange issue, that I suspect is user error. But I can't for the life of me figure out what I'm doing wrong here, especially because I've used the exact same pattern in a dozen other test files and everything has worked without issue. Just this random one is having a problem.

I can provide my actual test file if its required, but it contains enough company-private information that I'd prefer not to, at least for now. But this is the general idea:

describe('', () => {
  ngMocks.faster();

  let component: MyComponent;
  let fixture: MockedComponentFixture<MyComponent, any>;

  beforeAll(() => {
    const aThing = { };

    return MockBuilder(MyComponent, ModuleWithMyComponent)
      .provide(MockProvider(ServiceNotInAModule))
      .provide(MockProvider(ComponentScopedService))
      .mock(MyService, {
        someProp: [],
      })
      .mock(MyOtherService, {
        someProp: { },
        anotherProp: new Wrapper(aThing),
      });
  });

  beforeEach(() => {
    fixture = MockRender(MyComponent, {
      someProp: new FormGroup({ }),
      anotherProp: { },
    });
    component = fixture.point.componentInstance;
  });

  it('test 1', () => {
    expect(true).toBe(true);
    // PASSES!
  });

  it('test 2', () => {
    expect(true).toBe(true);
    /*
     FAILS:
       Error: Template parse errors:
       More than one component matched on this element.
       Make sure that only one component's selector can match a given element.
       Conflicting components: MockMiddlewareMyComponent,MockMiddlewareMyComponent ("[ERROR ->]<ng-mocks-MyComponent [someProp]="someProp" [anotherProp]="anotherProp"></ng-mocks-MyComponent>"): ng:///DynamicTestModule/MockRenderComponent.html@0:0
     */
  });

  it('test 3', () => {
    expect(true).toBe(true);
    /*
     FAILS:
       Error: Template parse errors:
       More than one component matched on this element.
       Make sure that only one component's selector can match a given element.
       Conflicting components: MockMiddlewareMyComponent,MockMiddlewareMyComponent,MockMiddlewareMyComponent ("[ERROR ->]<ng-mocks-MyComponent [someProp]="someProp" [anotherProp]="anotherProp"></ng-mocks-MyComponent>"): ng:///DynamicTestModule/MockRenderComponent.html@0:0
     */
  });
});

If you look at the errors, you can see that each subsequent test has another of the same component which is conflicting. If I were to re-order these three its, whichever one is first will always pass, and all the subsequent ones will always fail with an increasing number of duplicate components.

As I said, I've used this exact pattern (i.e. MockBuilder() in the beforeAll and then MockRender() in the beforeEach) in a dozen or more test files, so I really can't figure out why this is only a problem for this one.

The only weirdness that I can think of which might potentially be an issue is that MyComponent injects ComponentScopedService in its constructor, and ComponentScopedService injects MyOtherService in its constructor, so maybe there's some dependency resolution or order of declaration problems with that?

Any help would be appreciated. Thank you very much!

[satanTime]

Hi @tmercswims,

thanks for the report.

It is something what I'm currently trying to tackle. I think next days there will be a fix for it.

[tmercswims]

Oh okay, that's great to hear!

If you don't mind, could you provide some insight as to why this is a problem for me in this particular test file, but not in any of my others? Is it the dependency thing that I described at the end?

[satanTime]

If I'm not mistaken, MyComponent doesn't have a selector.

[tmercswims]

You are absolutely correct, it doesn't. I didn't even think to check that, how silly of me. Well, that means I have the easy "workaround" of adding a selector to the component declaration, which worked for me just now.

From my perspective this issue is resolved, but please feel free to keep it open if you'd like to use it to track the fix you mentioned earlier.

Thanks so much for your help and quick responses!

[satanTime]

Glad to hear 👍

Yep, thanks. I'll use this issue as a ref for the fix.

[satanTime]

v12.0.1 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.