TypeScript/React Testing: Components, Hooks, Custom Hooks, Redux and Zustand
Вставка
- Опубліковано 5 сер 2024
- By viewer request we are looking at testing React TypeScript components all the way from render components, through components with state, asynchronous components, custom hooks, Redux and Zustand.
No BS TS Book: no-bs-ts.myshopify.com/
Code: github.com/jherr/ts-react-tes...
00:00 Introduction
00:47 Project Setup
01:55 Basic component testing
05:06 Multiple element testing
08:22 Event handler testing
11:51 Testing state hooks
14:07 Testing async hooks
17:56 Testing simple custom hooks
19:53 Testing async custom hooks
22:18 Testing Redux components
26:19 Testing Zustand components
29:03 Outroduction
React Testing Library: testing-library.com/docs/reac...
Mock Service Worker: mswjs.io/
React Hooks Testing Library: github.com/testing-library/re...
👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#typescript #nobsTS #testing #mockServiceWorker - Наука та технологія
this is fantastic. Well paced, clear and logical explanations. 100% quality teaching and nice to see that you enjoy it!
Nothing but amazing content, you are doing great job! I have noticed myself skipping all other* tutorial stuff and always going to your videos. You are doing it right. Keep at it!
More on testing react and testing library please! :) Thanks for this!
Jack really I dont have words for appreciation, awesome video, I learn about the react testing. I watch many videos but your video really clear my testing concepts.
Thank you so much.
This is just awesome. With your help, I have a good grasp of what testing is.
Very nice video. My background is TDD since 2000 so its nice to see how to implement this paradigm in React (with different supporting libraries). Thanks so much!
Simplesmente o melhor vídeo de testes que já assistir. Perfeito e com exemplos!
Absolutely great tutorial (although a little outdate, but that's normal). Great, simple, to-the-point steps and explanations, great voice delivery, great enthusiasm. Thank you for making these!
Thank you very much Jack, for posting this video.
I was trying to understand react testing since last 3 days and finally came here.
Now I am very much clear with React Testing (with typescript).
Thanks again 🙂
Wow 👏, this is really no BS..ad free, straight to the point 👏
Even after two years, it is very current, congratulations!
This is such a good tutorial for testing. Thank you for your amazing work!
Excellent for newbies and as a refresher! Thanks!
I really like the way you teaching about React and TypeSctipt stuff!!
Thanks!
Feels like I have been consuming content for years to stumble upon this gem
I am angular developer which start explore react js, and I am consider your videos the most informative. Thank you for your content!!
Really nice video, thanks a lot! Covers a lot in a really easy to digest format
this is brilliant piece of knowledge you have shared here! Thank you!
The fact that the video only has 17k views makes me sad. Testing is so freaking cool and more people should be learning it. Excellent video
As usual Gold Standard video. I still re-run your videos for refreshing older topics I may have not touched for a while. Also nice French beard Jack :-)
French beard, ok. Never heard that before, but I'll take it! 😀
Hello, let me show my gratitude, thanks so much for such an amazing job, quite practical aproach. Please continue doing videos like this.
Hey, Jack, thank you so much for that, i was try to test my hooks and well, this video make it so simple!
Amazing and very very complete video, and is short!!! Thanks for sharing !!
I found it very helpful. Thank you Jack Herrington
Thank you so much for your amazing content, i really would like to see your channel growing. Keep up the good work 👏👏👏
Thank you so much for this. This is exactly what i'm looking for
This was really great! I’ve bought the book, thanks! ❤️
Hello Jack, thank you very much for all your Tutorials.
You are very welcome. Happy to have your views!
great content as always, loved zustand.
Jack never failed to give awesome contents 👏
That was so clean and clear 😊
It's so clear to understand. appreciate you to make this video :)
thank you, Jack, great content as always!
Such a great tutorial! Awesome, thank you so much.
Really Helpful and clean solutions. Thanks
fast and easy to understand. thx
Thanks for this really nice video with practical examples.
Testing React Context API would be great if included
I'm really amazed by the quality of each video that you've uploaded so far. I've basically shared them all with my colleagues.
Given that you're introducing in BS/TS some design patterns and in this next premiere you're talking about Zustand, could we have a mix of both worlds?
For instance, how to perform undo/redo operations using a command/memento pattern mixed with a state management library? Again, keep those videos coming! Really amazing stuff!
I like how you think Pedro! That video sounds like a fun one!
Hey Pedro, are you Brazilian? I'm looking for a Dev job, lol
No BS TS is such a good title for the book!
Been using this a lot the last 2 weeks on my current project
It's great, right? And MSW is super cool!
Hi Jack!
I love all your videos; you speak very clearly, and I can understand almost everything you say.
I would appreciate it if you could make a video explaining how to test functions that are inside a React component (and are not received via props) using mocks. Additionally, it would be great if you could demonstrate how to test different renders that result from useState changes within a functional component.
Thank you very much! Greetings from Argentina! =)
Thanks, you just solved my 3 hour work!
Awesome, thank you from Brazil!
This here is quality content! Thank you!
awesome explanation and methodology
.
Thanks for the awesome tutorial!
This tutorial is so damn good and I can admit that you're an incredible teacher on React; never found someone else here on UA-cam providing better explanations and better experience overall. Super !!
Hi Jack, Thank you so much for your tutorials. I would request you add a tutorial for material UI react testing. Thanks!
This level of test is interesting, it is difficult to find such a deep level of test. This has to be the starting point to test deeply and with an acceptable code coverage a project quite complicated that I have in production
Thank you for this tutortial. It really helps
Thank you for your amazing content. You cant believe how much i learned and i am looking forward to more of your content. :)
very nice. Thanks for the video
Struggling to mock my zustand store and I thought I wonder if jack herrington will have a video on this. Bingo. What a guy. Thanks Jacky baby
Please keep up. This video is awesome.
Thanks best content of react and typescript!
Indeed a great video.
wow man... what a video!
Needed full series on react testing library with jest
perfect i needed this.
thx
The best. Obrigado!
Blown away by the videos I’ve seen so far. No one is covering these more advanced topics as well as you do.
What is the extension that gives you the test autocomplete btw? I was so impressed by how accurate it was.
Thanks a lot, it's amazing video :)
That was great. Please add example when add axios or wrap axios to custom method.
OMG 😍 thank you... Again.
You are just so good ! I consider myself like a Mid level developer with 3yrs of exp but you are just on another level, first time i see on youtube a true Senior/Lead or even higher I don't know whats above that lol, you inspire me to become better on every video you make, thanks for your great effort.
In addition to that I want to know what's your opinion about the "Outside In tdd" and "Inside out tdd" what approach is better if there is one ?
thanks man ur really awesome
Everything in nutshell. Thanks
Thanks!
Thanks for the video it's been really helpful. Could you also show how to test components that require the thunk middleware?
thanks a ton
thank you
good video! i'd like to see a full-stack build by you. App with front-end typescript with react,state management and backend part with express and mongo for example + tests.That's is a good idea for a series of videos i think.Greetings!
Great quality in everything. Thank you a lot. My youtube sidebar is all dedicated to Jack Herrington tho I'm watching them all the time.
more than best
Awesome
Wow.. just wowww
10/10 😉
Its a great tutorial. Thanks. One question on testing async custom hooks
How do you test the cleanup of the use effect?
You just love pronouncing zuStand :))
Yesssss
We need NodeJS+Typescript Testing
This was great - any chance of doing a TDD demonstration with React? Or maybe a demonstration of testing Sagas?
Hi Jack, can you make a video tutorial on sorting react import automatically
Great stuff! Is fireEvent better than user? Also for orgState why not grab current state before each test?
Great content Jack. Is there a way to test the flow of a custom hook that dispatches redux actions? I'm asking this because redux-saga was introduced to a new project i'm working on by a senior developer that newly joined the team, and the selling point was we can test the flow of a side-effect using redux-saga as opposed to a custom react hook where we can't test the flow.
During my research about redux-saga, I found that a lot of teams are moving away from it and the docs for it hasn't been updated. Would you recommend using redux-saga?
Great video! Is there any meaningful difference between resetting the Zustand store on beforeEach vs afterEach?
I don't think so.
Lol i like the thumbnail 🤭🤭
Do you use userEvent over fireEvent in some scenarios? I heard that it’s better, but I am not sure. Are you planning to do more videos on testing? Your videos helping me to go through my internship)
Is react-testing-library the right tool to make both integration test and e2e tests? this video was very cool and usefull. I downloaded the source. Thank you for sharing
Really nice lecture Jack. How we can test components with tables?
Feel free to jump on the Discord server discord.gg/eJ5bYFb6 and post a question in the #react channel. That being said please read the #rules first and make sure that you post a succinct question that is answerable by the volunteers on the server.
thank you for this great tutorial but im confused why we need to waste a huge time writing testing code when you can use console log and see results?!
I’d really like to know how to test a component that uses a ref on a HTML element. I’ve had so much trouble with this.
Hi, did you not have to set up a handlers file for the MSW stuff? can't seem to get mine to work
Do you have a video for testing an rtk query endpoint?
The async testing of react-hooks was helpful. What is the benefit between running a mock server/service worker vs mocking fetch or mocking a method that calls fetch with a mockResolveValue? I suppose running the server means you don't need to mock fetch, which is quite helpful. Often, I extract my api calls from components, and I can mock the method that makes the call. Is it just six of one, half a dozen of the other, or maybe letting fetch do its thing against a mock server is preferable. Thanks.
I think you hit it at the end there. Basically letting fetch and the rest of the code do its thing but basically sandbox it so that it's talking to the mock service instead of the real deal.
Loved this one. Does anyone know what theme and font he's using? Looks neat.
Night Wolf [dark] and MonoLisa.
@@jherr Thanks a lot! MonoLisa seems to be a paid font so I settled for Cascadia Code, and my editor looks great after a few background color tweaks.
nice thumbnail. jacky
hi Jack, first of all I looooove all your videos, just a simple question, was the isMounted variable really important for the tests on the APIComponent testing, removing it didn't interfere on the tests here...
Can you give me a time reference? It's very possible it's not required.
oh sorry@@jherr, I came back again to review your video and just saw your comment 😅... it would be around 14:50, and you said that was a way to safeguard or prevent that request from being called after the component is unmounted, I was trying to imagine that scenario actually 🤔
@@jherr will take this opportunity to ask you if you can someday make a video about component decoupling strategies with some examples, would love to know how you work around this issue.
what is the typeahead extension that you're using to autocomplete the line of code before it's been written?
GitHub Copilot,
why you would use waitFor instead of findByRole (17:20)? Is there a difference?