React TDD in 30 Minute - Test Driven Development with Jest and Enzyme
Вставка
- Опубліковано 8 лют 2025
- 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 support@bitfumes.com
Thanks for all your support!
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.
How you solved React 17 problem?
@@yoannbouix2235 change 16 manually
@@bhojakrahul5880 What I did thank u :)
@@bhojakrahul5880 is it not work with react 16+ version?
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!
Glad it was helpful!
Seriously! You are done with a great concept. As much as simple you made. Thank you!
Short and concise. Thank you for your work ^^
had to work on TDD for a new client project, great explanation helped me dip my toes
Great explanation! I can finally understand how to test react code. Thank you!
This is the best tutorial. Thanks Bitfumes! You rock.
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!
Glad it was helpful!
Best tutorial to get started with React TDD. Give this a go :)
Awesome, glad you liked it
Please hit like and share with your friends
@@Bitfumes Shared already : ). But Enzyme is dead right? What should we go for then?
You helped me a lot.
I am now clear about test driven development
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 🙂
"I am so excited that I want to create button that decrements counter". You just summed up the life of a developer.
that's so amazing bro, please share your progress on twitter and just tag me there @sarthaksavvy
this tutorial is amazing!! You made it very easy to understand!! Thank you!
Loved your work. You made it very easy and clear.
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.
Great lesson to start with testing in react. Thanks so much, I appreciate your effort.
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!
we need more TDD React tutorials!
You explained it in very easy way. 👏 👏 amazing.
really awesome tutorial to start reactjs testing with enzyme and jest!!!
"I'm so excited to create another test" xD Yeye sure. Excited to create a test:D
Creating a test might not be exciting, but seeing a test first fail and then succed is very satisfying
This is awesome this was awesome and i am greatful for this you deserve a lot of accolade
Great video, thank you so much for taking the time to do it.
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
Thanks for the video, Very clear and easy to understand!
why I never thought about moving the sidebar to right? amazing! haha love it. thanks! amazing video
Hahahaha, just for fun
This in amazing tutorial on how to approach TDD. Thanks
Great video, very easy to understand and follow!
Thank you. I learned so much. Always be happy.
Great Video Sarthak..Thanks a lot..Keep making such awesome videos..
This is really a well brought tutorial. Nice work!
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
👏nice
Thanks for the tutorial, excellent!
Thank you for the wonderful explanation and nice way to teach TDD👍😀
nice work man. very well explained
Thanks
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");
})
What is the logic in app.js
@@sreeharithiruveedhi3104 counter > 0 && setCounter(counter - 1)}>
Decrement
@@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
@@bhojakrahul5880 Here u are trying to do increment only when the counter is less than 10 right 'Do not Increment above 10' right
thank you Bro ... this is a very good tutorial on TDD
Glad it was helpful!
Dude Amazing Video, thank you!
Abdou Seck thanks for your love and support keep learning
I really enjoy this tutorial. It is so easily compared with Angular/Jasmine. Thank you for your clean work!
Love your video. Great teacher!
Simple and easy explanation!
Damn I was not really a fan of testing stuff, but you inspired me to have fun with unit testing...
Thanks a lot bro best video for beginners.
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!
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
It was Informative and nice video. Thank you
Excellent video sir, enjoyed it I am going to start implementing everything I learned here
Thanks for the content ! Simple Fast and Effective !
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
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
Thanks for the great tutorial, but I noticed one problem when I saw in 21:16 that you changed the previous value of a state using the current state, which is bad. You should change the state using a callback function passed to the setCounter like so: setCounter((prevState) => {prevState + 1} ).
Good and simple explanation thanks
Thanks for your love and support, keep learning. Subscribe to bitfumes newsletters
bitfumes.com/newsletters
thanx man, very helpful
Very helpful. Thanks!
jest comes default wit create-react-app, so no need to install them separately
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
ya bro
very good tutorial. well done
Thank you! Cheers!
awesome with simplicity👏
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?
great explanation
Amazing tutorial....!!!!
Why did we installed jest thing, its working fine here without installing jest and its dependencies, i only installed enzymes
Great video!!
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()
);
});
Good one. Easy to follow.
That was great. However, what if we have a function that calculates some value before display, and we need to test that function?
Great video. Well explained.
Great tutorial
Very nice video!
👏 wow, thank you
thank you for this awesome explanation, you make it simple and clear.
I wondered, what is the type of terminal you use in vscode?
Thank you so much
thanks for share this tutorial, i liked so much!
Thanks a ton for your awesome efforts, please let me know if same techniques can be used with "React Native" as well ?
Great video!
I learned a lot!
When working with typescript what will be the wrapper type
Super
So nice
Thanks for watching, please subscribe and like this video
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?
thankx buddy
You're welcome!
Amazing tutorial!
Thanks your lecture. Beginners like me => do not install jest, just install enzyme.
Thanks
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
Hey thanks for the tutorial! What is the VSCODE plugin you have for your font scheme?
Material theme with fira code font and ligature enabled
This is a great video. Thank you.
Glad it was helpful!
@@Bitfumes One of the best tutotials here in UA-cam.
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.
great explanation!
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.
what font were you using for VSC, it looked very nice.
when using shallow with typescript it throw an error unexpexted >
This is pretty nice. But I want to ask something... Is it really that slow? >__
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??
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.
whats your vscode theme?
Great tutorial. What’s your vscode setup?
Thank you
You're welcome
What Font are you using!?
very nice video, bro, thanks
Sir can you make for useState nd useEffect hooks with Axios call
work with react 17?
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.
What's the different between toBe and toContain?