How do I test Components & Routing with the RouterTestingHarness

Tired of writing boilerplate code to test Angular components with router-specific data?

The RouterTestingHarness is your new best friend! This video dives deep into this under-appreciated Angular testing tool, showing you how to:

- Simplify tests involving ActivatedRoute and dynamic router parameters.
- Reduce boilerplate code and write cleaner, more maintainable tests.
- Navigate to specific routes and verify component behavior.

Whether you're a seasoned Angular developer or just starting out with testing, this video will equip you with the skills to write more efficient and effective tests.

0:00 Introduction
0:05 Theory
2:08 Test without RouterTestingHarness
6:40 Testing with RouterTestingHarness
11:53 Farewell

[ZeroInfinityVideo]

Thanks a lot!!!
I am having trouble loading the whole page and rendered completely. I have a AgGrid table with custom cell component, I am trying to get the columns but, because page is not loaded completely, nativeElement on the fixture can't find it. I am using angular 17 with standalone
Suggestions?
Thanks

[MrAnother]

Thanks a lot! I'm looking to do the same thing, but I'm using Cypress component testing. Is there anyway to test routing without having to write e2e tests?

[BruceMcGivern]

Does that also take care of the Problems with nested components? I ran into the Problem, that if I have Component A which includes Component B which includes Component C, ... and I regulary have the issue that Karma has Problemns rendering the Child Components (e.g. triggering/rendering Errors on reactive Forms Fields of the field is in a Child Component)

[paulh]

i'm guessing the only part of the route that matters is the :id. detail/ could be foo/ and the test would work the same, correct?