Angular 20 w Story 10 mocking a navigation click

I have an Angular 20 app, running Storybook 10. My component works perfectly, however, I'm trying to set up Storybook to mock a navigation link. I just can't seem to get it to work.

This is my router Mock:

import { BehaviorSubject } from "rxjs";
import { action } from "storybook/actions";

export class mockRouter {
public url = '';
public events = new BehaviorSubject<any>(null);;

public navigate(commands: any[], extras?: any): Promise<boolean> {
action('[router] navigate')({commands, extras});
return Promise.resolve(true);
}

public navigateByUrl(url: string, extras?: any): Promise<boolean> {
action('[router] navigateByUrl')({url, extras});
return Promise.resolve(true);
}
}


This is my story. At the line 'const router = injected.get(Router);', 'injected' is null. This really should work based on documentation, however, I can't seem to get the injected context. What am I doing wrong?

const meta: Meta<TestComponent> = {
title: 'Test Story',
component: TestComponent,
tags: ['autodocs'],
parameters: {
layout: 'fullscreen',
},
args: {
},
decorators: [
moduleMetadata({
providers: [
{ provide: Router, useClass: mockRouter },
],
}),
],
};

export default meta;

type Story = StoryObj<TestComponent>;

export const Standard: Story = {
args: {
},
render: (args, { injected }) => {
const router = injected.get(Router);
(router.events as BehaviorSubject<any>).next(
new NavigationEnd(1, '/home', '/home')
);
return {
props: args,
};
},
};

Continue reading...