This was extremely helpful as an overview of the strategy intended by TDD. The examples were specific and blended well with the conceptual understanding and the principles we want to explore in testing methodology. Following along, it's more helpful if you finish a thread of thought, and come back to any tangent AFTER the over-arching thread. In my experience, the diverging in the moment can easily confuse people. It's easier to make sense if we come back to it after the main idea. It seems useful to address potential questions in the moment, and may work for some people, bu by and large the majority of people don't learn well from that strategy. It's better to close cycles first and then revisit. It's harder on the instructor, but it is an easier way to repeat the overarching process while introducing the minutae. Otherwise, it causes the minutae to take greater importance in the flow than it should. Anyway, thanks for this. Very helpful.
been struggling with TDD for React for a while now. Lots of 'ah ha' moments here. Thank you. EDIT: TDD way more fun than second guessing yourself every step of the way :P
Thanks a lot for making this video. Most of the React tutorials don't show how to write tests and even fewer of them use TDD. Videos like yours are rare, thanks again!
I've been watching tons of Jest and Enzyme tutorial videos the last weeks and all i found is crap until today. But searching harder on RUclips I found this channel and this is, by far, the best, well explained and most complete video about Jest testing in RUclips. I'm now suscribed to your channel. Thank you very much.
I'm currently taking a Udemy Course where the instructor is going through Jest/Enzyme testing and the combination of this video with that course is honestly brilliant. I'm learning a lot! Thanks for creating this video! I also noticed that you were worried about the views you had prior to the views that came later. I hope that provided you with some insight to the value you're bringing to the table! This video is amazing! Don't worry about live viewers! Thanks so much!
Damn! Never realised that learning TDD could be this fun and interesting! Kudos to the Awesome explanation. If you ever make any udemy course,I will buy it!!
Thanks so much for making this video! I'm just new enough to React that I've just started TDD, and this lesson made me an instant fan. Do you intend on making more videos to elaborate on this concept? If not, what resources would you recommend that could efficiently show me how to implement testing on my next project to a professional extent?
I will be making more videos as time permits. As for more resources I highly recommend reading Extreme Programming explained 2nd edition by Kent Beck. There's also plenty of other RUclips video's on TDD although they typically are geared toward back end rather than front end. The cycle is still the same though for JS as it is in Java, C#, Python, Ruby, etc.
Interesting way of doing things ! Thank you for sharing this. But as Kent Beck said ( the author of TDD ), TDD is about testing business rules not implementation details ! I see that you're using Enzyme here ! Testing library has replaced Enzyme because in frontend we avoid testing implementation details to let the front-end flexible to change it very easily.
Hello sir! I'm following this video because I have a final interview this friday, and I'm trying to learn a litle bit more about testing. I'm having troubles to mock Hooks with functional components with React 18. Do you know what is the best dependency (or way) to do so? Thanks for this content, very usefull.
Good job buddy, good tutorial, easy to understand. Though I didnt understand one thing. When i ran "npm test" it passed all the tests but when i ran "npm test -- --coverage" to check the coverage it failed 6 out of 9 tests and only 3 tests passed. Also didnt understand why code coverage for PersonList is 50%. -------------------------------|-------------------|-----------------|----------------|---------------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | -------------------------------|-------------------|-----------------|----------------|---------------|-------------------| All files | 6.67 | 0 | 10.53 | 6.67 | | App.js | 100 | 100 | 100 | 100 | | PersonList.js | 50 | 0 | 50 | 50 | 5 | index.js | 0 | 100 | 100 | 0 | 7,17 | serviceWorker.js | 0 | 0 | 0 | 0 |... 32,133,135,138 | ------------------|----------|----------|----------|----------|-------------------| Test Suites: 2 failed, 2 total Tests: 6 failed, 3 passed, 9 total Snapshots: 0 total Time: 17.683s Ran all test suites.
great video, but I have a question tho, how do I test component with responsiveness, what if the specific element appears on the desktop screen and disappears in the mobile screen how do I test that specific element, I already looked upon StackOverflow but they say there is no support for screen size while testing in react testing library, please can u explain how you test responsive components in a video or in a comment in detail I'm new to testing, thx
Actually, never use the data's array index as key in array of components.. A key should be unique, and identify the related value, if you change the value at index 0, the key won't change, and react won't know the value has changed.
I was finding the start promising, but I've stopped watching it at 45'. At this point, you started to switch to class based component and to test implementation details which I believe is not a good practice. I found this article: kentcdodds.com/blog/react-hooks-whats-going-to-happen-to-my-tests and I think that is more suitable with my way of testing things. Thanks.
There has been a move by the React team to switch from class based components to functional components. It's too bad though really, many people who are familiar with object oriented structures prefer the class based approach. Kent is a good teacher too, if you want to learn to do functional component testing by all means click the link. I do want to point out it has nothing to do with TDD as an approach and instead focuses on how to test functional components that use hooks. Feel free to use nzombies for a heuristic of TDD and Kents explanation of writing implementations that use React hooks.
You create the App.js file before writing a test that checks the existence of that file. You have given birth to the file and the production code without writing a test that gives birth to the file and the code inside of it. This is a violation of TDD. You should blow away the whole src directory, create your App.test.js file and then start writing your tests that will give birth to the folder structure, then the files in those folders, then the code in those files. You don't start with a structure and THEN write the tests. This is a direct violation of what TDD is all about.
@@ProgrammingMadeEZ To be fair to you, I think for the purposes of a RUclips demo, I shouldn't have come out so strongly, but I'm glad you took my well intended remarks in stride! Cheers man!
Let me know what you think of the video!
In the comments...
You're awesome this video is extremely useful! Thanks!
Liked, subscribed, and hit the notification bell... should say enough! :)
Why did you switch to a class component, I really want to know how to do things only with functional components
This was extremely helpful as an overview of the strategy intended by TDD.
The examples were specific and blended well with the conceptual understanding and the principles we want to
explore in testing methodology.
Following along, it's more helpful if you finish a thread of thought, and come back to any tangent AFTER the over-arching thread.
In my experience, the diverging in the moment can easily confuse people. It's easier to make sense if we come back to it after the main idea.
It seems useful to address potential questions in the moment, and may work for some people, bu by and large the majority of people don't learn
well from that strategy. It's better to close cycles first and then revisit. It's harder on the instructor, but it is an easier way to repeat the overarching
process while introducing the minutae. Otherwise, it causes the minutae to take greater importance in the flow than it should.
Anyway, thanks for this. Very helpful.
Please don’t stop going in-depth. That’s why I watch
been struggling with TDD for React for a while now. Lots of 'ah ha' moments here. Thank you.
EDIT: TDD way more fun than second guessing yourself every step of the way :P
Great video. I've been struggling with TTD for some time and had a great time learning this. Thank you for sharing the knowledge.
Damn you youtube, why didn't you suggestion this before
Amazing Job love your in-depth explanation
Thanks a lot for making this video. Most of the React tutorials don't show how to write tests and even fewer of them use TDD. Videos like yours are rare, thanks again!
and I hit that Subscribe button because I don't want to miss any videos coming from this channel in future.
Thanks for this content.
Yes amazing love your explanation. I have been struggling for some time and you made me understand TDD
Although I'm working with TL, that was pretty useful to learn about a workflow of Unit Tests on a visual aspect. Thanks a lot!
I've been watching tons of Jest and Enzyme tutorial videos the last weeks and all i found is crap until today. But searching harder on RUclips I found this channel and this is, by far, the best, well explained and most complete video about Jest testing in RUclips. I'm now suscribed to your channel. Thank you very much.
What a wonderful way of teaching and conveying the message so perfectly, Thank you so much for this awesome session.
That is some damn good explanation for beginners like me. Thank you so much!
I'm currently taking a Udemy Course where the instructor is going through Jest/Enzyme testing and the combination of this video with that course is honestly brilliant. I'm learning a lot! Thanks for creating this video! I also noticed that you were worried about the views you had prior to the views that came later. I hope that provided you with some insight to the value you're bringing to the table! This video is amazing! Don't worry about live viewers! Thanks so much!
Hi, can you drop the link to the Udemy course?
Interested too
Very useful video, amazing work thanks for share it !!
6:23 3 laws of TDD
26:00 Writing first test
36:30 Second test
44:30 third test
49:00 4th test
Informative video, Thanks
Awesome video. i learned a lot today. thank you
That's Great! Thank you so much.
Really helpfully video. Your explain really good! totally recommended
Steve thank you so much !
Damn! Never realised that learning TDD could be this fun and interesting! Kudos to the Awesome explanation. If you ever make any udemy course,I will buy it!!
Well explained. Thanks
Thank you very much for this video !!
Great video, great final thoughts
Hi. I watched the whole video and is really explanatory. Did you have any experience having to test functional components with hooks?
Kudos!!! This is the best videos on TDD I ever encourtered....you save me alot of stress....Thanks so much
Thanks so much for making this video! I'm just new enough to React that I've just started TDD, and this lesson made me an instant fan. Do you intend on making more videos to elaborate on this concept? If not, what resources would you recommend that could efficiently show me how to implement testing on my next project to a professional extent?
I will be making more videos as time permits. As for more resources I highly recommend reading Extreme Programming explained 2nd edition by Kent Beck. There's also plenty of other RUclips video's on TDD although they typically are geared toward back end rather than front end. The cycle is still the same though for JS as it is in Java, C#, Python, Ruby, etc.
@@ProgrammingMadeEZ Much appreciated! Subscribed - keep up the good work!
Very useful video. Thank you =)
Superb!! explanation, Please create a video with Clean Architecture for React Please.
Thank you so much 👍🏼🎉🙏⭐🤛
Bro, are you making any videos as sequel to this !
Halfway through the video and loving it!!
Interesting way of doing things ! Thank you for sharing this.
But as Kent Beck said ( the author of TDD ), TDD is about testing business rules not implementation details !
I see that you're using Enzyme here ! Testing library has replaced Enzyme because in frontend we avoid testing implementation details to let the front-end flexible to change it very easily.
Great video. Learned a ton
You are the best!
U ARE GREAT!!!!!!!!!
Hello sir! I'm following this video because I have a final interview this friday, and I'm trying to learn a litle bit more about testing. I'm having troubles to mock Hooks with functional components with React 18. Do you know what is the best dependency (or way) to do so? Thanks for this content, very usefull.
Any idea why at 1:49:04 , the personListItems[0] didn't work but personListWrapper.find('li') works.
Are there any alternatives to Enzyme? As Enzyme is not supporting React versions past 16.
Where can I find the code you write in this tutorial? thanks.
can you please create a small project with tdd implementation?
this is the course for the beginners level..? who dont know anything about jest and enzyme ?
Why my enzyme is not downloading?? its shows me error
Good job buddy, good tutorial, easy to understand.
Though I didnt understand one thing. When i ran "npm test" it passed all the tests but when i ran "npm test -- --coverage" to check the coverage it failed 6 out of 9 tests and only 3 tests passed.
Also didnt understand why code coverage for PersonList is 50%.
-------------------------------|-------------------|-----------------|----------------|---------------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-------------------------------|-------------------|-----------------|----------------|---------------|-------------------|
All files | 6.67 | 0 | 10.53 | 6.67 | |
App.js | 100 | 100 | 100 | 100 | |
PersonList.js | 50 | 0 | 50 | 50 | 5 |
index.js | 0 | 100 | 100 | 0 | 7,17 |
serviceWorker.js | 0 | 0 | 0 | 0 |... 32,133,135,138 |
------------------|----------|----------|----------|----------|-------------------|
Test Suites: 2 failed, 2 total
Tests: 6 failed, 3 passed, 9 total
Snapshots: 0 total
Time: 17.683s
Ran all test suites.
hmmm, I'll have to take a look.
great video, but I have a question tho, how do I test component with responsiveness, what if the specific element appears on the desktop screen and disappears in the mobile screen how do I test that specific element, I already looked upon StackOverflow but they say there is no support for screen size while testing in react testing library, please can u explain how you test responsive components in a video or in a comment in detail I'm new to testing, thx
Actually, never use the data's array index as key in array of components.. A key should be unique, and identify the related value, if you change the value at index 0, the key won't change, and react won't know the value has changed.
I wouldn't say never, but it isn't recommended if you can use something else like an id property on the object.
I was finding the start promising, but I've stopped watching it at 45'. At this point, you started to switch to class based component and to test implementation details which I believe is not a good practice. I found this article: kentcdodds.com/blog/react-hooks-whats-going-to-happen-to-my-tests and I think that is more suitable with my way of testing things. Thanks.
There has been a move by the React team to switch from class based components to functional components. It's too bad though really, many people who are familiar with object oriented structures prefer the class based approach. Kent is a good teacher too, if you want to learn to do functional component testing by all means click the link. I do want to point out it has nothing to do with TDD as an approach and instead focuses on how to test functional components that use hooks. Feel free to use nzombies for a heuristic of TDD and Kents explanation of writing implementations that use React hooks.
Hey buddy I wanna learn ms access with vba.......but I wanna learn complete.....not only basic tqq
Ist this funny in real life development where a component changed by many developers
i want to learn complete ms access with vba ??
You create the App.js file before writing a test that checks the existence of that file. You have given birth to the file and the production code without writing a test that gives birth to the file and the code inside of it. This is a violation of TDD. You should blow away the whole src directory, create your App.test.js file and then start writing your tests that will give birth to the folder structure, then the files in those folders, then the code in those files. You don't start with a structure and THEN write the tests. This is a direct violation of what TDD is all about.
Yeah yeah yeah... always a critic in the crowd. lol. But you're right, better to let the tests drive the architecture.
@@ProgrammingMadeEZ To be fair to you, I think for the purposes of a RUclips demo, I shouldn't have come out so strongly, but I'm glad you took my well intended remarks in stride! Cheers man!