I agree. I always found it difficult to try and teach testing because it's hard to do it in a "real world" way. I think Mitchel did an excellent job though
Agreed. It's arguably the biggest "woah, I have no idea what I should be doing" I found on a new job. And I'd argue it's maybe the one thing that can separate you from other candidates and make you stand out on jobs. If you are good at testing it will make you seem like a boss from day 1. I know that sounds silly but being good at it really is super valuable.
First of all, great video, it is very educational and easy to listen to. I would like to say a couple things however: Firstly, you said that integration tests are more than just combining unit tests, but I feel like you didn't really cover the whole idea of what the difference is and why you need both. For those reading this in the future, a unit test tests a single component and is very useful to find problems with specific parts of your program. The purpose of an integration test is to test if the components correctly function when put together. They basically test the connection between components. If you rely solely on integration tests you may find errors, but it will be harder to see in which component they might be whereas unit tests generally point you right to the faulty component. Unit tests are also really useful for boundary testing: Testing cases near branching points in the code, and other edge cases. EDIT: In other words, for important parts of your code you would want both unit and integration tests. In this case I would have used unit tests to see if the buttons work correctly and to see if the text boxes take their inputs correctly, and an integration test to see if clicking the pay button actually correctly registers the inputs of the fields and passes them on to the next component, instead of just combining the unit tests. Secondly, I feel like your code editor is a bit too small, you can't really see the code, even though that should be the focus of the video. EDIT 2: At 42:55 you also say that there is only one text box so just targeting "textbox" is fine. That is of course only the case if no other textbox will be added later. If you only have one test like this it would be easy to edit, but if you write a lot of tests like this adding components to pages can get very tedious very quickly because of the amount of tests you will have to edit, on top of the new tests you already have to write. EDIT 3: At about 45:00 you say "use as small of a value as possible", but I would personally argue that this way, you do not test larger values which are much more important. I would say a better option would be to reset the database before and/or after your tests, and to at least test larger values in your integration tests (especially very large values).
End-to-end testing with Cypress is amazing, but it'll miss out on the tiny details that unit testing will cover. That's why the whole pyramid is essential. Great video!
Yeah that's what I'm thinking as well. I am new to testing, but it seems like unit tests help locate precisely where bugs are in your code, integration tests help determine whether the components of your app interact together properly, and end-to-end tests help check whether workflows are behaving as expected in a more realistic user situation. All seem necessary, or at least beneficial.
This video was simply INCREDIBLE! Do yourself a favor and watch from start to finish. You won't regret it and will definitely add some items to your skillset, especially the amazing Cypress automated tests! It was so much simpler than I imagined to get automated E2E tests setup and running! Thanks Brad and Mitchel!
thanks for this course,this is the best and reliable channel to learn new techs, btw plz be noted "yarn install && yarn dev" command is replaced with "yarn add add yarn dev". for them who struggled at this point
Always a pleasure to see your promoting other content creators! Testing is not talked about as much, glad to see this covered in this guest video! Great video, Mitchel!
@@TechbaseDev He really is the 🐐. I can relate, as i had the opportunity a few months back to create a video for his audience. He helps out others more than i think he knows. Good luck in the future, will definitely stay updated with your channel!
So, this doesn't work anymore. Tried really hard to setup the project but it just doesn't work at all. Searched online and they were saying to downgrade to node 16 etc. Tried all the other fixes none worked.
Hi! Really useful video. One suggested improvement is that, because of heavy indentation, maybe you could split the editor with a horizontal line instead of vertical? It's really hard to follow when you're scrolling left to right. At almost no point was it possible to read an entire instruction without you doing that. Thanks and keep doing what you're doing!
Awesome !! yeahhh "testing" !! we really needed a tutorial like this !! thankx Brad and Mitchel !! you dont know how much this helped me and many others Devs out there..!! 😊👍
Great video, thank you very much. Just one small bit of feedback/improvement, I find its always best to have the full code editor on the screen, not having to scroll left and right. Other than that, everything was great, thank you both.
I can't get the repo to run. It appears to be completely stuck in dependency conflicts. The breaking error is "Module not found: Can't resolve '../aws-exports'" . But aws-exports in not a dependency. It appears to be a container. There are open issues on the repo regarding this same problem.
Exactly what I was looking for ( i kw there are lots of others on YT, but not as a single video...) :D :D Awesome stuffs man. Will be very helpful. Please keep up the good works. :)
A great video on testing, I have been looking for something like this for days and it really covered everything I needed for my current project. The only suggestion I have is being mindful of your IDE placement, as at times I couldnt see the full code, so had to replay several times in certain parts of the video. Thank you for the great content Mitchel and Brad
I think these videos are incredible, Brad is known as the father of web tutorials and it's lovely to see people who have probably gain some knowledge from him create videos for the channel and for Brad to alway big up his friends
Thank you that was great! I was also able to enable typescript in both the unit and e2e testing files which made things a bit more clear having types/suggestions/warnings etc.
I learned about the Test Playground tool which is super useful. I loved E2E testing using cypress. I think unit testing part could be improved by including different ways to get and different assertions along with a small example of mocking. Mitchel is very nice instructor. He explained things very nicely. On all as always great video loved it.👌🙌
Really helpful video as always. For future reference, I really struggle to follow along and understand the code because it was half the width of the screen.
Many people have different preferences when it comes to file structure, but I believe it should be organized by features rather than adhering to the 'smart and dumb' methodology. The 'Tao of React' book explains this concept effectively.
I need help, I using macbook M1 after run "yarn install && yarn" dev show this error. May I know how to fix it? Directory: /Users/louisyoong/code/react-testing-starter/node_modules/puppeteer Output: The chromium binary is not available for arm64: If you are on Ubuntu, you can install with: apt-get install chromium-browser /Users/louisyoong/code/react-testing-starter/node_modules/puppeteer/lib/cjs/node/BrowserFetcher.js:112 throw new Error(); ^ Error at /Users/louisyoong/code/react-testing-starter/node_modules/puppeteer/lib/cjs/node/BrowserFetcher.js:112:19
Hey Brad I am doing your udemy mern Ecommerce project, in fetching data from react chapter I got stuck on http-error 431 , what should I do to get rid of this?
I have a suggestion please, either use full screen of browser or code editor at time, because Mitchel here has his browser, editor and terminal all open in same screen and I understand that he has a wide monitor so its not that difficult for him to keep track of whats where but my eyes are hurting looking at the screen even in full screen in RUclips. So If possible can you do something about that? Great Course BTW!
good content except for one thing: one half of screen has browser with tiny form with 90% empty unused space, other half is zoomed in snapped in half code with terminal which leaves even smaller window for code
Using hotkeys to clear the test output is nice for testing. If you have a macro keyboard, you can make a clear button, it's super handy! CLEAR TERMINAL: press Ctrl + Shift + P key together
Can someone tell me why I can't log in to the app? The server is running and I did use johndoe as username and s3cret as the password? All it says is username os password is invalid.
Oh cool. I haven't watched this yet. I use Selenium, Cucumber, Gherkin and TestNG using Java for E2E. How hard would it be to pick this up given my knowledge?
Most E2E testing tools have a lot of similarities. The major differences are usually the things that are going on under the hood. Since you have worked with a huge variety of testing tools, you'll pick this up easily.
Another user wrote this a bit higher up in the comments 👇 I too had the authentication issue. Username: johndoe and Password: s3cret was not working. My solution was the following: Make sure the backend is also running. When you run yarn dev, check the output and make sure you don't see "[nodemon] app crashed - waiting for file changes before starting...". If so, I resolved it by changing line 79 in backend/app.ts from... app.use(checkAuth0Jwt); --to--> app.use(checkAuth0Jwt as any); .... Also similarly add this "as any" to lines 84, 89, and 94. Then rerun yarn dev, and it should work.
They are similar in the sense that both are not Selenium/based. In terms of functionality you will probably be fine with both. However, it´s good to know that Cypress is definitely more popular (at the moment) in especially the React community. If I search for jobs that mention "Cypress" in my area vs "TestCafe", there are respectively 213 and 18 results. Although not always the case, chasing what's popular in your era is often the best for your wallet 😉
Thank you so much for this crash course Brad and Mitchel! One question though, is $balance at 53:00 some sort of jquery object? This is my first exposure to cypress so wasn't sure. Thanks again!
Nah. I think he just puts the $ in front of balance to make it stand out. Maybe it's some sort of Cypress recommended syntax. You can put any variable name there and it will work the same.
Great! We need more tutorials about testing, there isn't much of it on the internet
I agree. I always found it difficult to try and teach testing because it's hard to do it in a "real world" way. I think Mitchel did an excellent job though
Agreed. It's arguably the biggest "woah, I have no idea what I should be doing" I found on a new job. And I'd argue it's maybe the one thing that can separate you from other candidates and make you stand out on jobs. If you are good at testing it will make you seem like a boss from day 1. I know that sounds silly but being good at it really is super valuable.
Becoz nobody wants to waste time...
You're right. Maybe one day you'll make some for us.
Web whale is it time wasting to test apps?
Thanks Brad, Mitchel. I learnt quite a lot today even though I've been testing for years.
Really appreciate it guys!
What would we do without you brad? honestly I have no clue, respect guys, for all your hard work
I have watched and taken countless testing courses but no one has ever explained the rationale behind testing better than this. Great Job 4:20/58:35
Exactly what I needed... perfect timing...🤩
Same here haha
First of all, great video, it is very educational and easy to listen to.
I would like to say a couple things however:
Firstly, you said that integration tests are more than just combining unit tests, but I feel like you didn't really cover the whole idea of what the difference is and why you need both.
For those reading this in the future, a unit test tests a single component and is very useful to find problems with specific parts of your program. The purpose of an integration test is to test if the components correctly function when put together. They basically test the connection between components. If you rely solely on integration tests you may find errors, but it will be harder to see in which component they might be whereas unit tests generally point you right to the faulty component. Unit tests are also really useful for boundary testing: Testing cases near branching points in the code, and other edge cases.
EDIT: In other words, for important parts of your code you would want both unit and integration tests.
In this case I would have used unit tests to see if the buttons work correctly and to see if the text boxes take their inputs correctly, and an integration test to see if clicking the pay button actually correctly registers the inputs of the fields and passes them on to the next component, instead of just combining the unit tests.
Secondly, I feel like your code editor is a bit too small, you can't really see the code, even though that should be the focus of the video.
EDIT 2: At 42:55 you also say that there is only one text box so just targeting "textbox" is fine. That is of course only the case if no other textbox will be added later. If you only have one test like this it would be easy to edit, but if you write a lot of tests like this adding components to pages can get very tedious very quickly because of the amount of tests you will have to edit, on top of the new tests you already have to write.
EDIT 3: At about 45:00 you say "use as small of a value as possible", but I would personally argue that this way, you do not test larger values which are much more important. I would say a better option would be to reset the database before and/or after your tests, and to at least test larger values in your integration tests (especially very large values).
End-to-end testing with Cypress is amazing, but it'll miss out on the tiny details that unit testing will cover. That's why the whole pyramid is essential. Great video!
Yeah that's what I'm thinking as well. I am new to testing, but it seems like unit tests help locate precisely where bugs are in your code, integration tests help determine whether the components of your app interact together properly, and end-to-end tests help check whether workflows are behaving as expected in a more realistic user situation. All seem necessary, or at least beneficial.
Found another gem. Thank you so much, Brad and Techbase.
This video was simply INCREDIBLE! Do yourself a favor and watch from start to finish. You won't regret it and will definitely add some items to your skillset, especially the amazing Cypress automated tests! It was so much simpler than I imagined to get automated E2E tests setup and running! Thanks Brad and Mitchel!
thanks for this course,this is the best and reliable channel to learn new techs,
btw plz be noted "yarn install && yarn dev" command is replaced with "yarn add add yarn dev". for them who struggled at this point
Always a pleasure to see your promoting other content creators! Testing is not talked about as much, glad to see this covered in this guest video! Great video, Mitchel!
Thanks John! And yes, the fact that Brad gives other content creators these kind of chances says a lot about him as a person 🐐
@@TechbaseDev He really is the 🐐. I can relate, as i had the opportunity a few months back to create a video for his audience. He helps out others more than i think he knows. Good luck in the future, will definitely stay updated with your channel!
YES. Thank you. This is the other half of the knowledge that is required at jobs!
this is PURE GOLD. Best video to get into Jest. Thank you Brad and Mitchel
So, this doesn't work anymore. Tried really hard to setup the project but it just doesn't work at all.
Searched online and they were saying to downgrade to node 16 etc. Tried all the other fixes none worked.
Great!
Great tutorial, went from knowing nothing about automatic testing to slowly but surely implementing it in my own projects in just about 60 minutes.
Timing can't be better. I have been looking for this and boom 💥
Hi! Really useful video. One suggested improvement is that, because of heavy indentation, maybe you could split the editor with a horizontal line instead of vertical? It's really hard to follow when you're scrolling left to right. At almost no point was it possible to read an entire instruction without you doing that.
Thanks and keep doing what you're doing!
Thank you Traversy ! I enjoy both your project tutorials as well as your UDEMY courses !
I am praying for you to have your all problems solved and all mighty to give you strength to fight you problems. please be strong!
Awesome !! yeahhh "testing" !! we really needed a tutorial like this !! thankx Brad and Mitchel !! you dont know how much this helped me and many others Devs out there..!! 😊👍
I did not see the video was yours and when I listen to the intro music I was like...hell yeah! Muchas Gracias señor Brad
Great video, thank you very much.
Just one small bit of feedback/improvement, I find its always best to have the full code editor on the screen, not having to scroll left and right.
Other than that, everything was great, thank you both.
I miss your speech videos (non tutorial ones). I wish you get better soon Brad 🙏🏼
I can't get the repo to run. It appears to be completely stuck in dependency conflicts. The breaking error is "Module not found: Can't resolve '../aws-exports'" . But aws-exports in not a dependency. It appears to be a container. There are open issues on the repo regarding this same problem.
I'm faced with the same issue. Have you found a solution yet?
same
Perfect video! Testing is very important and I'm glad it's being covered. Thanks Techbase & Brad! :)
This is why I like Brad more because he focus on doing more instead of just showing stuffs.
that helped library seems very OP, thanks for showing
This is such a good method of teaching how to test a react app. Loved the video!
Exactly what I was looking for ( i kw there are lots of others on YT, but not as a single video...) :D :D
Awesome stuffs man. Will be very helpful. Please keep up the good works. :)
Great to see testing video. Not a lot of folks cover this much!
that's it what I'm looking for these days:) thank you guys
Fantastic! Thanks for the content, I have your MERN eCommerce and miss a lot on good content covering tests.
A great video on testing, I have been looking for something like this for days and it really covered everything I needed for my current project. The only suggestion I have is being mindful of your IDE placement, as at times I couldnt see the full code, so had to replay several times in certain parts of the video. Thank you for the great content Mitchel and Brad
Finally! Please do more testing courses!
When you did the cypress bit with testing playground I think testing finally clicked for me.
Perfect Timing ❤️ Was just searching damn Brad ❤️❤️
I think these videos are incredible, Brad is known as the father of web tutorials and it's lovely to see people who have probably gain some knowledge from him create videos for the channel and for Brad to alway big up his friends
This is exactly the content that I was looking for! Thank you so much!
Perfect timing! I was just looking for a testing library guide with react and then this videos just came out, amazing!
Thank you that was great! I was also able to enable typescript in both the unit and e2e testing files which made things a bit more clear having types/suggestions/warnings etc.
thanks a ton to both of you, god bless you both. Code without test cases is like driving without seat belts on, it upto you which one you prefer :)
Just in time for my end of uni project, incredible, thank you!
Exactly what I'm trying to learn at the moment!
Hello Brad. Always good to see you. Still the king.
I learned about the Test Playground tool which is super useful. I loved E2E testing using cypress.
I think unit testing part could be improved by including different ways to get and different assertions along with a small example of mocking.
Mitchel is very nice instructor. He explained things very nicely.
On all as always great video loved it.👌🙌
Hey Aryan! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?
Your teaching is always outstanding , we are waiting your new video, thanks for your hard work keep growing 🙏
This video was super informative...Thanks a bunch Mitchel! :)
Wow! That’s cool! Will definitely find a use for Cyprus. I will also look at Selinium too
ruclips.net/video/zS3rsUljVTA/видео.html
That is one awesome tutorial right there ! honestly great job Mitchel and thank you for this detailed how to test. keep up the hard work.
For accessibility, your form inputs should ALWAYS have labels.
Agreed! I wish all UI/UX-designers would take that in consideration as well.
This is really amazing brad, I have learnt a lot from your channel. Keep up the good work sir.
More about testing please! Great job team.
nice instructor, the project is absolutely enormous for a 1hr tutorial, was overkill for my CPU
really well done, I have waited alot of tutorials and your knowledge and delivery is excellent, keep up the good work
Love you both, great content on both channels thank you
Thanks so much 🙏
Thank you Brad for getting Justin Timberlake's cousin put together and awesome tutorial!
Great!! This video really help me understanding testing!
these are the tutorials I am looking for ❤️
Thanks a bunch Mitchell & Brad for making this awesome video react testing tutorial for us!
Doing my first testing tomorrow right in time😄
thanks for this I was exactly looking for this
Really helpful video as always. For future reference, I really struggle to follow along and understand the code because it was half the width of the screen.
Awesome, this is the best testing tutorial for React i have ever watch
Thank you channel owner and Guest Teacher.
Thank you very much, before watching this video, I was afraid to write test codes, and now I think I would make it well
Finally completed this in 7 days, daily chunk by chunk. 🎯
Thank you very much, Mitchel! I learnt a lot with your good explanations.
Thanks Jonatas, appreciate it a lot!
Many people have different preferences when it comes to file structure, but I believe it should be organized by features rather than adhering to the 'smart and dumb' methodology. The 'Tao of React' book explains this concept effectively.
Thank you, I never knew testing could be this fun😁
I think the comment section can agree that Mitchel has earned our subs. Thanks for featuring him Daddy Traversy!
Thanks so much man!
yep, this is the best video on what to test on the internet,
ty guys
extremely thankfully for this video
"For a small app like this"
*tears*
😂
In terms of functionality it's relatively small, but the codebase is, well... a big bloated mess.
I need help, I using macbook M1 after run "yarn install && yarn" dev show this error. May I know how to fix it?
Directory: /Users/louisyoong/code/react-testing-starter/node_modules/puppeteer
Output:
The chromium binary is not available for arm64:
If you are on Ubuntu, you can install with:
apt-get install chromium-browser
/Users/louisyoong/code/react-testing-starter/node_modules/puppeteer/lib/cjs/node/BrowserFetcher.js:112
throw new Error();
^
Error
at /Users/louisyoong/code/react-testing-starter/node_modules/puppeteer/lib/cjs/node/BrowserFetcher.js:112:19
same
Hey Brad I am doing your udemy mern Ecommerce project, in fetching data from react chapter I got stuck on http-error 431 , what should I do to get rid of this?
Desperately needed such a content ❤️❤️☺️
I have a suggestion please, either use full screen of browser or code editor at time, because Mitchel here has his browser, editor and terminal all open in same screen and I understand that he has a wide monitor so its not that difficult for him to keep track of whats where but my eyes are hurting looking at the screen even in full screen in RUclips. So If possible can you do something about that?
Great Course BTW!
Fantastic, now I have a basic understanding of React testing.
40:54 can we just use async/await instead?
Shit , everytime I think of learning, I see Brad posting it . Last week I thought of learning typescript, Brad posted a related video.
good content except for one thing: one half of screen has browser with tiny form with 90% empty unused space, other half is zoomed in snapped in half code with terminal which leaves even smaller window for code
Using hotkeys to clear the test output is nice for testing. If you have a macro keyboard, you can make a clear button, it's super handy!
CLEAR TERMINAL: press Ctrl + Shift + P key together
Perfect! ❤️
More React stuff 😍
Awesome testing course 🔥🔥
Can someone tell me why I can't log in to the app? The server is running and I did use johndoe as username and s3cret as the password? All it says is username os password is invalid.
Hi Koko, where you able to figure it out yet?
I have the same issue too... just cant log in with that username and password
@@gouinalchemist5632 are there any errors popping up in your console?
have the login details changed? I am unable to sign in
Excellent video but could you please try to fit the screen with code in a bit larger area?
Thanks for this. I loved it ❤️
Learnt a thing or two
Thanks so much David!
Your channel is like Bible for web developers Brad .
Special thanks Brad & mitchel 🎇💪
Once again you read my mind, I just need this course 😲
Good content - I would recommend making the application screen smaller so we could actually read all of the code - but again, very nice presentation
Thanks man, I was about to start learning react testing and I found your tutorial
Oh cool. I haven't watched this yet. I use Selenium, Cucumber, Gherkin and TestNG using Java for E2E. How hard would it be to pick this up given my knowledge?
Most E2E testing tools have a lot of similarities. The major differences are usually the things that are going on under the hood.
Since you have worked with a huge variety of testing tools, you'll pick this up easily.
Is it just me or did that `yarn install && yarn dev` take a lot of time, and show like 18000 packages?
Another user wrote this a bit higher up in the comments
👇
I too had the authentication issue. Username: johndoe and Password: s3cret was not working. My solution was the following: Make sure the backend is also running. When you run yarn dev, check the output and make sure you don't see "[nodemon] app crashed - waiting for file changes before starting...". If so, I resolved it by changing line 79 in backend/app.ts from... app.use(checkAuth0Jwt); --to--> app.use(checkAuth0Jwt as any); .... Also similarly add this "as any" to lines 84, 89, and 94. Then rerun yarn dev, and it should work.
Brad & Techbase thank you so much ! Can we have some good content on enzyme also please?
Thanks for this. What are your thoughts on Cypress vs TestCafe?
They are similar in the sense that both are not Selenium/based. In terms of functionality you will probably be fine with both.
However, it´s good to know that Cypress is definitely more popular (at the moment) in especially the React community.
If I search for jobs that mention "Cypress" in my area vs "TestCafe", there are respectively 213 and 18 results.
Although not always the case, chasing what's popular in your era is often the best for your wallet 😉
Thank you for this video. But the username & pass didn't work :(
Thank you so much for this crash course Brad and Mitchel!
One question though, is $balance at 53:00 some sort of jquery object? This is my first exposure to cypress so wasn't sure. Thanks again!
Nah. I think he just puts the $ in front of balance to make it stand out. Maybe it's some sort of Cypress recommended syntax. You can put any variable name there and it will work the same.
It’s just string interpolation in js
@@abdulghani1943, no it's not. String interpolation would be something like…
const balance = "$50"
const total = `My balance is ${balance}`
It says the username or password is invalid, has anything changed since this video?