JavaScript Testing - Mocking Async Code
Вставка
- Опубліковано 5 вер 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!
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😍😍
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
Hey Max! This is Ashutosh Tiwari ! Thanks for this ❤️ As always you are great !
Honestly the best explanation I could find on mocking. Thank you :)
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)
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
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.
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! 😀
my friend,just perfect.................
Great video mate !!!! Thanks
A very nice tutorial on javascript testing. Thank you.
Great video, though Concepts are more advanced than the previous video
10/10 explanation
Great metaphore in the cover XD
Wow. Jest is just amazing. Thank you Max
Happy to read that you like the video, thank you for your comment!
thank you for the tutorial. Please make more videos in testing.
This is the best explanation ever
Thank you for this video.
Super helpful, thanks Max!
Hahaha, Max always pops up when searching for something I need
:D
Good explanation! Thanks.
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
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?
how can we stub this?
// some module, "sum.js" that's "required" throughout the application
module.exports = function(a, b) {
return a + b;
};
Thanks for the help
great video really helpful, everything is explained as clear as water
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??
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
Excelente explicação. Thank you!
how to start and open in chrome this code what is in github??
Hi, How can I mock an api request time out or rejection for rate limiting so I can build back off functions?
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.
Max, thank you so much!!!
Great video!
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?
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.
Why no import the mock axios.js while http is imported?
Thanks Max!
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.
can you mock the browser fetch api using this same method?
How to cover onkeydown property
Plz help with react redux pagination ... there is nothing available on this ...
OMG! Max you are awesome!
YOU are awesome Ramon, thank you very much for your comment!
Max you are the best!
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!
Thank you!!
beautiful
very, again, very good!
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!
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!
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.
I like the funny accent lol
The subject of vidéo is very pertinent thank u
thanks man!
Can you plz help replace componentWillReceiveProps with componentWillReceiveProps ... there is pretty much no help on this anywhere ...
React is dumb
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.
what about Moxios ?
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
Awesome!!!!!!!
let me guess moxios?
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,
});
}
});
})
}
It just slow down the development
app.js is not the same I got from github. Schade
Thank you!!