Problems with ActivatedRoute in Standalone Component

[Simon-TheHelpfulCat]

I am having an issue with using MockBuilder to test a Standalone Component that uses [RouterLink].

The Component is defined like this:

@Component({
  standalone: true,
  imports: [CommonModule, RouterModule, MatListModule],
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {}

The template is:

<mat-nav-list>
  <a mat-list-item [routerLink]="['link']">Link</a>
</mat-nav-list>

My test is still at the should create stage:

  it('should create', () => {
    const fixture = TestBed.createComponent(MyComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });

I have recently switched to using MockBuilder for my test setup and for this test I started with:

    MockBuilder(MyComponent);

but this resulted in:

NullInjectorError: No provider for ActivatedRoute!

Looking through the documentation suggested that:

    MockBuilder(MyComponent)
      .keep(RouterModule)
      .keep(RouterTestingModule)

might work, but I get the same result. I also tried:

    MockBuilder(MyComponent)
      .mock(RouterModule)
      .keep(RouterTestingModule)

and

    MockBuilder(MyComponent)
      .exclude(RouterModule)
      .keep(RouterTestingModule)

with no luck. I even tried:

    MockBuilder(MyComponent)
      .provide(MockProvider(ActivatedRoute));

but it still tells me I have no provider for ActivatedRoute. If I use TestBed directly:

   TestBed.configureTestingModule({
      imports: [MyComponent, RouterTestingModule]
    }).compileComponents();

the test passes.

It's probably something really stupid, but I just can't see it. Any help would be gratefully received.

[satanTime]

Hi there,

ActivatedRoute isn't a part of RouterModule, it's defined in .forRoot and in .forChild.
Because your component imports RouterModule only, you need to provide ActivatedRoute additionally for TestBed.

Your last try with .provide is the right one and works correctly: https://codesandbox.io/s/sweet-rubin-mx7owq?file=/src/test.spec.ts

[satanTime]

I found a couple of bugs, maybe one of them is causing issues on your side. If you can fail the example above like your project is failing, that would be great.

[Simon-TheHelpfulCat]

Okay, coming back to it this morning with fresh eyes I have spotted the problem. In actual fact:

MockBuilder(MyComponent)

is all that was needed

The issue was that I was not returning the builder. I had:

  beforeEach(async () => {
    MockBuilder(MyComponent)
  });

whereas I should have had:

  beforeEach(async () => MockBuilder(MyComponent));

or

  beforeEach(async () => {
    return MockBuilder(MyComponent)
  });

If I modify your example to make it how I originally had it, it fails in the same way.

I am sorry to have bothered you with such a trivial mistake, but I'm afraid that last night my tired eyes just couldn't see the error! Hopefully it will benefit another tired developer at some point by making them look again at their code.

[satanTime]

Hi Simon, good that it was a simple fix :) And no worries, feel free to ask a question any time.