Angular Unit Tests - how to mock router.url

Question

I have an angular 6 application and I am trying to unit test a component where I inject the Router. In my ngOnInit method I reference this.router.url and work with it.

So now I am attempting to write a jasmine unit test and I cannot set the router.url property because it "is a constant ot read only property". I am currently mocking the router like this.

mockRouter = jasmine.createSpyObj<Router>("router", ["navigate", "navigateByUrl"]);

What else do I need to set to properly mock the url value in my test?

Alex Karamushko · Accepted Answer · 2019-06-08 05:20:24Z

12

Jasmine spy on property should be reasonable solution

spyOnProperty(router, 'url', 'get').and.returnValue('/users');

as recommended here https://stackoverflow.com/a/43793575/11552394

and documented in Jasmine docs https://jasmine.github.io/api/3.4/global.html#spyOnProperty

answered Jun 8, 2019 at 5:20

Alex Karamushko

3013 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rkmr039 Over a year ago

i am getting url property dosn't exist error. Note: url is a read-only property, does it have any effect on spyOnProperty() behavior ?

reinaH Over a year ago

define your router object after your describe. then this is what worked for me: beforeEach(() => { TestBed.configureTestingModule({ providers: [ { provide: Router, useValue: { url: '/page1', events: of(new NavigationEnd(0, '/page1', '/')), navigate: jasmine.createSpy('navigate'), }, }, ], imports: [RouterTestingModule], }).compileComponents(); router = TestBed.inject(Router); MockRender(); });

reinaH · Accepted Answer · 2023-07-18 03:54:20Z

0

this is what worked for me:

describe('Yourserviceorcomponent', () => {

...

let router: Router;

...

beforeEach(() => {
TestBed.configureTestingModule({
  providers: [
    {
      provide: Router,
      useValue: {
        url: '/page1',
        events: of(new NavigationEnd(0, '/page1', '/')),
        navigate: jasmine.createSpy('navigate'),
      },
    },
  ],
  imports: [RouterTestingModule],
}).compileComponents();

router = TestBed.inject(Router);

MockRender();
});
...
});

answered Jul 18, 2023 at 3:54

reinaH

5536 silver badges10 bronze badges

1 Comment

wheeleruniverse Over a year ago

Is there any way to update the router url afterwards?

Collectives™ on Stack Overflow

Angular Unit Tests - how to mock router.url

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related