JavaScript Testing - Mocking Async Code

Рет қаралды 145,180

5 жыл бұрын

Testing async JavaScript code or testing JS dependencies in general can be difficult. But "mocking" is a technique that can easily be implemented with Jest to make JavaScript testing a breeze again.
----------
Starting Code: github.com/academind/js-testi...
Finished Code: github.com/academind/js-testi...
Learn JavaScript from scratch: acad.link/js
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• 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!

Пікірлер: 101

@ultrasamad 5 жыл бұрын

Testing is something you don't quite often find in most tutorials. Thanks for tackling this all important topic.

@academind 5 жыл бұрын

I also think it's an important topic, happy to read that you liked the video Ibrahim!

@jaycesullivan8512 2 жыл бұрын

You prolly dont give a damn but does someone know of a trick to get back into an Instagram account?? I was stupid lost the login password. I love any tricks you can give me!

@andriantsygulev7806 5 жыл бұрын

Hi, Max Thank you for this video. This is the best explanation of moking with jest, that I found! I was not familiar with using moke functions, before watching this video, but now I can use this great thing for testing methods in my project)

@gabrielprrd 3 жыл бұрын

Honestly the best explanation I could find on mocking. Thank you :)

@riyazghati6615 5 жыл бұрын

Every time I see your technical videos, all my doubts,confusions vanishes ....amazing work😍😍

@unutilized 3 жыл бұрын

You are such a gifted teacher. So focused. Thank you

@sandeepamarnath2272 2 жыл бұрын

As always, you're the best tutor! Note: Max, when I open the link to the github to clone the code I got the previous video's code and not the one you teach here about mock. Not sure if it's only for me but please take a look so it will help others to easily code along. Again, thanks a lot as usual for your wonderful tutorial.

@MrMacjo22 Жыл бұрын

"git switch async-code" should help you out

@BreakingGame 4 жыл бұрын

Excelente explicação. Thank you!

@sbacon92 3 жыл бұрын

Excellent video. I've been using mocha/chia/nyc for years. I think i'll try jest.

@mrpiggy9793 5 жыл бұрын

great video really helpful, everything is explained as clear as water

@peeeeb 3 жыл бұрын

Super helpful, thanks Max!

@dariogabalec13 3 жыл бұрын

best explanation about Mocking on the internet, thanks! 😀

@inclinedscorpio 3 жыл бұрын

Hey Max! This is Ashutosh Tiwari ! Thanks for this ❤️ As always you are great !

@twinstars3428 3 жыл бұрын

A very nice tutorial on javascript testing. Thank you.

@kwekukilu2196 4 жыл бұрын

This is the best explanation ever

@StarContract 3 жыл бұрын

That was crystal clear, thanks

@rodrigomarsan1143 2 жыл бұрын

I would really love a full course on testing with jest, enzyme and react testing library

@cempesket7694 5 жыл бұрын

Wow. Jest is just amazing. Thank you Max

@academind 5 жыл бұрын

Happy to read that you like the video, thank you for your comment!

@HuyLe-vv7go 5 жыл бұрын

Hey Max, you should add Unit Test into your Udemy Angular 2+ Courses to make it even more great. Love your works btw.

@kisanpakhreen 3 жыл бұрын

thank you for the tutorial. Please make more videos in testing.

@AF-it4ib 3 жыл бұрын

Great video mate !!!! Thanks

@alexpro5670 2 жыл бұрын

Cool tests with Jest

@akasharojee8569 3 жыл бұрын

Good explanation! Thanks.

@ossie500 4 жыл бұрын

Best explanation of jest mocking so far. Thanks

@academind 4 жыл бұрын

Awesome to read that Ossie, thanks a lot!

@driden1987 4 жыл бұрын

Hahaha, Max always pops up when searching for something I need

@academind 4 жыл бұрын

@jelenatrifkovic5567 Жыл бұрын

Thank you for this video.

@duinho 5 жыл бұрын

Just subscribed after watching this video. Thanks so much!

@academind 5 жыл бұрын

Thank you for your support, great to have you on board!

@rajgohil8610 2 жыл бұрын

Thanks for the help

@davidoliveira242 3 жыл бұрын

Thanks Max!

@saek7593 Жыл бұрын

Max, thank you so much!!!

@LifeIsGood1992 5 жыл бұрын

Thank you!!

@ippenshindemiru8023 Жыл бұрын

my friend,just perfect.................

@EleandroReis 4 жыл бұрын

Max you are the best!

@cvanputt 4 жыл бұрын

Really excellent instruction! I bought your React course on Udemy. You are a very good teacher Thank You!

@academind 4 жыл бұрын

Awesome, thank you!

@maksym7279 Жыл бұрын

Great! Thanks!

@Bacisful 4 жыл бұрын

Thanks a lot!

@maurobagnoli3415 3 жыл бұрын

Great metaphore in the cover XD

@antonijakasum313 2 жыл бұрын

Great video!

@snake1625b 3 жыл бұрын

10/10 explanation

@superknife0512 5 жыл бұрын

Hi Max and Academind team, I see they say about some things like ESlint, Jshint ,... but actually what's that and why we need to use it in our project. Can you make a Video to explain about one of them and how to use it.

@emarcelino3 4 жыл бұрын

very, again, very good!

@ivanaleksandrov7157 5 жыл бұрын

Max, you nailed the technical stuff, how about a video or even better a series on being a freelance developer?

@academind 5 жыл бұрын

We'll mainly stick to the technical stuff, but we also consider releasing some none technical videos. So we'll see :)

@dataninjanl1263 3 жыл бұрын

Does this mean that when you change the fetchdata function, you also have to change it’s mock or are there any tools that can help with this?

@alexandrovcharenko9769 5 жыл бұрын

really cool! thanks!

@academind 5 жыл бұрын

Happy to read that you like it, thank you!

@fotoflo 3 жыл бұрын

Hi, How can I mock an api request time out or rejection for rate limiting so I can build back off functions?

@daviaugusto4828 3 жыл бұрын

thanks man!

@EricOnYouTube 4 жыл бұрын

Max, I am trying to be good and start writing tests for my code. But I have a problem.... since all tests should be an island, what I do in one test should not influence another. The problem is that my variable, for example, that holds a list of all the users who have joined the game will hold data from a previous test. How do I deal with variables like that? Thanks.

@dominiktargosz3094 5 жыл бұрын

But what if I don't know what will be the response from the API? For example when I fetch new random word with every request to the server

@JeremyMoritz1 3 жыл бұрын

Max, the starting code you linked in the description is actually the code from the PREVIOUS video. I cannot seem to find anywhere the starting code for this video. Can you please include it? Thanks for another great tutorial!

@smartypantscoder6912 3 жыл бұрын

It's there. You need to use command 'git checkout async-code' in the terminal. You will need the git installed for that. This one repo contains all codes from all different project. But they are in different branches. after checking out async-code branch, you will have to enter 'git checkout 87dbd' because the data is in that commit.

@jadetaboada447 3 жыл бұрын

how can we stub this? // some module, "sum.js" that's "required" throughout the application module.exports = function(a, b) { return a + b; };

@alexchiu 4 жыл бұрын

can you mock the browser fetch api using this same method?

@dmitrik5566 2 жыл бұрын

Is this possible to do in angular with is configured to use jest? Is it possible to override a function manually like in the video?

@nenadtrajkovic2715 3 жыл бұрын

Hi, how can we use map() function inside loadTitle() if response.data from fetchData() return array of objects? How we mock that, I get error map is not a function. Thank You

@ramonportela7048 5 жыл бұрын

OMG! Max you are awesome!

@academind 5 жыл бұрын

YOU are awesome Ramon, thank you very much for your comment!

@damoose5788 5 жыл бұрын

Plz help with react redux pagination ... there is nothing available on this ...

@khalidelgazzar Жыл бұрын

Great video, though Concepts are more advanced than the previous video

@snillochemingson2830 Жыл бұрын

beautiful

@romanlisenko271 4 жыл бұрын

how to start and open in chrome this code what is in github??

@tripathi.mridul 3 жыл бұрын

Awesome!!!!!!!

@SithaSek 4 жыл бұрын

Why no import the mock axios.js while http is imported?

@jean-baptistelasselle4562 4 жыл бұрын

I like the funny accent lol The subject of vidéo is very pertinent thank u

@cryptoeric24 2 жыл бұрын

When I run my mocks with --coverage I do not get any coverage, but when I run my test without the mocks I get coverage. Does Jest not cover mocked code??

@safraz1400 3 жыл бұрын

awesome

@porco666 5 жыл бұрын

can you please make a serie teaching how to make some project, e.g. an api, using BDD? i would pay for that on udemy. BDD front end (vue, react) projects also is a rare content... i would pay fot that too...

@sourishdutta9600 5 жыл бұрын

Hi Max can you please make a tutorial on Angular universal and Angular playground. please .............................

@sebastianjung3168 5 жыл бұрын

Hey Max, could you also just return the object with the title property in the mock http.js instead of returning it as a resolved Promise or why does it have to be a resolved Promise 🤔

@sebastianjung3168 5 жыл бұрын

Ah! We need to use .then onto the fetchData function. that's why. Thanks for this interesting series!

@dakshsagar2839 5 жыл бұрын

In the video description, data science is mentioned, am I missing something ?

@academind 5 жыл бұрын

We do have some beginner's data science/business intelligence topics (for example about Power BI: academind.com/learn/power-bi). But at the moment the focus indeed is on web development.

@khalidahmada3906 5 жыл бұрын

what about Moxios ?

@Raamyy 4 жыл бұрын

I think there is a problem or something i don't understand. in 16:47 the test file says that we expect to get "DELECTUS..." ( all UPPER case). while in the __Mocks__ file in 16:48 we promise to return "delectus..." (all lower case) How are the test cases passing ? I think that they should fail. Thanks for the videos !

@adamtki 4 жыл бұрын

We're not testing the get method. We're testing the loadTitle component which uses our mocked get method and uppercases the returned value from get.

@TDAK1509 4 жыл бұрын

You saved my life!

@RohitKumar-yy8yh 3 жыл бұрын

How to cover onkeydown property

@ahmedmusawir 5 жыл бұрын

Can you plz help replace componentWillReceiveProps with componentWillReceiveProps ... there is pretty much no help on this anywhere ...

@LarsRyeJeppesen 4 жыл бұрын

React is dumb

@ashisharora9694 5 жыл бұрын

hello bro how ru . i need ur help , i want to learn only one in Angular , Vue and react . plz telme which is best in all . i saw ur video abt this topic. . i want ur personal opinion . if ur beginner then which will u select . plz tell me 1 .which one best in job n future .

@academind 5 жыл бұрын

In the video I actually share my personal opinion Ashish, so I think I can't help you here, sorry :/

@ashisharora9694 5 жыл бұрын

bro no need for any sorry . i already saw ur that video . i know u love React heheehhe , love u . god bless u . keep smiling

@kartamyshevk 5 жыл бұрын

Would be nice to mention that "done" should be executed in the end of async tests in order to have proper test results (just try to resolve Promise with unexpected value without calling "done"). Thanks for the video otherwise! Very useful.

@milesrostami1782 5 жыл бұрын

Hey max, what is the best way to test the setState callback using mocha and enzyme? onChangeHandler(e) { const { state } = this.props; this.setState({ search: e.target.value }, () => { const { search } = this.state; autocomplete(search).then((suggestions) => { if (suggestions.length > 0) { this.setState({ suggestions, }); } }); }) }

@tkdevlop 5 жыл бұрын

let me guess moxios?

@marioeldin9315 2 жыл бұрын

How convenient would it be to tell my engineering manager - “hey I just decided to take a few functions in this micro service and slap em in a util file because Jest was busting balls”. Yaaaa… not likely. It would of been good to see the work needed to get a passing test with your application as is because that luxury of moving around functions for testing will not pass any PR.