Unit testing Angular with Jest tutorial

Learn how to unit test an Angular project in Jest in just a few simple steps.
(Sorry about the font size, it was my first video. All future videos will have a more readable font size).

Setting up Jest in an Angular project:

Mocking test data:

Instagram/Twitter: @theRyanSmee
Author: Ryan Smee

[nikhilpadmawar]

Hi, Is there any way that you can increase the font of the video, it would be really helpful :)

[PainYvonWedel]

I've been searching for day now, looking for decent resources for testing with Jest and maybe even in the Angular context. Thank you a lot, there were a couple great tips and tricks in there and the editing an pacing was great too.
I can only second the request for more videos on the topic from you.

[aram]

This is a highly underrepresented type of content. Well spent lockdown time :)

[MircoHeinzel]

Hi, thanks for the great video!
I have two personal remarks:
- The background music distracted me from listening to you...
- I would be able to follow you even better if the font size was a little larger ;)

[elnogal]

This and the one for the set-up have made my life so much easier now that I need to learn testing in my new job, tysm.

[harisjamil]

Great tutorial! every thing was very cleanly explained, Keep them coming in

[Matrium]

Nice Video (besides the font-size, but that has already been said). A great introduction.

Some of the tests seem a bit unnecessary, like the test verifying that ngOnInit calls another method - that's not testing your code, it actually tests if Angular's Lifecycle Hooks (or not even that, you are explicitly calling it in your testcode).

It's so hard to write good tests and requires a lot of work. That's true for backend testing as well, but I feel like frontend testing is even harder to write (because you have to mock even more) and the "return on invest" is just lower.
In my next project I will try to use Jest only for pure functions like service calls or pipes and use Cypress for end-to-end testing the actual components and interaction. Maybe I'll regret that, we'll see :)

[raysunqi]

Thanks so much for this tutorial, I am gonna start working for a company using Angular and jest tomorrow and this is super helpful!

[nehalilhare]

Thank you so much for this tutorial, I am learning jest and this is super helpful!

[pandadncr]

Hello, I can't find the tests in the GitHub project. Could someone please tell me where they are? Thanks

[christopheradolphe]

Hi, I recently started an angular project and wanted to use Jest instead of Karma. Your videos really helped me to get started with that. I don't know if you are planning to do a video about migrating from Jasmine - Protractor to Cypress for E2E testing but I'm really looking forward to that as well. I like the content of your channel, you earned yourself a subscriber. Keep up the great work.

[xloras]

Here is a lot what I like: easy to listen to the voice, explaining why you like to do in the way you do stuff, good quality video and sound, code nicely written, For the improvement: someone mention music as an issue, actually, I liked it but maybe it could be a little bit quieter (just make sure you have a rights to use it); Font needs to be way bigger, I would think the line (max 80-120 long) should spam full width of the screen (for phone users) or if in split-screen mode two code line in the full screen (without "Project" window). I don't know if you know but here is presentation mode in the Webstorm. You might want to experiment with it.
Overall good video and I believe in your success. Subscribed in advance.
PS. You reminded me of the funfunfunction which is good as he decided to take a break from YouTube.

[rakeshkb]

Hi, Firstly thank you so much for such a clean explanation. Also, could you please come up with the following:
1. Testing private methods inside a component/service
2. How to access a private variable inside a method
3. Testing nested subscription
Thanks in advance

[iqwebserve]

Great video. You obviously used a high res monitor, please don't forget to increase font size for your viewers. Still very useful lesson. Thanks

[sen.alexandru]

Congrats for the quality content! Would be nice to also map each section of the video with a description so we can jump to specific topics.

[g-luu]

Nice one. Earned yourself a subscriber. Can't wait for the promises video.

[makwasicrispus]

Great video. learnt a couple of tricks and it was really helpful. Thanks alot

[ricardogellman]

resolution could be lower, but its great

[XINTSUAI]

It's difficult to understand what you are doing with such a small font.

[oudinia]

Thanks a lot! Great hands on introduction to Jest in Angular.