JavaScript Testing - Mocking Async Code
Vložit
- čas přidán 16. 10. 2018
- 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! - Věda a technologie
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!
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)
Every time I see your technical videos, all my doubts,confusions vanishes ....amazing work😍😍
Honestly the best explanation I could find on mocking. Thank you :)
You are such a gifted teacher. So focused. Thank you
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
best explanation about Mocking on the internet, thanks! 😀
Best explanation of jest mocking so far. Thanks
Awesome to read that Ossie, thanks a lot!
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!
great video really helpful, everything is explained as clear as water
Excellent video.
I've been using mocha/chia/nyc for years.
I think i'll try jest.
A very nice tutorial on javascript testing. Thank you.
This is the best explanation ever
Hahaha, Max always pops up when searching for something I need
:D
Hey Max, you should add Unit Test into your Udemy Angular 2+ Courses to make it even more great. Love your works btw.
Excelente explicação. Thank you!
I would really love a full course on testing with jest, enzyme and react testing library
That was crystal clear, thanks
Cool tests with Jest
Just subscribed after watching this video. Thanks so much!
Thank you for your support, great to have you on board!
Great video mate !!!! Thanks
thank you for the tutorial. Please make more videos in testing.
Good explanation! Thanks.
Really excellent instruction! I bought your React course on Udemy. You are a very good teacher Thank You!
Awesome, thank you!
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 :)
Max you are the best!
Thank you for this video.
Max, thank you so much!!!
Thanks Max!
Thanks for the help
my friend,just perfect.................
very, again, very good!
Great metaphore in the cover XD
Great video!
10/10 explanation
Thank you!!
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?
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 a lot!
Hi, How can I mock an api request time out or rejection for rate limiting so I can build back off functions?
Great! Thanks!
really cool! thanks!
Happy to read that you like it, thank you!
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;
};
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
OMG! Max you are awesome!
YOU are awesome Ramon, thank you very much for your comment!
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
thanks man!
Great video, though Concepts are more advanced than the previous video
can you mock the browser fetch api using this same method?
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.
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 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.
how to start and open in chrome this code what is in github??
Plz help with react redux pagination ... there is nothing available on this ...
Awesome!!!!!!!
I like the funny accent lol
The subject of vidéo is very pertinent thank u
Why no import the mock axios.js while http is imported?
beautiful
awesome
You saved my life!
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!
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.
Hi Max can you please make a tutorial on Angular universal and Angular playground. please .............................
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.
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.
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...
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
Can you plz help replace componentWillReceiveProps with componentWillReceiveProps ... there is pretty much no help on this anywhere ...
React is dumb
what about Moxios ?
How to cover onkeydown property
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,
});
}
});
})
}
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.
let me guess moxios?
It just slow down the development
app.js is not the same I got from github. Schade
Thank you!!