TDD Live Coding - Test Driven Development Tutorial with React, Jest, and Enzyme

[@ProgrammingMadeEZ]

Let me know what you think of the video!

[@ProgrammingMadeEZ]

In the comments...

[@LifeWithRilla]

You're awesome this video is extremely useful! Thanks!

[@LifeWithRilla]

Liked, subscribed, and hit the notification bell... should say enough! :)

[@nxtcoder1790]

Why did you switch to a class component, I really want to know how to do things only with functional components

[@bastiat6865]

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.

[@thetruthsayer8347]

Please don’t stop going in-depth. That’s why I watch

[@RyanFromUltrasound]

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

[@AlexTurner_666]

6:23 3 laws of TDD 26:00 Writing first test 36:30 Second test 44:30 third test 49:00 4th test

[@markclausnunes]

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!

[@arafattai9895]

Great video. I've been struggling with TTD for some time and had a great time learning this. Thank you for sharing the knowledge.

[@Muaddibkhan]

Damn you youtube, why didn't you suggestion this before Amazing Job love your in-depth explanation

[@susmitobhattacharyya1668]

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.

[@stevenespinoza6277]

Yes amazing love your explanation. I have been struggling for some time and you made me understand TDD

[@americovaldazo4441]

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 KZbin I found this channel and this is, by far, the best, well explained and most complete video about Jest testing in KZbin. I'm now suscribed to your channel. Thank you very much.

[@elatighetfaghaoubeid9463]

Informative video, Thanks

[@higorcoimbra6591]

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!

[@rexgamaxxx]

Awesome video. i learned a lot today. thank you

[@dilrubakhan7112]

Well explained. Thanks

[@davipersan]

Very useful video, amazing work thanks for share it !!

[@jeffgarner5891]

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?

[@ProgrammingMadeEZ]

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 KZbin 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.

[@jeffgarner5891]

@@ProgrammingMadeEZ Much appreciated! Subscribed - keep up the good work!

[@DenisTruong]

Steve thank you so much !

[@preethamgowda]

That is some damn good explanation for beginners like me. Thank you so much!

[@pintunag]

What a wonderful way of teaching and conveying the message so perfectly, Thank you so much for this awesome session.

[@victoriapetrone4841]

Really helpfully video. Your explain really good! totally recommended

[@guslei]

Hi. I watched the whole video and is really explanatory. Did you have any experience having to test functional components with hooks?

[@giannaasher7232]

That's Great! Thank you so much.

[@LifeWithRilla]

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!

[@mufty_codes]

Hi, can you drop the link to the Udemy course?

[@Seb16291629]

Interested too

[@HeinekenLasse]

Great video, great final thoughts

[@piyushmahapatra6405]

Bro, are you making any videos as sequel to this ! Halfway through the video and loving it!!

[@iamabhirupdatta]

Any idea why at 1:49:04 , the personListItems[0] didn't work but personListWrapper.find('li') works.

[@NeverSerg]

Very useful video. Thank you =)

[@barkleysanto3709]

Are there any alternatives to Enzyme? As Enzyme is not supporting React versions past 16.

[@akshaymenon3856]

Thank you very much for this video !!

[@marcosmillas5562]

You are the best!

[@tommy_corey]

Great video. Learned a ton

[@piyushmahapatra6405]

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!!

[@dita0322]

Where can I find the code you write in this tutorial? thanks.

[@juanmanuelcataldopavan6328]

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.

[@mahendranath2504]

Thank you so much 👍🏼🎉🙏⭐🤛

[@savaramkiran]

Superb!! explanation, Please create a video with Clean Architecture for React Please.

[@yusufabdulhafiz8757]

Kudos!!! This is the best videos on TDD I ever encourtered....you save me alot of stress....Thanks so much

[@codingtips3774]

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.

[@kag3670]

U ARE GREAT!!!!!!!!!

[@veronikak513]

Why my enzyme is not downloading?? its shows me error

[@susmitobhattacharyya1668]

can you please create a small project with tdd implementation?

[@Flame-on-f2p]

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

[@KashiKaMusafir]

this is the course for the beginners level..? who dont know anything about jest and enzyme ?

[@nakulbhatt21100]

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.

[@ProgrammingMadeEZ]

hmmm, I'll have to take a look.

[@nirrepluap]

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.

[@ProgrammingMadeEZ]

I wouldn't say never, but it isn't recommended if you can use something else like an id property on the object.

[@TheRicoco2011]

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.

[@ProgrammingMadeEZ]

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.

[@paramjeet975singh3]

i want to learn complete ms access with vba ??

[@sukhdevsingh-xm8nz]

Hey buddy I wanna learn ms access with vba.......but I wanna learn complete.....not only basic tqq

[@mdgolamkibria9864]

Ist this funny in real life development where a component changed by many developers

[@ketankshukla]

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]

Yeah yeah yeah... always a critic in the crowd. lol. But you're right, better to let the tests drive the architecture.

[@ketankshukla]

@@ProgrammingMadeEZ To be fair to you, I think for the purposes of a KZbin demo, I shouldn't have come out so strongly, but I'm glad you took my well intended remarks in stride! Cheers man!