TypeScript/React Testing: Components, Hooks, Custom Hooks, Redux and Zustand

[@nattysweg343]

Feels like I have been consuming content for years to stumble upon this gem

[@EduardoYudjiNagashimaMiyata]

Even after two years, it is very current, congratulations!

[@soulos45]

Thanks!

[@herubond3610]

I really like the way you teaching about React and TypeSctipt stuff!!

[@jherr]

Thanks!

[@tsooooooo]

No BS TS is such a good title for the book!

[@curiousprogrammer90]

More on testing react and testing library please! :) Thanks for this!

[@tarunsukhu2614]

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 :-)

[@jherr]

French beard, ok. Never heard that before, but I'll take it! 😀

[@letok2871]

I am angular developer which start explore react js, and I am consider your videos the most informative. Thank you for your content!!

[@iqwebserve3973]

Excellent for newbies and as a refresher! Thanks!

[@samuelvalentine7846]

Wow 👏, this is really no BS..ad free, straight to the point 👏

[@matthewrideout426]

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

[@Satender-cd7zu]

Thanks, you just solved my 3 hour work!

[@lawrencejones51]

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!

[@nimapourmohammadi4854]

Really Helpful and clean solutions. Thanks

[@pfcosta84]

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!

[@jherr]

I like how you think Pedro! That video sounds like a fun one!

[@danielflorencio9661]

Hey Pedro, are you Brazilian? I'm looking for a Dev job, lol

[@hameedhameed5542]

This is just awesome. With your help, I have a good grasp of what testing is.

[@joraanbe]

Amazing and very very complete video, and is short!!! Thanks for sharing !!

[@khudadadrasikh]

I found it very helpful. Thank you Jack Herrington

[@BSK_Rick]

Hey, Jack, thank you so much for that, i was try to test my hooks and well, this video make it so simple!

[@mahu_4312]

Hello Jack, thank you very much for all your Tutorials.

[@jherr]

You are very welcome. Happy to have your views!

[@antonioteixeira1779]

Awesome, thank you from Brazil!

[@SajidAliSoftwareEngineer]

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.

[@amphetaminocid]

Please keep up. This video is awesome.

[@boot-strapper]

Been using this a lot the last 2 weeks on my current project

[@jherr]

It's great, right? And MSW is super cool!

[@adamwoolf9993]

this is fantastic. Well paced, clear and logical explanations. 100% quality teaching and nice to see that you enjoy it!

[@AlinaTudose]

That was so clean and clear 😊

[@avinashvivek]

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 🙂

[@parushanaidoo9183]

Thank you for this tutortial. It really helps

[@shivashankar6043]

Jack never failed to give awesome contents 👏

[@andriimuntian3632]

this is brilliant piece of knowledge you have shared here! Thank you!

[@luislla3142]

Hello, let me show my gratitude, thanks so much for such an amazing job, quite practical aproach. Please continue doing videos like this.

[@Berkeli]

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

[@ionut.vidrighin]

This tutorial is so damn good and I can admit that you're an incredible teacher on React; never found someone else here on KZbin providing better explanations and better experience overall. Super !!

[@sumanmarahatha4274]

Needed full series on react testing library with jest

[@mustafe1391]

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!

[@donotthink]

This here is quality content! Thank you!

[@worldhello4012]

It's so clear to understand. appreciate you to make this video :)

[@ralphlargo9728]

Thank you so much for this. This is exactly what i'm looking for

[@mycovearomany455]

Thanks for this really nice video with practical examples. Testing React Context API would be great if included

[@ImranKhansilvake]

very nice. Thanks for the video

[@fotios4902]

Thanks for the awesome tutorial!

[@bafian]

great content as always, loved zustand.

[@HotRatsAndTheStooges]

Really nice video, thanks a lot! Covers a lot in a really easy to digest format

[@manantank]

This is such a good tutorial for testing. Thank you for your amazing work!

[@vittoriomorellini1939]

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

[@ReQ1964SPA-vu4xu]

You're a lifesaver man!

[@sanazseifi5105]

Such a great tutorial! Awesome, thank you so much.

[@victorbadaro]

wow man... what a video!

[@idilenebrito6570]

Simplesmente o melhor vídeo de testes que já assistir. Perfeito e com exemplos!

[@muzamilahmed6396]

Hi Jack, Thank you so much for your tutorials. I would request you add a tutorial for material UI react testing. Thanks!

[@JC-yy5nf]

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!

[@alexanderleonardo5649]

fast and easy to understand. thx

[@andyazma4198]

Thanks a lot, it's amazing video :)

[@mehmetsayn573]

Everything in nutshell. Thanks

[@bscodev]

Thanks best content of react and typescript!

[@SajidAliSoftwareEngineer]

Indeed a great video.

[@Errorisedqt]

Thank you for your amazing content. You cant believe how much i learned and i am looking forward to more of your content. :)

[@igotbit9454]

perfect i needed this. thx

[@FragmentFrontDeveloper]

That was great. Please add example when add axios or wrap axios to custom method.

[@aaronmcadam]

This was really great! I’ve bought the book, thanks! ❤️

[@sandradivan2728]

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! =)

[@chaboxx159c]

thanks man ur really awesome

[@eisanodehi]

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.

[@herbertpimentel]

OMG 😍 thank you... Again.

[@ponderatulify]

You just love pronouncing zuStand :))

[@yasin_osman]

Thank you so much for your amazing content, i really would like to see your channel growing. Keep up the good work 👏👏👏

[@rival-slays]

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.

[@igormundim]

The best. Obrigado!

[@aghileslounis]

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 ?

[@27sosite73]

thank you

[@mohammadshahjalal810]

Amazing 😍

[@marvinotieno2194]

Thanks for the video it's been really helpful. Could you also show how to test components that require the thunk middleware?

[@user-gs2zp3dm1v]

thanks a ton

[@keiji0075]

more than best

[@mohammadshahjalal810]

I'm becoming fan of you.

[@decentrob8126]

why you would use waitFor instead of findByRole (17:20)? Is there a difference?

[@mridulmishra8166]

Wow.. just wowww

[@LoryKa]

13:30 : why "count is 0" not true, since we clicked the element only after getting the value of divElement, therefore the divElement should be still 0 and not 1. I tried something similar in my application: I tried to test whether the counter is increasing after we press the "+", therefore I got the span's value, stored it in value1, fired a user event, stored the second value in value2, and check whether value2 > value1 and the test passed. Could you please explain why is this difference?

[@LoryKa]

My bad, I was storing the .textContent property of the span element, and not the actual span element. Since the span element is an object, if you access the textContent property after the fire event it's gonna show the new value

[@djaniivanov4117]

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!

[@nicholassmith6412]

14:32 - interesting way of calling fetch when a component mounts. You said that it prevents setData from being called if the fetch is late and the component is unmounted. But would this mean that occasionally the page would load without fetching any data? Could you not just add data is a dependency to the useEffect hook and just add a guard clause at the top checking if data is undefined then just return? Also, why does it return a function that sets isMounted to false rather than just setting it to false and adding a return after setData? Feels like some pro code that I don’t understand. Great video btw!

[@dailymeow3283]

Lol i like the thumbnail 🤭🤭

[@lalitkandpal1483]

How can i write a test for hook passed by props in component and pass setHook in test

[@jherr]

You test the component and that should test the hook.

[@arupkumargupta6128]

Its a great tutorial. Thanks. One question on testing async custom hooks How do you test the cleanup of the use effect?

[@amitsinghrawat4760]

Hi Jack, can you make a video tutorial on sorting react import automatically

[@SyedZainUlHasan]

Really nice lecture Jack. How we can test components with tables?

[@jherr]

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.

[@miguelship3]

Do you have a video for testing an rtk query endpoint?

[@someonewhowantedtobeahero3206]

Loved this one. Does anyone know what theme and font he's using? Looks neat.

[@jherr]

Night Wolf [dark] and MonoLisa.

[@someonewhowantedtobeahero3206]

@@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.

[@anujupadhyay10]

10/10 😉

[@amajuify]

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?

[@chauhan035]

Awesome

[@thatWebGuySolutions]

Great stuff! Is fireEvent better than user? Also for orgState why not grab current state before each test?

[@MrKeepItTrill]

Great video! Is there any meaningful difference between resetting the Zustand store on beforeEach vs afterEach?

[@jherr]

I don't think so.

[@devsami]

Just a quick question do we need a ts-jest transformer ?

[@edydflow5524]

I got error "a test was not wrapped in act(...)." event if I run it on act method. May be i have missed something? 🤣

[@ahmedsoran4710]

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?!

[@tomascarignano5002]

Yesssss

[@GoodHomeVideos]

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.

[@gerardsiles]

I'm getting this error: App.test.js: Support for the experimental sy ntax 'jsx' isn't currently enabled

[@mani8586]

Hi Jack, can we have a session on Redux Saga...

[@vittoriomorellini1939]

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