React TDD in 30 Minute - Test Driven Development with Jest and Enzyme

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/do...
Jest: jestjs.io/
Enzyme: airbnb.io/enzyme/
Github Source Code:
github.com/bit...
======================= 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 [e-mail]
Thanks for all your support!

[@naderazimi6786]

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]

How you solved React 17 problem?

[@bhojakrahul5880]

@@yoannbouix2235 change 16 manually

[@yoannbouix2235]

@@bhojakrahul5880 What I did thank u :)

[@abhishekporwal7969]

@@bhojakrahul5880 is it not work with react 16+ version?

[@badvibezforever7]

Great explanation! I can finally understand how to test react code. Thank you!

[@rajaramsavant4384]

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]

Glad it was helpful!

[@parasmehta7793]

Seriously! You are done with a great concept. As much as simple you made. Thank you!

[@Nikki-fs2kt]

this tutorial is amazing!! You made it very easy to understand!! Thank you!

[@PierreOlivierTran]

"I am so excited that I want to create button that decrements counter". You just summed up the life of a developer.

[@Bitfumes]

that's so amazing bro, please share your progress on twitter and just tag me there @sarthaksavvy

[@jasonwiesner2768]

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 🙂

[@natow.b]

had to work on TDD for a new client project, great explanation helped me dip my toes

[@rajatshrivastava879]

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]

Glad it was helpful!

[@perishableq1020]

Short and concise. Thank you for your work ^^

[@licokr]

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!

[@sahidulislamjony5769]

You helped me a lot. I am now clear about test driven development

[@GuilleAcosta124]

we need more TDD React tutorials!

[@amirmustafa622]

Loved your work. You made it very easy and clear.

[@agustinlavalla4928]

Great lesson to start with testing in react. Thanks so much, I appreciate your effort.

[@sirajAlam049]

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]

What is the logic in app.js

[@santhoshsuriya8640]

@@sreeharithiruveedhi3104 counter > 0 && setCounter(counter - 1)}> Decrement

[@bhojakrahul5880]

@@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]

@@bhojakrahul5880 Here u are trying to do increment only when the counter is less than 10 right 'Do not Increment above 10' right

[@shanujha7245]

Best tutorial to get started with React TDD. Give this a go :)

[@Bitfumes]

Awesome, glad you liked it Please hit like and share with your friends

[@shanujha7245]

@@Bitfumes Shared already : ). But Enzyme is dead right? What should we go for then?

[@abdouseck4894]

"I'm so excited to create another test" xD Yeye sure. Excited to create a test:D

[@whitebelt4148]

Creating a test might not be exciting, but seeing a test first fail and then succed is very satisfying

[@prisinha]

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.

[@willyrosahuanca5884]

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

[@sai_yerni_akhil]

jest comes default wit create-react-app, so no need to install them separately

[@JamEs-ej1vy]

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]

ya bro

[@RTXonerix]

This is how I did the homework test, and implemented simple logic fot the counter to NOT go negative: The test: wrapper.find("#increment-btn").simulate("click"); expect(wrapper.find("#counter-value").text()).toBe("1"); wrapper.find("#decrement-btn").simulate("click"); wrapper.find("#decrement-btn").simulate("click"); expect(wrapper.find("#counter-value").text()).toBe("0"); The simple logic inside a button: onClick={() => (counter

[@luanfelipecosta]

why I never thought about moving the sidebar to right? amazing! haha love it. thanks! amazing video

[@Bitfumes]

Hahahaha, just for fun

[@Fooljuice]

This is the best tutorial. Thanks Bitfumes! You rock.

[@ritap3116]

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!

[@QiroLab]

You explained it in very easy way. 👏 👏 amazing.

[@shahbazk9938]

That was great. However, what if we have a function that calculates some value before display, and we need to test that function?

[@salathielojage6805]

Thank you for the video. This was my test: test("renders the 0 when decrement button is Clicked, Counter should Not go below that", () => { wrapper.find("#decrementBtn").simulate('click'); expect(wrapper.find("#counterValue").text()).not.toContain("-"); }); counter > 0 && setCounter(counter - 1)} id="decrementBtn" > decrement

[@80Vikram]

Thanks a ton for your awesome efforts, please let me know if same techniques can be used with "React Native" as well ?

[@jerrydavidson4226]

This in amazing tutorial on how to approach TDD. Thanks

[@sa3dclay859]

thank you for this awesome explanation, you make it simple and clear. I wondered, what is the type of terminal you use in vscode?

[@brucelee7782]

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

[@whataretheodds530]

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?

[@valikonen]

I really enjoy this tutorial. It is so easily compared with Angular/Jasmine. Thank you for your clean work!

[@codingwitharman5329]

I don't know if this is right approch but I did this and it worked. test("render the click event of decrement when counter is at 0", () => { const currentCounter = parseInt(wrapper.find("#counter-value").text()); if (currentCounter === 0) { wrapper.find("#decrement-btn").simulate("click"); } expect(wrapper.find("#counter-value").text()).toBe( currentCounter > 0 ? (currentCounter - 1).toString() : currentCounter.toString() ); });

[@VVe11erMichae1]

Thanks for the video, Very clear and easy to understand!

[@5starkarma]

Hey thanks for the tutorial! What is the VSCODE plugin you have for your font scheme?

[@Bitfumes]

Material theme with fira code font and ligature enabled

[@raosameer9323]

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

[@jasbirsingh-mv5vh]

Why did we installed jest thing, its working fine here without installing jest and its dependencies, i only installed enzymes

[@ritheeshthomas2732]

great explanation

[@adeniyitaofik3832]

This is awesome this was awesome and i am greatful for this you deserve a lot of accolade

[@roberto9369]

nice work man. very well explained

[@Bitfumes]

Thanks

[@chiho8119]

Damn I was not really a fan of testing stuff, but you inspired me to have fun with unit testing...

[@hk_build]

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

[@nixrandrianiaina4380]

thank you Bro ... this is a very good tutorial on TDD

[@Bitfumes]

Glad it was helpful!

[@ankitmehrotra8519]

Great Video Sarthak..Thanks a lot..Keep making such awesome videos..

[@ammadunaani]

Thank you for the wonderful explanation and nice way to teach TDD👍😀

[@kimliverpool1]

Thank you. I learned so much. Always be happy.

[@nahidhossain6446]

thanx man, very helpful

[@royaloppression]

Great video, very easy to understand and follow!

[@yonimoshe9785]

Great tutorial

[@Snugglelol]

what font were you using for VSC, it looked very nice.

[@daryladhityahenry]

This is pretty nice. But I want to ask something... Is it really that slow? >__

[@jagr6741]

Amazing tutorial....!!!!

[@bervinmance1706]

Good and simple explanation thanks

[@Bitfumes]

Thanks for your love and support, keep learning. Subscribe to bitfumes newsletters bitfumes.com/newsletters

[@DB-jh8cg]

really awesome tutorial to start reactjs testing with enzyme and jest!!!

[@ciprianlupsa557]

very good tutorial. well done

[@Bitfumes]

Thank you! Cheers!

[@luisnomad]

Great video, thank you so much for taking the time to do it.

[@Bitfumes]

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

[@gunishmatta]

Thanks a lot bro best video for beginners.

[@gomesdev]

Thanks for the tutorial, excellent!

[@HoNow222]

Very nice video!

[@okechukwuobi3611]

When working with typescript what will be the wrapper type

[@leanrial]

Great video!!

[@dzengiztafa510]

This is really a well brought tutorial. Nice work!

[@natnaelsisay1424]

It was Informative and nice video. Thank you

[@bhojakrahul5880]

Sir can you make for useState nd useEffect hooks with Axios call

[@yloibx]

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?

[@abdouseck4894]

Dude Amazing Video, thank you!

[@Bitfumes]

Abdou Seck thanks for your love and support keep learning

[@MrPlaiedes]

Love your video. Great teacher!

[@EminoMeneko]

I'm here because I don't know how to unit test for React. I started a project, and did manual testing. Now I start to have errors. I can fix them, but as of now I want to easily check for any regression. Lets see what you have for us here.

[@ManishKumar-mi7ko]

awesome with simplicity👏

[@mzwandilendimba2024]

Excellent video sir, enjoyed it I am going to start implementing everything I learned here

[@lefeezy]

Very helpful. Thanks!

[@JoAndStepi]

Simple and easy explanation!

[@oladotunolufemi]

Great tutorial. What’s your vscode setup?

[@TheGryphon14]

Good one. Easy to follow.

[@ktaymour]

👏 wow, thank you

[@easy_english_123]

Thanks your lecture. Beginners like me => do not install jest, just install enzyme.

[@jonjackson9174]

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.

[@8kelvin]

Amazing tutorial. One thing to note for developers to use React 17, to date, Enzyme is not yet compatible with React 17, error occurred when use mount() in React 17.

[@brucelee7782]

Omg no wonder it doesn't work for me

[@suvarnarao8075]

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.

[@chhumchanleak7642]

Thank you so much

[@iwswordpress]

Great video. Well explained.

[@blackc7014]

what theme and font are you using for vscode?

[@Bitfumes]

material theme with fira code font

[@saadchouar]

Thanks for the content ! Simple Fast and Effective !

[@rishiraj2548]

Thanks

[@abhijitsil4980]

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.

[@abhinavsharma5835]

thankx buddy

[@Bitfumes]

You're welcome!

[@AfricanBabies10]

Thank you so much, this was very helpful and your upbeat attitude really helped me find interest in TDD!

[@Bitfumes]

Thanks for your love and support, keep learning. Subscribe to bitfumes newsletters bitfumes.com/newsletters

[@mertgenc9890]

whats your vscode theme?

[@laurentbajrami3688]

What Font are you using!?

[@RakeshDas-ri3xi]

Sir Please make a video on Laravel with Reactjs.

[@sadiqc8153]

How do I write unit test for drang and drop component functionality by using jest and enzyme

[@n4vyblueyes]

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]

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.

[@KnownTechnical]

Super

[@Bitfumes]

So nice Thanks for watching, please subscribe and like this video

[@EmanFarrag-wb2em]

when using shallow with typescript it throw an error unexpexted >

[@kesavuluc9802]

Hey, hi you explanation regarding this very nice I have a doubt to testing my react components can you please help me

[@akmalzamri8422]

What's the different between toBe and toContain?

[@ilandiamond]

I love your vs code theme. Can you share it ?

[@MohitGupta-ln2js]

Great video! I learned a lot!