If anyone wants to clarify that why 3 === 3 is true and {} === {} is false, it is because in case of 3 === 3 is compared by value whereas objects are compared by hashcode(a location of the memory where the object exists). When you are comparing {} === {} then these are two different object at two different memory location which result in two different hashcode for comparison and thus return false. I hope I have done a good job in clarifying it 😅
For anyone who struggled to understand how the mock.calls worked, as I did, too, initially - here is what [x] [y] mean: x represents the index of the call made (i.e. 0 = first call, 1 = second call, 2 = third call etc) and y represents the index of the first argument we find on that call (i.e. always 0 as we only have one argument). So, taking our example in the tutorial 'expect(mockCallback.mock.calls[1][0]).toBe(1)' - [1] represents the second call and [0] first argument, which in this case is 1. Hope this helps to clarify and keep up the good work studying! Thanks Laith Academy!
around 58:49 if you don't understand this, console.log it. and add some values to forEach(['zero', 1, 'spread'], mockCalledBack); for clarity. For Example: console.log(mockCalledBack.mock.calls[0][0]) will return zero so it returns the string zero forEach(['zero', 1, 'spread'], mockCalledBack); If you run it again with console.log(mockCalledBack.mock.calls[0]) it will return [ ' zero ' ] a array with 1 element a string 'zero' So with the first notation you get the element inside the array. With the second notation you get a array with the element at your chosen index. For example: console.log(mockCalledBack.mock.calls[2][0]) returns a string spread console.log(mockCalledBack.mock.calls[2]) returns a array with 1 element at index 2 of the original array. so [ ' spread ' ] There for changing the second number to higher then 0 will return undefined because the array length is 1. And you access that first and only element with calls[indexOriginalArray][0] console.log(mockCalledBack.mock.calls[2][1]) returns undefined Testing: expect(mockCalledBack.mock.calls[2][0]).toMatch('spread'); Will pass because console.log(mockCalledBack.mock.calls[2][0]) returns a string spread Keep supporting channels like this, it makes all of us a better dev :)
Thanks Laith, liked the course! Would've preferred a few less matcher methods and a bit more advanced info though, like using Jest with ES modules or testing React.
I love your contest Laith! Been following your content when you had only few hundred subscribers : ) Do you have any plan to make web3 development tutorials in future?
Have you mock a prisma client before? I have trouble using it in my test, the mockResolvedValue I given to first test file is working, but the data i put there exists to the next test file. I have clearMock or resetMock but it is not working, :(. maybe can you do a video mocking prisma?
It's a bad practice and something to avoid when testing real endpoints. You should have a mock data, preferably using MSW package to mock your endpoints. Never test real endpoints.
Why is everyone on RUclips trying to teach the most basic elementary level shit? Meanwhile every job in the real world has 10+ years of code all piled into 1,000+ line long react components that use every known library to man, a giant clusterfuck of class based and functional based components, hundreds of thousands of objects stored in Redux, an entire other section of the UI using Angular 2, one small UI element in Vue.js, a whole other UI in Ember.js that has been deprecated, a holiday/promotional section using Knockout and jQuery and 3 working tests with 145 skipped tests. And were supposed to take his 1+2=3 test experiment into the real world?
There is an error on the jest home page at the beginning: it says: "Jest is a delightful javascript testing framework". It should be "Jest is shit and a nightmare".
Great tutorial on Jest!! A lot of this stuff I learnt on my own but over a much longer period. I came here because im having an issue with a spy and a mockImplementationOne() call. It just isn't replacing the implementation with the one being passed... no idea why.
I swear i've been searching for jest crash courses for 30mins now ! and then i get the notification ...
What a day !
If anyone wants to clarify that why 3 === 3 is true and {} === {} is false, it is because in case of 3 === 3 is compared by value whereas objects are compared by hashcode(a location of the memory where the object exists). When you are comparing {} === {} then these are two different object at two different memory location which result in two different hashcode for comparison and thus return false. I hope I have done a good job in clarifying it 😅
Yes
Thanks, buddy 🙏
I just subscribed, because I never knew there was such a great teacher like you teaching JEST on RUclips.
Terrific, the best tutorial I found on youtube about mocks.
For anyone who struggled to understand how the mock.calls worked, as I did, too, initially - here is what [x] [y] mean: x represents the index of the call made (i.e. 0 = first call, 1 = second call, 2 = third call etc) and y represents the index of the first argument we find on that call (i.e. always 0 as we only have one argument).
So, taking our example in the tutorial 'expect(mockCallback.mock.calls[1][0]).toBe(1)' - [1] represents the second call and [0] first argument, which in this case is 1. Hope this helps to clarify and keep up the good work studying!
Thanks Laith Academy!
He should have taken any other example to explain mocks, this is confusing
love your channel, I've recently found you but your channel has everything I was looking for with great quality, thanks a lot
Thanks for the quick and short crash course for Jest beginners!
around 58:49 if you don't understand this, console.log it. and add some values to forEach(['zero', 1, 'spread'], mockCalledBack); for clarity.
For Example: console.log(mockCalledBack.mock.calls[0][0]) will return zero so it returns the string zero
forEach(['zero', 1, 'spread'], mockCalledBack);
If you run it again with console.log(mockCalledBack.mock.calls[0]) it will return [ ' zero ' ] a array with 1 element a string 'zero'
So with the first notation you get the element inside the array.
With the second notation you get a array with the element at your chosen index. For example:
console.log(mockCalledBack.mock.calls[2][0]) returns a string spread
console.log(mockCalledBack.mock.calls[2]) returns a array with 1 element at index 2 of the original array. so [ ' spread ' ]
There for changing the second number to higher then 0 will return undefined because the array length is 1.
And you access that first and only element with calls[indexOriginalArray][0]
console.log(mockCalledBack.mock.calls[2][1]) returns undefined
Testing:
expect(mockCalledBack.mock.calls[2][0]).toMatch('spread');
Will pass because
console.log(mockCalledBack.mock.calls[2][0]) returns a string spread
Keep supporting channels like this, it makes all of us a better dev :)
You didn't once fail to teach me any concept. Perfect teaching skills you have! Great explanation once again.
Best Explanation Ever for Jest, Just Incredible
Laith, you do deserve a 1M Subs for sure!
Thanks for the content.
Exactly the crash course I wanted!! Thanks Laith.
Great course, thanks for including mocks and not just the simple pure function stuff.
I have to say, you have the best quality tutorials out there!
for toBeCloseTo() assertion you can see the error not passed test, it show the limit (expected difference is 0.005)
Спасибо за новое видео. Уже давно слежу за вашим каналом, нашла много полезного для себя.
Very cool, thanks! I am starting to learn jest. Your course has been very helpful!
Thanks for providing Jest & React testing Library courses 🙏
wow you create the video in one shot, that is amazing
Came here from Net Ninja!
New Subscriber!
Thanks Laith, liked the course! Would've preferred a few less matcher methods and a bit more advanced info though, like using Jest with ES modules or testing React.
Beautiful video, crisp, to the point and nice explanation!
This channel is incredible, your teaching skill is great. Thank you, I appreciate what you're doing on this channel.
Not sure if mentioned but I believe a mocked module/function must be included/required in the test code.
Amazing video. Many thanks for mocking example with axios.
Thank you so much. since long I was not able to get understanding of mocking which you explained practically in good way.. thanks and keep on.
Such a nice tutorial, you're amazing. Thank you!❤❤❤
Real nice tutorial L. Thanks for your hard work. 🙂
Just a great channel , nothing to say else
Thank you .
The mocks part in the tutorial needs to be demystified more.
Nice! Especially thanks for mocking example with axios
Wow 👍🏼 beautiful. Amazing, I like your channel so much, 👍🏼❤️🎉🙏
You are the GOAT thanks a lot!
I love your contest Laith! Been following your content when you had only few hundred subscribers : ) Do you have any plan to make web3 development tutorials in future?
Great stuff, thanks for this!
Very helpful video! Thank you!
Nice course, very informative I have learned a lot.
Thank You ❤️
could you do a small project using context api + http requests? with your explanation it would be awesome!
Thanks. Wish you went more into mocking with classes and stuff.. but I get it now. ❤
Laith, very good tutorial on Jest. Do you have any tutorial on JEST with LWC component to test field value on clicking submit button in the LWC.
Very good and helpful crash course👍👍👍
Have you mock a prisma client before? I have trouble using it in my test, the mockResolvedValue I given to first test file is working, but the data i put there exists to the next test file. I have clearMock or resetMock but it is not working, :(. maybe can you do a video mocking prisma?
Hey there, I have some exceptional news that will excite you!
Can you please tell me how to write unit test for a button click..
great lecture... keep it up
I see you're a fan of Traversy Media lol gotta practise that Boston accent to really stick the landing 😜
cool thing. nice explanation
Please a video for testing next.js with typescript
Really nice
Nice tutorial 👍
can i install jest globally in my laptop ?
Thanks Laith
Are you Brad? :)
thank you for this
Thank you sir
thank you
the course is really cool but the mocks part needed more explination and clarification
Nice course but I didn't get mocks
Can we get react crash course for beginners plz
You can find this on Brad Schiff's LearnWebCode youtube channel. He is a good instructor too.
please make on video React unit testing crash course
I have one on my channel:
ruclips.net/video/GLSSRtnNY0g/видео.html
and on Net Ninja channel:
ruclips.net/video/7dTTFW7yACQ/видео.html
It's a bad practice and something to avoid when testing real endpoints. You should have a mock data, preferably using MSW package to mock your endpoints. Never test real endpoints.
Why is everyone on RUclips trying to teach the most basic elementary level shit? Meanwhile every job in the real world has 10+ years of code all piled into 1,000+ line long react components that use every known library to man, a giant clusterfuck of class based and functional based components, hundreds of thousands of objects stored in Redux, an entire other section of the UI using Angular 2, one small UI element in Vue.js, a whole other UI in Ember.js that has been deprecated, a holiday/promotional section using Knockout and jQuery and 3 working tests with 145 skipped tests. And were supposed to take his 1+2=3 test experiment into the real world?
I feel you. Know any videos/courses better than this?
There is an error on the jest home page at the beginning:
it says: "Jest is a delightful javascript testing framework".
It should be "Jest is shit and a nightmare".
build a better testing framework then
Great tutorial on Jest!! A lot of this stuff I learnt on my own but over a much longer period. I came here because im having an issue with a spy and a mockImplementationOne() call. It just isn't replacing the implementation with the one being passed... no idea why.