React TDD in 30 Minute - Test Driven Development with Jest and Enzyme
Рет қаралды 103,982
4 жыл бұрынTest-Driven Development ( #TDD ) in #reactjs with #jest and #enzyme testing libraries
In just 30 minutes, we will know the benefits of TDD and how to follow Test Driven Development in Reactjs by using Jest and Enzymes.
Useful Links:
React: reactjs.org/docs/getting-star...
Jest: jestjs.io/
Enzyme: airbnb.io/enzyme/
Github Source Code:
github.com/bitfumes/TDD-react...
======================= Ad Free Tutorials ======================
Check bitfumes.com For ads-free and more advanced courses (use Coupon code WELCOME60 to get 60% discount)
==================FOLLOW ME ==================
Subscribe for New Releases!
Twitter - / bitfumes
Facebook - / bitfumes
Instagram - / bitfumes
(ask me questions!)
-- QUESTIONS? --
Leave a comment below and I or someone else can help you.
For quick questions you may also want to ask me on Twitter, I respond almost immediately.
Email me support@bitfumes.com
Thanks for all your support!
@naderazimi6786 3 жыл бұрын
I started today to learn unit testing. I tried different youtube videos and I have to say your 30 minutes course on unit testing was by far the best. I understood a great deal about unit testing. Great explanation and method of teaching. I tried it with react 17 which caused problem but I managed to figure it out and it worked.
@yoannbouix2235 3 жыл бұрын
How you solved React 17 problem?
@bhojakrahul5880 3 жыл бұрын
@@yoannbouix2235 change 16 manually
@yoannbouix2235 3 жыл бұрын
@@bhojakrahul5880 What I did thank u :)
@abhishekporwal7969 Жыл бұрын
@@bhojakrahul5880 is it not work with react 16+ version?
@parasmehta7793 3 жыл бұрын
Seriously! You are done with a great concept. As much as simple you made. Thank you!
@jasonwiesner2768 2 жыл бұрын
Love your videos. Thanks so much! Your series on Javascript prototypes and constructors helped me so much when I was a newbie in bootcamp. Thanks again and please keep making this content. Thanks 🙂
@badvibezforever7 3 жыл бұрын
Great explanation! I can finally understand how to test react code. Thank you!
@rajatshrivastava879 3 жыл бұрын
Loved this. Thanks a ton for the video! I never wrote the automated Test cases for my React Project though I have been working on it for the past 9 months. This video is on point and explains almost everything to start with. Thanks a ton again!
@Bitfumes 3 жыл бұрын
Glad it was helpful!
@Nikki-fs2kt 4 жыл бұрын
this tutorial is amazing!! You made it very easy to understand!! Thank you!
@agustinlavalla4928 3 жыл бұрын
Great lesson to start with testing in react. Thanks so much, I appreciate your effort.
@natow.b 3 жыл бұрын
had to work on TDD for a new client project, great explanation helped me dip my toes
@perishableq1020 2 жыл бұрын
Short and concise. Thank you for your work ^^
@rajaramsavant4384 2 жыл бұрын
This is a great explanation! This demo can make anyone understand...what is jest and enzyme exactly and how we can use it together for writing unit test cases for react. Thank you!
@Bitfumes 2 жыл бұрын
Glad it was helpful!
@amirmustafa622 3 жыл бұрын
Loved your work. You made it very easy and clear.
@dzengiztafa510 4 жыл бұрын
This is really a well brought tutorial. Nice work!
@luanfelipecosta 4 жыл бұрын
why I never thought about moving the sidebar to right? amazing! haha love it. thanks! amazing video
@Bitfumes 4 жыл бұрын
Hahahaha, just for fun
@VVe11erMichae1 4 жыл бұрын
Thanks for the video, Very clear and easy to understand!
@kimliverpool1 4 жыл бұрын
Thank you. I learned so much. Always be happy.
@abdouseck4894 4 жыл бұрын
"I'm so excited to create another test" xD Yeye sure. Excited to create a test:D
@whitebelt4148 4 жыл бұрын
Creating a test might not be exciting, but seeing a test first fail and then succed is very satisfying
@QiroLab 4 жыл бұрын
You explained it in very easy way. 👏 👏 amazing.
@mzwandilendimba2024 4 жыл бұрын
Excellent video sir, enjoyed it I am going to start implementing everything I learned here
@adeniyitaofik3832 3 жыл бұрын
This is awesome this was awesome and i am greatful for this you deserve a lot of accolade
@Fooljuice 2 жыл бұрын
This is the best tutorial. Thanks Bitfumes! You rock.
@royaloppression 4 жыл бұрын
Great video, very easy to understand and follow!
@AfricanBabies10 3 жыл бұрын
Thank you so much, this was very helpful and your upbeat attitude really helped me find interest in TDD!
@Bitfumes 3 жыл бұрын
Thanks for your love and support, keep learning. Subscribe to bitfumes newsletters bitfumes.com/newsletters
@saadchouar 4 жыл бұрын
Thanks for the content ! Simple Fast and Effective !
@DB-jh8cg 3 жыл бұрын
really awesome tutorial to start reactjs testing with enzyme and jest!!!
@ammadunaani 3 жыл бұрын
Thank you for the wonderful explanation and nice way to teach TDD👍😀
@jerrydavidson4226 3 жыл бұрын
This in amazing tutorial on how to approach TDD. Thanks
@sahidulislamjony5769 2 жыл бұрын
You helped me a lot. I am now clear about test driven development
@ankitmehrotra8519 4 жыл бұрын
Great Video Sarthak..Thanks a lot..Keep making such awesome videos..
@GuilleAcosta124 3 жыл бұрын
we need more TDD React tutorials!
@PierreOlivierTran 3 жыл бұрын
"I am so excited that I want to create button that decrements counter". You just summed up the life of a developer.
@Bitfumes 3 жыл бұрын
that's so amazing bro, please share your progress on twitter and just tag me there @sarthaksavvy
@MrPlaiedes 4 жыл бұрын
Love your video. Great teacher!
@maicongunner 4 жыл бұрын
thanks for share this tutorial, i liked so much!
@gomesdev 2 жыл бұрын
Thanks for the tutorial, excellent!
@JoAndStepi 4 жыл бұрын
Simple and easy explanation!
@everyonecanbefascist 4 жыл бұрын
concise and to-the-point !
@Bitfumes 4 жыл бұрын
Thanks for your love and support, keep learning. Follow bitfumes on twitter.com/bitfumes or facebook.com/Bitfumes to get the latest updates. bitfumes.com
@MohitGupta-ln2js 4 жыл бұрын
Great video! I learned a lot!
@natnaelsisay1424 3 жыл бұрын
It was Informative and nice video. Thank you
@licokr 2 жыл бұрын
Thank you! It's an awesome video! easy to understand! you know beginners' thought. At the end, I wonder why doesn't the test work after creating Counter component, and you explained it! Ah~~ Thank you so much!
@abdouseck4894 4 жыл бұрын
Dude Amazing Video, thank you!
@Bitfumes 4 жыл бұрын
Abdou Seck thanks for your love and support keep learning
@leanrial 3 жыл бұрын
Great video!!
@SafetyPartner 3 жыл бұрын
Very helpful. Thanks!
@iwswordpress 3 жыл бұрын
Great video. Well explained.
@hadiaamir783 4 жыл бұрын
Amazing tutorial!
@nahidhossain6446 3 жыл бұрын
thanx man, very helpful
@TheGryphon14 3 жыл бұрын
Good one. Easy to follow.
@HoNow222 3 жыл бұрын
Very nice video!
@jagr6741 Жыл бұрын
Amazing tutorial....!!!!
@gunishmatta 3 жыл бұрын
Thanks a lot bro best video for beginners.
@samerkayali4525 4 жыл бұрын
great explanation!
@sirajAlam049 4 жыл бұрын
In case anybody looking for the answer of the homework. test('do not decrement below zero', () => { wrapper.find('#dcr-btn').simulate('click'); expect(wrapper.find('#counter-value').text()).toBe("0"); })
@sreeharithiruveedhi3104 3 жыл бұрын
What is the logic in app.js
@santhoshsuriya8640 3 жыл бұрын
@@sreeharithiruveedhi3104 counter > 0 && setCounter(counter - 1)}> Decrement
@bhojakrahul5880 3 жыл бұрын
@@santhoshsuriya8640 brother i do same but i get error for button not allow to be 10 {counter < 10 && setCounter(counter + 1) }} > Increment ....... test('Do not Increment below 10', () => { wrapper.find("#increment-btn").simulate('click'); expect(wrapper.find("#counter-value").text()).toBe("10"); }) any idea
@monikan9854 2 жыл бұрын
@@bhojakrahul5880 Here u are trying to do increment only when the counter is less than 10 right 'Do not Increment above 10' right
@shanujha7245 2 жыл бұрын
Best tutorial to get started with React TDD. Give this a go :)
@Bitfumes 2 жыл бұрын
Awesome, glad you liked it Please hit like and share with your friends
@shanujha7245 2 жыл бұрын
@@Bitfumes Shared already : ). But Enzyme is dead right? What should we go for then?
@roberto9369 2 жыл бұрын
nice work man. very well explained
@Bitfumes 2 жыл бұрын
Thanks
@nixrandrianiaina4380 2 жыл бұрын
thank you Bro ... this is a very good tutorial on TDD
@Bitfumes 2 жыл бұрын
Glad it was helpful!
@whataretheodds530 3 жыл бұрын
Any suggestions on how test files should be organized in a react app project? Should all tests be in the same folder as the component, or should all tests just be together in a different file? Whats the best practice?
@ManishKumar-mi7ko 3 жыл бұрын
awesome with simplicity👏
@ritheeshthomas2732 3 жыл бұрын
great explanation
@chhumchanleak7642 2 жыл бұрын
Thank you so much
@777Vasya77 4 жыл бұрын
very nice video, bro, thanks
@ktaymour 2 жыл бұрын
👏 wow, thank you
@ciprianlupsa557 3 жыл бұрын
very good tutorial. well done
@Bitfumes 3 жыл бұрын
Thank you! Cheers!
@chiho8119 2 жыл бұрын
Damn I was not really a fan of testing stuff, but you inspired me to have fun with unit testing...
@80Vikram 3 жыл бұрын
Thanks a ton for your awesome efforts, please let me know if same techniques can be used with "React Native" as well ?
@fernandogomez83 4 жыл бұрын
This is a great video. Thank you.
@Bitfumes 4 жыл бұрын
Glad it was helpful!
@fernandogomez83 4 жыл бұрын
@@Bitfumes One of the best tutotials here in KZfaq.
@sai_yerni_akhil 4 жыл бұрын
jest comes default wit create-react-app, so no need to install them separately
@JamEs-ej1vy 4 жыл бұрын
yeah I followed the tutorial verbatim and it gave me errors running the test because of the installation of babel testing. I tried again following the documentation and it worked fine
@fit_guy 3 жыл бұрын
ya bro
@bervinmance1706 3 жыл бұрын
Good and simple explanation thanks
@Bitfumes 3 жыл бұрын
Thanks for your love and support, keep learning. Subscribe to bitfumes newsletters bitfumes.com/newsletters
@luisnomad 4 жыл бұрын
Great video, thank you so much for taking the time to do it.
@Bitfumes 4 жыл бұрын
Thanks for your love and support, keep learning. Follow bitfumes on twitter.com/bitfumes or facebook.com/Bitfumes to get the latest updates. bitfumes.com
@sa3dclay859 2 жыл бұрын
thank you for this awesome explanation, you make it simple and clear. I wondered, what is the type of terminal you use in vscode?
@MrVisheshsingh 4 жыл бұрын
Wow 😲 Thanks!
@shahbazk9938 3 жыл бұрын
That was great. However, what if we have a function that calculates some value before display, and we need to test that function?
@AnopSinghRanawatperl 3 жыл бұрын
Thanks
@prisinha 2 жыл бұрын
Sarthak , can I humbly request a video on yourself as how you learnt TDD, about your employment, your family , your work schedule and your projects.
@alerbuteler 4 жыл бұрын
thanks for sharing
@oladotunolufemi 4 жыл бұрын
Great tutorial. What’s your vscode setup?
@willyrosahuanca5884 3 жыл бұрын
Great video you explain it so well, here is my solution. test('render 0 when decrement button clicked on counter value of 0', ()=>{ wrapper.find('#decrement-btn').simulate('click'); expect(wrapper.find('#counter-value').text()).toBe("0") }) counter > 0 ? setCounter(counter - 1): null} id="decrement-btn">Decrement
@soultouchingsongs Жыл бұрын
👏nice
@sadiqc8153 4 жыл бұрын
How do I write unit test for drang and drop component functionality by using jest and enzyme
@yudokartiko9065 4 жыл бұрын
Thank you
@Bitfumes 4 жыл бұрын
You're welcome
@5starkarma 2 жыл бұрын
Hey thanks for the tutorial! What is the VSCODE plugin you have for your font scheme?
@Bitfumes 2 жыл бұрын
Material theme with fira code font and ligature enabled
@VigneshwaranChandrasekaranA 4 жыл бұрын
How to test api response with authentication on header ?
@raosameer9323 3 жыл бұрын
Great video. I have a question: For my particular case, 1. I have File A with imports to File B, File C, File D 2. I want to write the Unit tests for File A. 3. But as soon as I import File A in FileA.spec, the imports for File B, File C, File D also get executed. This is causing me issues coz I get some null pointer exception in File C. 4. Irrespective of what I try to do after point 3, the UT never runs those lines.. Can you clarify on this? If the question is confusing, let me know. I will try to simplify. Acknowledgement appreciated
@hk_build 3 жыл бұрын
Great content Thanks..!!! which font family you have used for your vscode editor is it free please let me know i need it badly ...i am searching from long time??
@kesavuluc9802 4 жыл бұрын
Hey, hi you explanation regarding this very nice I have a doubt to testing my react components can you please help me
@Snugglelol 3 жыл бұрын
what font were you using for VSC, it looked very nice.
@n4vyblueyes 4 жыл бұрын
How do we implement state within Jest? For example in 24:00, instead of expecting "0" or "1" for the counter/decounter.... how about `n-1` or `n+1`
@jkf16m96 4 жыл бұрын
when you use the method "find(#id).text()" you can pass that value to a variable, parsing as an int "parseInt". Doing this way: let expectBefore = expect(wrapper.find(#id).text()) //expect something before... wrapper.find(#button).simulate("click"); // get the simulation done let n = parseInt(wrapper.find(#id).text()) // get the new value of the text and parse it expectBefore.toBe(n+1); //expect finished.
@yloibx 2 жыл бұрын
what if we want to array for to do list? I created const [list, setList] = useState([]); but how can I test the list state when every input will added and shown?
@abhinavsharma5835 Жыл бұрын
thankx buddy
@Bitfumes Жыл бұрын
You're welcome!
@KnownTechnical Жыл бұрын
Super
@Bitfumes Жыл бұрын
So nice Thanks for watching, please subscribe and like this video
@okechukwuobi3611 2 жыл бұрын
When working with typescript what will be the wrapper type
@jasbirsingh-mv5vh 3 жыл бұрын
Why did we installed jest thing, its working fine here without installing jest and its dependencies, i only installed enzymes
@jonjackson9174 2 жыл бұрын
Is the mount method not working for anyone else? I had it all the way up until the end of the video. My source code is identical to his and it's having some issue with the mount method and causing all tests to fail.
@RakeshDas-ri3xi 4 жыл бұрын
Sir Please make a video on Laravel with Reactjs.
@valikonen 3 жыл бұрын
I really enjoy this tutorial. It is so easily compared with Angular/Jasmine. Thank you for your clean work!
@ritap3116 2 жыл бұрын
here is my homework, just added a couple more lines to the already existent test: test("render the click event, decrement and increment value", () => { wrapper.find("#increment-btn").simulate("click"); expect(wrapper.find("#counter-value").text()).toBe("1"); wrapper.find("#decrement-btn").simulate("click"); expect(wrapper.find("#counter-value").text()).toBe("0"); added: ```wrapper.find("#decrement-btn").simulate("click"); expect(wrapper.find("#counter-value").text()).toBe("0");``` }); also, thanks, very valuable 30 minutes!
@salvatoreshiggerino6810 3 жыл бұрын
Based informative Pajeet
@abhijitsil4980 3 жыл бұрын
How to test if App component is a class based component and having state with property counter also have a callback function to increment the counter and those buttons are in a child component where those callback functions are called. Can you plaese help me on this.
@suvarnarao8075 3 жыл бұрын
Can you please help me with this. I have to validate not null for state property when Button clicked. I tried using expect(wrapper.state().not.toBe(""). And also tried with input field id of the wrapper. But it doesn"t help. Could you please help how to validate an input field on the Button click event.
@ilandiamond 3 жыл бұрын
I love your vs code theme. Can you share it ?
@RohitYadav-bo9mm 2 жыл бұрын
when the components laods i fetch data from API and set isLoading to false. And depending on isLoading, I render component. How can we test this. @anyone can help here?
@blackc7014 2 жыл бұрын
what theme and font are you using for vscode?
@Bitfumes 2 жыл бұрын
material theme with fira code font
@user-vv9lz2ik2t 3 жыл бұрын
Finally i got it
@brucelee7782 3 жыл бұрын
I dont understand at 3:58 why did he use the command under "without create react app" when he just used npx create-react-app a few seconds earlier. I couldnt run my test following this at all and only resolved it after using the command under setup WITH react app
What the Meowk!
Рет қаралды 4,3 МЛН
Khalil Stemmler
Рет қаралды 10 М.
Programming Made EZ
Рет қаралды 26 М.