JavaScript Testing - Mocking Async Code
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- 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/aca...
Finished Code: github.com/aca...
Learn JavaScript from scratch: acad.link/js
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!
![🎤 จับฉลากร้องเพลง x P’ #XXSIVK [EP.1] (2/2) เพื่อนจับได้คำไหน..ต้องร้องคำนั้น เริ่ม! 💓🎶 #MXFRUIT](http://i.ytimg.com/vi/1bJvMJXmeS4/mqdefault.jpg)
Testing is something you don't quite often find in most tutorials. Thanks for tackling this all important topic.
I also think it's an important topic, happy to read that you liked the video Ibrahim!
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!
Every time I see your technical videos, all my doubts,confusions vanishes ....amazing work😍😍
Hey Max! This is Ashutosh Tiwari ! Thanks for this ❤️ As always you are great !
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.
"git switch async-code" should help you out
Honestly the best explanation I could find on mocking. Thank you :)
You are such a gifted teacher. So focused. Thank you
I would really love a full course on testing with jest, enzyme and react testing library
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)
Hey Max, you should add Unit Test into your Udemy Angular 2+ Courses to make it even more great. Love your works btw.
Really excellent instruction! I bought your React course on Udemy. You are a very good teacher Thank You!
Awesome, thank you!
Best explanation of jest mocking so far. Thanks
Awesome to read that Ossie, thanks a lot!
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!
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.
Cool tests with Jest
Excellent video.
I've been using mocha/chia/nyc for years.
I think i'll try jest.
Great video, though Concepts are more advanced than the previous video
my friend,just perfect.................
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?
Max, you nailed the technical stuff, how about a video or even better a series on being a freelance developer?
We'll mainly stick to the technical stuff, but we also consider releasing some none technical videos. So we'll see :)
best explanation about Mocking on the internet, thanks! 😀
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??
Hahaha, Max always pops up when searching for something I need
:D
A very nice tutorial on javascript testing. Thank you.
10/10 explanation
Great video mate !!!! Thanks
This is the best explanation ever
Thank you for this video.
Great metaphore in the cover XD
Super helpful, thanks Max!
Wow. Jest is just amazing. Thank you Max
Happy to read that you like the video, thank you for your comment!
how can we stub this?
// some module, "sum.js" that's "required" throughout the application
module.exports = function(a, b) {
return a + b;
};
thank you for the tutorial. Please make more videos in testing.
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
Max, thank you so much!!!
great video really helpful, everything is explained as clear as water
Just subscribed after watching this video. Thanks so much!
Thank you for your support, great to have you on board!
That was crystal clear, thanks
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.
Thanks for the help
Hi, How can I mock an api request time out or rejection for rate limiting so I can build back off functions?
Good explanation! Thanks.
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
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.
Great! Thanks!
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?
Great video!
how to start and open in chrome this code what is in github??
Excelente explicação. Thank you!
How to cover onkeydown property
Why no import the mock axios.js while http is imported?
can you mock the browser fetch api using this same method?
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.
Thanks Max!
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 !
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.
Max you are the best!
OMG! Max you are awesome!
YOU are awesome Ramon, thank you very much for your comment!
Plz help with react redux pagination ... there is nothing available on this ...
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 🤔
Ah! We need to use .then onto the fetchData function. that's why.
Thanks for this interesting series!
beautiful
very, again, very good!
Thank you!!
I like the funny accent lol
The subject of vidéo is very pertinent thank u
Hi Max can you please make a tutorial on Angular universal and Angular playground. please .............................
really cool! thanks!
Happy to read that you like it, thank you!
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 .
In the video I actually share my personal opinion Ashish, so I think I can't help you here, sorry :/
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
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.
In the video description, data science is mentioned, am I missing something ?
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.
Thanks a lot!
Can you plz help replace componentWillReceiveProps with componentWillReceiveProps ... there is pretty much no help on this anywhere ...
React is dumb
thanks man!
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...
awesome
what about Moxios ?
Awesome!!!!!!!
You saved my life!
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,
});
}
});
})
}
let me guess moxios?
It just slow down the development
app.js is not the same I got from github. Schade
Thank you!!