JavaScript Testing Introduction Tutorial - Unit Tests, Integration Tests & e2e Tests
ฝัง
- เผยแพร่เมื่อ 4 ก.ย. 2024
- JavaScript testing - i.e. unit tests, integration tests and e2e (UI) tests - can be intimidating. It shouldn't be! This video guides you through all the basics (including the "Why"?) of JavaScript testing. Master JavaScript testing now!
Master JavaScript: acad.link/js
Master ES6: acad.link/es6
----------
Read the full article that belongs to the video: academind.com/...
Starting source code: github.com/aca...
Source code after unit test: github.com/aca...
Source code after integration test: github.com/aca...
Source code after e2e test: github.com/aca...
Want to learn something totally different? Check out all other courses: academind.com/...
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
![[UNCUT] "เสรีพิศุทธ์" แฉยับ! งัดหลักฐานใหม่ชั้น 14 ได้นอนคุกสมใจแน่!! I คนดังนั่งเคลียร์ I 2 ก.ย.67](http://i.ytimg.com/vi/O1SSg4p9Izs/mqdefault.jpg)
![[กูเพิ่งซื้อมึงปิดหนี] 20 นาที ผมรีวิวเกมที่แย่ที่สุดในโลก CONCORD](http://i.ytimg.com/vi/XhC-3q3Ii7I/mqdefault.jpg)
11:50 - unit testing
23:10 - integration testing
29:23 - e2e
my man
ty weeb :D
thank you
The Bikini Bottom thanks you
Thank you :D
This is insanely useful. I regret not learning how to do testing 1.5 years ago. It would have saved me hours, if not days worth of time in testing manually
Scratch that, think about the time you would've saved while debugging errors on the e2e layer!
Unit testing forces you to separate your code into small chunks and test everything as soon as possible. Crazy useful skill!!
For someone who wants to take a look at the overview before dive in the specific part. I really appreciate the way you write your description: Extremely useful
Two years and 180,000+ views later, but on the off chance you see this.. THANK YOU. I have never seen a tutorial so well put together easy to understand. As a self taught developer over the last 9 months I cannot believe I have never seen your videos before. Please keep it up!!!
You're awesome you always give us what we want. Thanks for sharing your knowledge Max
Thank you very much for your support Ibrahima :)
BLM
By far the best (free) intro to testing video I've seen on the web. Thank you Max!
Awesome to read that Jin, thanks a lot for your great feedback!
Best unit testing from the ground up I've seen so far on all the world wide interwebs! Been paying for tutorials, searching high and low... Thanks for putting this together beginning with testing a most BASIC function that returns only a string concatenated value. This is what I've been looking for!!!
The one thing I don't see anyone doing (neither professionally nor in any demonstration) is to combine debugging with unit testing functions. My biggest benefit to TDD is to setup the expectation prior to writing the function and write the function to satisfy that. That way, I am testing mostly functions only and, by the time it's completed to satisfaction, the test enforces the outputs from the function. The test is done and the function is done. I do not understand why more developers do not work this way.
For anyone having issues with the end to end test not completing the automated test at around the 35:00 minute part it is simply because Jest is timing out and you just need to refer to 38:29 to fix that.
A genius instructor in the world. Now I have no fear in JavaScript. U made my development journey so simple and interesting. Thanks a lot from bottom of heart.
Great vid, thank you Max. I need to disagree with one thing tho. 32:00 - "async/await does it (then and catch) for you" async/await doesn't catch errors. You would need to additionally use `try {} catch (e) {}` and await within try block in order to catch errors from the promise.
I usually don't leave comments but this is really high quality. Thanks a lot!
It's one of the best quick and comprehensive guides around the different levels of test automation.
Well done mate, and please guide me if you have any similar videos in your channel that I missed.
Really high quality video - both the content and the form (some graphs when needed, some code when needed). Thanks!
So happy to read that, thank you Jack!
I can't find a better introduction course to testing. I've been struggling for far to assimilate testing. I'm currently taking a course on the topic but I still can't get the whole thing. With this video, everything I previously learned has become clearer, and now I can make a clear way to progress and fully conquer testing. Thank you so much @Maximilian
It is thanks to this video (and to a test I wrote for validateInput) that I can say, the "+text === NaN" check in the validateInput function always returns false. So if I send "isNumber: true" to the function, and as text input "12e", it would consider it as a valid age. Using "isNaN(+text)" solves that. Thank you, Max, for such a great introduction to js testing!
Green is a beautiful color! Thanks Max for the tutorial.
This is so coherent and well structured for providing an introduction. Thanks for the awesome video.
i wanna mention something
there is a long while since i watched a video in your channel and wanna say that you get so much better at explaining and you feel much more confident and experienced
keep the good work up
Thanks for this fruitful content
Thank You, I learned so much. It seems like JS testing is now one of the must haves when applying for jobs these days.
Thanks a lot, happy to read that the video was helpful!
Max, i'm a student of your Udemy courses. This video was great, because i didn't understand how integration tests and e2e tests works. You're always able to explain the things in a simple way. Thank you Academind.
Thanks so much for your wonderful feedback Rafael, happy to read that you like my explanations!
Finally, I learned JS Testing
Same here! The book wasn't enough thus this video is a savior!!! Thanks a lot, made it breif and clear!
Max, I guess it would be a great idea to create a full course about testing, maybe using TDD, some React testing and so on. This is a course I wanna see from you so much and I hope, that one day it will become true ;)
This video will still be relevant in 2030! Thanks you very much.
Thank you Max! Nicely organized video. I watched it several times :)
Your explanation with specific code is very easy to understand.
I appreciate it.
That was a GREAT introduction to testing man. I love how you explain things in theory and using slides before the actual practice. It gives us a better context on what we're doing. Thanks :)
Your videos are great! Very often use them to learn/refresh/structure information. Thank you very much for your work!
Happy to read that Ekaterina, thank you!
This video is from 5 years ago, but still very useful, and I think it still be for some years to come.
Great thanks Max, it helps me understand the javaScript testing better than just reading a document. Now I will go and learn more on using Mocha.
I'm really impressed each time I'm looking for new things or concept to understand and explore because I'll always find you either on udemy or youtube video answering questions I've been asking myself about some vocabulary point I did get quite well.
For couples of weeks, I've been trying to understand :
- testing,
- thinking about when and where to add typescript and what to test ( as working with jest we should only assert output instead of type, which typescript should do instead I reckon )
- that there were few kinds of testing,
- that actually I was not grasping the difference between unit testing, functional testing, integration testing and where was E2E in all that ( ends up with E2E was actually functional testing ( and not hard-related to test one function ), unit test was actually this kind of test where you actually test one function ) , then got lost with integration test.
Your explanation was confirming some though and also made me understand better what was integration tests : testing function with other dependencies ( == other functions ).
Can't wait to go deeper and make it to the tests automation.
Thanks again for your explanation
Max, can't thank you enough for your awesome videos! I learn best by clear explanation and example--your excellent teach style does both. Thank you!
This is a brilliant video about testing and is definitely a must for devs trying to learn to test their codes for the first time. I am super glad there is a video this clear that does not expose unnecessary complexity of other modules are not required to do testing. Its focus on testing and its conciseness made me understood the three types of testing in only one watch. Sincerely, thank you.
Great Max, maybe the best teacher existing about programming languages!
you made testing look so damn easy...i love it and want dive deep into testing !!...thank you very much sir
amazing video !!!!!!!!!!!!
Things become so clear after having your videos. Thank you Max
Your channel has helped me tremendously!
Just awesome to read that Elem, thanks a lot for your comment!
I would say for every developer:
"The most valuable courses you can see here on Academind"
Thanks a lot Max :)
Wow, that is awesome to read Mostafa, thanks so much!
As usual you are the most reliable instructor to depend on. I am enjoying your videos on Udemy. Waiting for many more videos on this topic that will help me in pure TDD and inculcate TDD approach in true sense. Thanks Max 🙂
I just like this dude. He's always happy. Although it pretty normal to express some happiness when making TH-cam videos, however, there's something different about his. Wish I could meet him one day.
More power to your elbow.
Thanks a lot Alexeis, I would indeed say that I'm a quite happy person, cool to read that is also visible in the videos!
Great examples. Please more about testing.
This is great stuff, thanks a lot! Would love to see other testing-related content from you Max :)
Thanks a lot Dmitry, I might indeed dive deeper into testing in future videos.
That's an amazing crash course about testing in JavaScript, it's so complete, I really enjoyed watching it, I've learned lots of things about testing thanks to Max, So Thank you so much, Max for this awesome crash course, You're the best💙🥰🙏🌹
Thanks you so much.Make a full tutorial on that.thanx Max.
I might indeed create more content about testing in the future, but we'll see. Thank you for your comment Sourish!
If
@@academind Please continue the series.....
udemy :)
Best video on testing I've seen so far, clear and detailed. thank you so much for sharing!
I'm afraid to watch this video for fear I'll have to refactor a years worth of work.
Same here
start with a single e2e test that actually helps you skip manual test
lol
you can implement the tests for new functions as you keep coding and them make the changes over time when you make updates to old functions
3 years here, haha. Like someone else pointed out: The Boy Scout Principle works wonders. Leave everything better than you found it (i.e. everywhere you visit, you create tests for it)
You are a game changer. Keep up the good work! subscribed :)
Thanks for the sub!
@Academind @Max this is a fantastic video, thank you for making it and sharing it with all of us! Can you please make additional videos going into more detail? Specifically when you refactored your code for the integration test, that is where most people have trouble. You quickly ran through an example where you refactored and created a testable function, that is where most folks are struggling! Can you please consider going into more depth and taking your time as you expertly refactor code making it testable? In fact, I humbly request that you make three additional videos based on this video, you had three topics that you could expand on and help all of us understand in more detail, first was unit tests, second was integration tests and third was end-to-end tests... Each of these could be a more in-depth video with various working examples, I emphasize the word working, it is hard to find good examples clearly explained as you do. As always, thank you for making the internet a better place and of course I am subscribed with notifications turned on and thumbs up!
UPDATE: I had to come back and update my comment after watching this video a second time, I feel compelled to add that this is possibly the best testing video for JavaScript on the internet! I must again reiterate and respectfully request that that you make additional videos on this topic and go into even more depth please Max!
Also, watching you use puppeteer makes me think it could be used for automation tasks in addition to testing, so many possibilities here, my head is spinning! Fantastic video! I wish I could give this video a thousand thumbs up! I will be sharing this with many co-workers and friends!
best video i have ever seen that shows the differences between those types of testing
21:22 - The first test success indicates a "false negative", not a "false positive". False positive means that the test is failing but is not really a valid failure (for e.g. random failures). In your example, it is a false negative - test is passing, even though there's a problem with the code.
Loved that you used puppeteer too! Cypress is a nice tool to use very similarly as well. The only thing I saw missing was integration tests for api and integrations. Would love to see that!
Really I was wondering about how testing done and then I got this video. Thanks Sir.
This video is awesome in explaining how to write and run test
I think that this is the best instructive video I have ever watched.
Just loved it, best tutorials all over the web man
Straight into and out of the point. Thanks.
Thank god it arrived!
This video is awesome! It perfectly shows the three most common types of testing. Thank you very much Max for sharing this!!
Happy to read that the video was helpful for you, thanks a lot for your comment!
TU (Thumbs Up, Thank You, THE Ultimate) !
Remark to readers: This of course is only an introduction about testing and not about TEST DRIVEN development, perhaps you can add a remark at the end of the vid saying that.
An excellent walk through from concept to uses example. It helped me to get familiar with testing.
Thanks Max, you're really the king of teaching. Thank you for so much value in your videos. Please keep it up!
In React case, what should I use?
For Unit and Integration Tests:
- Jest + (enzyme or react-testing-library)
For e2e tests:
- Puppeteer or Cypress?
Great video, thanks for sharing!
Yes that's sound about right. You can't test React Hooks using enzyme which is why react-testing-library is getting popular, and it's actually pretty good.
Excellent video as usual, thank you! Most people only show unit testing and I'm like, "Yeah, but..."
i love you max, you're great man, i've gor your react, react native, nodejs and mern courses on udemy, and i never wanted to learn about tests but now im learning and youre great man
Thank you, it was another awesome tutorial :)
When I following your steps I stucked with installing puppeteer on my machine because of my company
SSL Certificate restriction, I'm using windows 10. Little bit searching (Soon my company will make me DevOps lol) I found solution like "npm config set puppeteer_skip_chromium_download true" then "npm install puppeteer --unsafe-perm=true". After that I used const browser = await puppeteer.launch({executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'});
Maybe it can help those who have the same problem as me.
*Note:* npm install puppeteer *--unsafe-perm=true* in this line, I'm not sure if it's necessary and I don't know any safety issue in that.
On 27:30 you can just add this. before validateInput function call, and it should work correctly
Fantastic video still in 2022!
Very nice and clear. Makes want to write more unit tests. Thank you!
Happy to read that you like it, thank you for your comment!
That was an amazing video thank you so much. I loved how to showed and explained how puppeteer was working. Thank you.
Glad it helped!
This channel should feature on Netflix.
Another amazing tut by you. Danke dir vielmals, Max. :)
Surely ..he is a great teacher
Awesome video again.... thanks a lot for this video..... and also a small request.... for making a video on a scalable node js backend that can handle many requests at the same time and have a better response time.
Thanks for the nice explanation , I am back end developer but you inspire me to learn front end technology. Great :)
Happy to read that Sagar, thanks a lot for your comment!
Great tutorial, with Some good real life examples. Please continue to react and react native testing...
Thanks a lot Ben, I might also have a look at React testing in the future.
I am surprised that this video is not 30h+. Coming from Udemy and his courses this is a surprise! xD Just kidding, thank you for this video.
Cool tutorial! I just wanted to learn testing and found your tuts.
Great to read that Rinat, thanks a lot!
Wish I could like this vid 10 times
2021: Academind still Acing with these examples :D
Watching two years later... And awesome tutorial nowadays hahaha
Thank again, Max! It would be great if you can create more tutorials for using Jest and Puppeteer.
Thanks a lot, I actually might create more videos about testing in the future :)
I prefer to start with a failing test, because sometimes tests will pass even without any code (e.g. async code).
Thanks. It is a very good and simple way of diving to the testing.
Thanks a lot for your great feedback Emre!
I like how you explain the Unit testing, nice video!
Now I am wondering why did I chose Web Development lol too many stacks, too many frameworks, too many packs, too many unit testing... Now we don't have time to code because we need to setup environments and test, test, test... Its like 50% coding time :-P
Hi Max , requesting you to please make a series on unit testing on Jasmine and Karma or Jest and Enzyme. It would also be highest selling course sure .
Very clearly explained, thank you
Great video .. very well explained.. thank you Max!
Nice intro Max!
It was a very quick and understandable explanation! Anyway, now Mocha has supported assertion library too right? Correct me if I'm wrong please.
Max, thanks for this amazing video, congratulations !
Bitte, bitte : make a complete and in-depth course about React Testing Library where you test real-life components (not just the odd form and button that everyone tests in tutorials...). I'd definitely buy that. Danke
Brilliant video, thank you Max!
Thanks for explanation and examples, it actual even now
puppeteer seems interesting for end to end tests
Wow! Great Job!! Thank you very much for this video. Looking forward to the next one
Thanks a lot for your awesome feedback Eduardo, this really means a lot to me!
I suppose Puppeteer can (and should) be used to test UI generated by popular front-end technologies like React, Vue & Angular - In fact, most web UI are generated by those instead of direct DOM manipulation at the back-end.
Rest assured I get you chose this way for creating easier and faster an end dummy object which you can test on, which is the purpose of the video.
Thanks!
If the Jest autocomplete is not coming up in VS Code, you can type 'npm i --save-dev @types/jest' and restart VS Code.
Incredibly well explained. Thanks a ton!
So happy to read that Bartek, thank you!
Puppeteer is no longer maintained and you get an outdated version of Chrome. Testing with or for other browsers gets more complex as you may need to install ever more stuff like Selenium and WebDrivers for each browser.
This is the best testing video ever, you are a sensei
Thank you very very much Carlos, this honestly means a lot to me!
Another excellent video, as always. Thanks, Max!
Thanks a lot for your great feedback Davinir!