TypeScript/React Testing: Components, Hooks, Custom Hooks, Redux and Zustand
Vložit
- čas přidán 27. 07. 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 - Věda a technologie
Simplesmente o melhor vídeo de testes que já assistir. Perfeito e com exemplos!
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!
this is fantastic. Well paced, clear and logical explanations. 100% quality teaching and nice to see that you enjoy it!
This is just awesome. With your help, I have a good grasp of what testing is.
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.
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!
This is such a good tutorial for testing. Thank you for your amazing work!
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!
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 👏
Hello, let me show my gratitude, thanks so much for such an amazing job, quite practical aproach. Please continue doing videos like this.
I really like the way you teaching about React and TypeSctipt stuff!!
Thanks!
Really nice video, thanks a lot! Covers a lot in a really easy to digest format
Thank you so much for your amazing content, i really would like to see your channel growing. Keep up the good work 👏👏👏
Even after two years, it is very current, congratulations!
this is brilliant piece of knowledge you have shared here! Thank you!
Excellent for newbies and as a refresher! Thanks!
This was really great! I’ve bought the book, thanks! ❤️
I am angular developer which start explore react js, and I am consider your videos the most informative. Thank you for your content!!
Jack never failed to give awesome contents 👏
Amazing and very very complete video, and is short!!! Thanks for sharing !!
Feels like I have been consuming content for years to stumble upon this gem
Hey, Jack, thank you so much for that, i was try to test my hooks and well, this video make it so simple!
great content as always, loved zustand.
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! 😀
Thank you so much for this. This is exactly what i'm looking for
Thanks for this really nice video with practical examples.
Testing React Context API would be great if included
thank you, Jack, great content as always!
Such a great tutorial! Awesome, thank you so much.
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
I found it very helpful. Thank you Jack Herrington
It's so clear to understand. appreciate you to make this video :)
Awesome, thank you from Brazil!
Hello Jack, thank you very much for all your Tutorials.
You are very welcome. Happy to have your views!
That was so clean and clear 😊
Really Helpful and clean solutions. Thanks
This here is quality content! Thank you!
Thank you for your amazing content. You cant believe how much i learned and i am looking forward to more of your content. :)
Thanks for the awesome tutorial!
awesome explanation and methodology
.
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!
Hi Jack, Thank you so much for your tutorials. I would request you add a tutorial for material UI react testing. Thanks!
Thank you for this tutortial. It really helps
No BS TS is such a good title for the book!
fast and easy to understand. thx
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.
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
Please keep up. This video is awesome.
very nice. Thanks for the video
Thanks best content of react and typescript!
Needed full series on react testing library with jest
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 ?
wow man... what a video!
Indeed a great video.
perfect i needed this.
thx
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
Thanks a lot, it's amazing video :)
OMG 😍 thank you... Again.
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
That was great. Please add example when add axios or wrap axios to custom method.
thanks man ur really awesome
This tutorial is so damn good and I can admit that you're an incredible teacher on React; never found someone else here on CZcams providing better explanations and better experience overall. Super !!
The best. Obrigado!
Everything in nutshell. Thanks
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.
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!
Thanks!
thanks a ton
Thanks for the video it's been really helpful. Could you also show how to test components that require the thunk middleware?
thank you
more than best
Wow.. just wowww
10/10 😉
Awesome
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 :))
This was great - any chance of doing a TDD demonstration with React? Or maybe a demonstration of testing Sagas?
Great stuff! Is fireEvent better than user? Also for orgState why not grab current state before each test?
Hi Jack, can you make a video tutorial on sorting react import automatically
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)
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?
We need NodeJS+Typescript Testing
Great video! Is there any meaningful difference between resetting the Zustand store on beforeEach vs afterEach?
I don't think so.
Do you have a video for testing an rtk query endpoint?
Hi, did you not have to set up a handlers file for the MSW stuff? can't seem to get mine to work
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
Yesssss
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.
Lol i like the thumbnail 🤭🤭
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.
Just a quick question do we need a ts-jest transformer ?
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.
why you would use waitFor instead of findByRole (17:20)? Is there a difference?
Hi Jack, can we have a session on Redux Saga...
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.
what is the typeahead extension that you're using to autocomplete the line of code before it's been written?
GitHub Copilot,