Router events triggered unexpectedly when a component is rendered

The router events will be trigger when a component is rendered.

Given a component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-apple',
  templateUrl: './apple.component.html',
  styleUrls: ['./apple.component.css'],
})
export class AppleComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.subscribe((event) => {
      console.log(event);
    });
  }
}

and its test

import { AppleComponent } from './apple.component';
import { render, screen } from '@testing-library/angular'
import { RouterTestingModule } from '@angular/router/testing';

describe('AppleComponent', () => {
  it('should have "apple works!"', async () => {
    await render(AppleComponent, {
      declarations: [AppleComponent],
      imports: [RouterTestingModule]
    })
    expect(screen.getByText('apple works!'));
  });
});

Now run the test then you can see the router events (which won’t show up with Angular TestBed or when running the app)

Is this an intentional behaviour? (FYI I believe this behaviour was introduced in version 11.0.3: https://github.com/testing-library/angular-testing-library/pull/286)

[timdeschryver]

Thanks @ruoxin-mx51, this will get fixed soon.

[github-actions[bot]]

🎉 This issue has been resolved in version 13.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀