title: Testing ActivatedRoute.paramMap without mocking the Router
body: <p>I would like to test how a component is handling <code>this.activatedRoute.paramMap</code> in my tests, <strong>without mocking the ActivatedRoute</strong> (i.e. using the RouterTestingModule, no spies or mocks).</p>
  <p>In the following <a href="https://stackblitz.com/edit/angular-routing-playground-routing-test?file=app/routing-examples/routing-examples.component.spec.ts" rel="nofollow noreferrer">stackblitz</a>,I set up a fairly trivial component listening for the <code>id</code> route parameter:</p>
  <pre><code>@Component({ /* ... */})
  export class RoutingExamplesComponent {
    constructor(private readonly route: ActivatedRoute, /* ... */) {}
  
    readonly param$ = this.route.paramMap.pipe(map(params =&gt; params.get('id') ?? '&lt;none&gt;'));
    // ...
  }
  </code></pre>
  <p>In my tests, I then want to setup my route and ensure the parameter is well propagated:</p>
  <pre><code>beforeEach(() =&gt; {
    TestBed.configureTestingModule({
      imports: [
        RoutingExamplesModule,
        RouterTestingModule.withRoutes([
          {
            path: &quot;route/:id&quot;,
            component: RoutingExamplesComponent
          }
        ])
      ]
    });
  
    fixture = TestBed.createComponent(RoutingExamplesComponent);
    component = fixture.componentInstance;
    router = TestBed.get(Router);
  });
  
  
  it(&quot;receives initial setup&quot;, async () =&gt; {
    fixture.detectChanges();
    await router.navigate([&quot;route&quot;, &quot;1234&quot;]);
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector(&quot;p&quot;).textContent).toContain(
        &quot;1234&quot;
      );
    });
  </code></pre>
  <p>This test does not pass, as it looks like the parameter is not propagated:</p>
  <pre><code>Expected '&lt;none&gt;' to contain '1234'.
  Error: Expected '&lt;none&gt;' to contain '1234'. at &lt;Jasmine&gt; at UserContext.eval (https://angular-routing-playground-routing-test.stackblitz.io/~/app/routing-examples/routing-examples.component.spec.ts:31:80)
  </code></pre>
  <p><strong>How can I achieve to get this parameter right, without mocking the router in any way?</strong></p>
  <hr />
  <p><em>Some optional context about what I am doing</em>: most of the stack overflow responses about router testing suggest to mock it, which I believe is a critical mistake to do. I have been successful at testing things against the RouterTestingModule in general, however paramMap is contextual to the sub router.</p>