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.
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!
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!
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"); })
@@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
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!
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 🙂
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
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!
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
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
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
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?
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
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
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
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?
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() ); });
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??
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.
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.
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.
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.
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?
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.
![F.HERO Ft. JSPKK x ลำไย ไหทองคำ x M-PEE - ไม่สนิทบิดหมด (Thai Riders Anthem) [Official MV]](http://i.ytimg.com/vi/kPJZ0UihBfk/mqdefault.jpg)
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!
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?
Seriously! You are done with a great concept. As much as simple you made. Thank you!
You helped me a lot.
I am now clear about test driven development
Great explanation! I can finally understand how to test react code. Thank you!
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!
had to work on TDD for a new client project, great explanation helped me dip my toes
Short and concise. Thank you for your work ^^
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
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!
"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
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 🙂
This is the best tutorial. Thanks Bitfumes! You rock.
we need more TDD React tutorials!
this tutorial is amazing!! You made it very easy to understand!! Thank you!
Loved your work. You made it very easy and clear.
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
why I never thought about moving the sidebar to right? amazing! haha love it. thanks! amazing video
Hahahaha, just for fun
"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
Great lesson to start with testing in react. Thanks so much, I appreciate your effort.
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!
You explained it in very easy way. 👏 👏 amazing.
This in amazing tutorial on how to approach TDD. Thanks
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
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
This is awesome this was awesome and i am greatful for this you deserve a lot of accolade
I really enjoy this tutorial. It is so easily compared with Angular/Jasmine. Thank you for your clean work!
really awesome tutorial to start reactjs testing with enzyme and jest!!!
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.
Thanks for the video, Very clear and easy to understand!
Great Video Sarthak..Thanks a lot..Keep making such awesome videos..
Damn I was not really a fan of testing stuff, but you inspired me to have fun with unit testing...
Thank you for the wonderful explanation and nice way to teach TDD👍😀
thank you Bro ... this is a very good tutorial on TDD
Glad it was helpful!
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
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?
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
That was great. However, what if we have a function that calculates some value before display, and we need to test that function?
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
Why did we installed jest thing, its working fine here without installing jest and its dependencies, i only installed enzymes
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
nice work man. very well explained
Thanks
Thanks for the tutorial, excellent!
Great video, very easy to understand and follow!
Good and simple explanation thanks
Thanks for your love and support, keep learning. Subscribe to bitfumes newsletters
bitfumes.com/newsletters
Thanks a lot bro best video for beginners.
Thank you. I learned so much. Always be happy.
Simple and easy explanation!
what font were you using for VSC, it looked very nice.
This is really a well brought tutorial. Nice work!
Thanks a ton for your awesome efforts, please let me know if same techniques can be used with "React Native" as well ?
awesome with simplicity👏
It was Informative and nice video. Thank you
Love your video. Great teacher!
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
Excellent video sir, enjoyed it I am going to start implementing everything I learned here
great explanation
very good tutorial. well done
Thank you! Cheers!
thanx man, very helpful
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?
Amazing tutorial....!!!!
Good one. Easy to follow.
Great video!!
Dude Amazing Video, thank you!
Abdou Seck thanks for your love and support keep learning
Great tutorial
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()
);
});
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??
thank you for this awesome explanation, you make it simple and clear.
I wondered, what is the type of terminal you use in vscode?
When working with typescript what will be the wrapper type
Very nice video!
Very helpful. Thanks!
Thanks for the content ! Simple Fast and Effective !
Great video. Well explained.
👏 wow, thank you
Sir can you make for useState nd useEffect hooks with Axios call
Thanks your lecture. Beginners like me => do not install jest, just install enzyme.
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.
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.
Thank you so much
This is pretty nice. But I want to ask something... Is it really that slow? >__
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`
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.
what theme and font are you using for vscode?
material theme with fira code font
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.
Great video!
I learned a lot!
thankx buddy
You're welcome!
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?
when using shallow with typescript it throw an error unexpexted >
thanks for share this tutorial, i liked so much!
Amazing tutorial!
great explanation!
whats your vscode theme?
How do I write unit test for drang and drop component functionality by using jest and enzyme
Thanks
Super
So nice
Thanks for watching, please subscribe and like this video
This is a great video. Thank you.
Glad it was helpful!
@@Bitfumes One of the best tutotials here in TH-cam.
What Font are you using!?
What's the different between toBe and toContain?
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.
Great tutorial. What’s your vscode setup?