Unexpected result when unit testing router.navigate's toHaveBeenCalledWith method

• Angular: 18.2.13
• Jest: 29.7.0

I'm unit testing a method in my component which performs a router.navigate after a successful HTTP call. Note that I've removed some of the unncessary code for brevity

requestInformation_click() {
this.showCommentError = !this.comment; // cast to boolean
if (this.comment) {
this.accountsService.requestMoreInformation(this.requestId, this.comment).subscribe(
response => {
this.router.navigate([`/list-account-requests/${this.requestId}`], {
state: {
feedback: '\'Additional info needed\' request sent'
}
});
},
);
}
}


However it insists the navigate method is being called twice, when it is clearly not.

// out of position code for example only
mockRouter = { navigate: jest.fn() };

await TestBed.configureTestingModule({
.. other stuff
providers:[
{ provide: Router, useValue: mockRouter },
],
})
.compileComponents();

it('should route to `list-account-requests/abc123` when requestMoreInformation is successful', () => {
component.comment = 'this is a call';
route.snapshot.params.requestId = 'abc123';
const detailsSpy = jest.spyOn(mockAccountsService, 'requestMoreInformation').mockReturnValue(of({
success: true,
}));
component.requestInformation_click();
expect(mockRouter.navigate).toHaveBeenCalledWith(['/list-account-requests/abc123']);
});


This is the error that VS Code is displaying for this unit test:

NewAccountRequestDetailsComponent > should route to `list-account-requests/abc123` when requestMoreInformation is successful
-----
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: ["/list-account-requests/abc123"]
Received
1
Array [
- "/list-account-requests/abc123",
+ "/list-account-requests",
],
2
Array [
- "/list-account-requests/abc123",
+ "/list-account-requests/undefined",
],
+ {"state": {"feedback": "'Additional info needed' request sent"}},

Number of calls: 2


I've tried including the state object, but that has no effect. I've added a expect().toHaveBeenCalledTimes(2) assertion which passes. So Angular or Jest clearly thinks it's being called twice.

I am testing the router.navigate function in several other tests (one of which can be seen below), all of which pass . On the off chance they were throwing false positives I commented them out before running this failing test, to no avail.

it('should route to `list-account-requests` when requestId is null or undefined', () => {
route.snapshot.params.requestId = undefined;
component.ngOnInit();
expect(mockRouter.navigate).toHaveBeenCalledWith(['/list-account-requests']);
expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
});


Can anyone help me understand why this particular test is failing?

Continue reading...