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!
You actually do not pronounce "Zustand" correctly, albeit you insist throughout the video in doing so numerous times 😀. Nevertheless, great content, i have recently started researching how to test my code, and, surprisingly, the web is very scarce in terms of good quality info on testing. Keep up the great work !
Why so many people use useCallback wrapper for functions in simple components? Most of the time it's unuseful, it creates function, initialize additional array of dependencies and adds memoizing. This looks weird to optimize so simple functions (yes, components are just function) So if component re-renders, it always create new function no matter of using useCallback, because your function will passed as callback to useCallback hook params, and recreates its instance only if dependencies changed, but, most of the time, useCallback with simple function as callback without dependencies works same as if you create just this new function without wrapping in useCallback. No profit here. The profit is when you have more complex app with memo around components, useMemo for complex computation etc. In common cases, using of useCallback is meaningless. It's pre-optimization, which creates additional entities (array, function, watchers etc) instead of just one function
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 ?
With new updates waitForNextUpdate is not needed, since react testing lib this function in-built now. import { renderHook, act } from '@testing-library/react' const { result } = renderHook(() => useCustomHook({ userId })) act(() => result.current.login()) expect(result.current.hasLoggedIn).toEqual(true)
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 :-)
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!
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! =)
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?
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!
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.
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
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.
Maybe it wasn't a thing when this video was released but I'm curious as to why you chose to use something like setup server instead of just mocking a return value for the get request
I've read the "isMounted" variable doesn't actually prevent against memory leaks, which is the end goal of the flag and preventing setData() from getting called. I've also seen first handed MSW library cause memory leaks in tests. Is there a reason to use MSW over nock or some other mocking framework over MSW - specific features??
I haven't seen MSW leaks, but that doesn't mean they don't exist. The value to me of MSW is that it's the lightest possible touch in terms of mocking. Outside of just running MSW there is no change to the production code. As for isMounted, I'm not using it to protect against memory leaks but instead ensuring that we don't get React complaining about setting state after the component is unmounted, which is pretty easy to repro. Thanks for the great comments!
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.
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?
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
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.
Snapshots get all the attributes indiscriminately. There is no indication of what parts of it are important, and what are not, nor any indication of what you are testing.
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
More on testing react and testing library please! :) Thanks for this!
You actually do not pronounce "Zustand" correctly, albeit you insist throughout the video in doing so numerous times 😀. Nevertheless, great content, i have recently started researching how to test my code, and, surprisingly, the web is very scarce in terms of good quality info on testing. Keep up the great work !
I really like the way you teaching about React and TypeSctipt stuff!!
Thanks!
Why so many people use useCallback wrapper for functions in simple components?
Most of the time it's unuseful, it creates function, initialize additional array of dependencies and adds memoizing.
This looks weird to optimize so simple functions (yes, components are just function)
So if component re-renders, it always create new function no matter of using useCallback, because your function will passed as callback to useCallback hook params, and recreates its instance only if dependencies changed, but, most of the time, useCallback with simple function as callback without dependencies works same as if you create just this new function without wrapping in useCallback. No profit here.
The profit is when you have more complex app with memo around components, useMemo for complex computation etc.
In common cases, using of useCallback is meaningless. It's pre-optimization, which creates additional entities (array, function, watchers etc) instead of just one function
thanks man ur really awesome
We need NodeJS+Typescript Testing
You just love pronouncing zuStand :))
Thanks a lot, it's amazing video :)
Thank you for this tutortial. It really helps
await waitfor can by replaced by findBy*
Hi Jack, Thank you so much for your tutorials. I would request you add a tutorial for material UI react testing. Thanks!
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 ?
Everything in nutshell. Thanks
Thanks for this really nice video with practical examples.
Testing React Context API would be great if included
Even after two years, it is very current, congratulations!
Wow 👏, this is really no BS..ad free, straight to the point 👏
very nice. Thanks for the video
Hello, let me show my gratitude, thanks so much for such an amazing job, quite practical aproach. Please continue doing videos like this.
Needed full series on react testing library with jest
I am angular developer which start explore react js, and I am consider your videos the most informative. Thank you for your content!!
Lol i like the thumbnail 🤭🤭
With new updates waitForNextUpdate is not needed, since react testing lib this function in-built now.
import { renderHook, act } from '@testing-library/react'
const { result } = renderHook(() => useCustomHook({ userId }))
act(() => result.current.login())
expect(result.current.hasLoggedIn).toEqual(true)
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.
Hi Jack, can you make a video tutorial on sorting react import automatically
An update for the API hook testing:
test("useAPI hook", async () => {
jest.spyOn(global, "fetch").mockImplementation(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ name: "Ebrahim" }),
})
);
const { result } = renderHook(() => useAPI());
await waitFor(() => expect(result.current).toEqual({ name: "Ebrahim" }));
});
what is the typeahead extension that you're using to autocomplete the line of code before it's been written?
GitHub Copilot,
Hi Jack, can we have a session on Redux Saga...
Amazing and very very complete video, and is short!!! Thanks for sharing !!
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! 😀
This is just awesome. With your help, I have a good grasp of what testing is.
I found it very helpful. Thank you Jack Herrington
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!
wow man... what a video!
Property 'waitForNextUpdate' does not exist on type 'RenderHookResult'.ts(2339)
What's the alternative to it?
Hey, Jack, thank you so much for that, i was try to test my hooks and well, this video make it so simple!
I'm getting this error: App.test.js: Support for the experimental sy
ntax 'jsx' isn't currently enabled
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! =)
Awesome, thank you from Brazil!
How can i write a test for hook passed by props in component and pass setHook in test
You test the component and that should test the hook.
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?
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 than best
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 for the video it's been really helpful. Could you also show how to test components that require the thunk middleware?
Hello Jack, thank you very much for all your Tutorials.
You are very welcome. Happy to have your views!
Wow.. just wowww
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
why you would use waitFor instead of findByRole (17:20)? Is there a difference?
thank you
Awesome
this is brilliant piece of knowledge you have shared here! Thank you!
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.
who noticed that special effect at th-cam.com/video/bvdHVxqjv80/w-d-xo.html and Jack I learn a lot from your videos, pls keep em coming, thx
I got error "a test was not wrapped in act(...)." event if I run it on act method. May be i have missed something? 🤣
thanks a ton
Thanks, you just solved my 3 hour work!
10/10 😉
this is fantastic. Well paced, clear and logical explanations. 100% quality teaching and nice to see that you enjoy it!
Thanks!
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.
Maybe it wasn't a thing when this video was released but I'm curious as to why you chose to use something like setup server instead of just mocking a return value for the get request
doesnt seem to work anymore, jest just throws "SyntaxError: Cannot use import statement outside a module"
Thank you so much for this. This is exactly what i'm looking for
Really Helpful and clean solutions. Thanks
Yesssss
Jack never failed to give awesome contents 👏
Been using this a lot the last 2 weeks on my current project
It's great, right? And MSW is super cool!
Such a great tutorial! Awesome, thank you so much.
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
This was really great! I’ve bought the book, thanks! ❤️
That was great. Please add example when add axios or wrap axios to custom method.
I've read the "isMounted" variable doesn't actually prevent against memory leaks, which is the end goal of the flag and preventing setData() from getting called. I've also seen first handed MSW library cause memory leaks in tests. Is there a reason to use MSW over nock or some other mocking framework over MSW - specific features??
I haven't seen MSW leaks, but that doesn't mean they don't exist. The value to me of MSW is that it's the lightest possible touch in terms of mocking. Outside of just running MSW there is no change to the production code.
As for isMounted, I'm not using it to protect against memory leaks but instead ensuring that we don't get React complaining about setting state after the component is unmounted, which is pretty easy to repro.
Thanks for the great comments!
Great stuff! Is fireEvent better than user? Also for orgState why not grab current state before each test?
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?!
Feels like I have been consuming content for years to stumble upon this gem
Jack I've heard that if you premiere a video on TH-cam, right after the premiere in done, for 1 hours, views won't be counted. Please confirm on that
That sounds bad. I haven't heard that. I can't imagine why that would be the case, but maybe it is.
Thanks best content of react and typescript!
Thank you so much for your amazing content, i really would like to see your channel growing. Keep up the good work 👏👏👏
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.
This is such a good tutorial for testing. Thank you for your amazing work!
Please you make your video slow so, we can more focus on and your videos is so great but this one is issue.
Just a quick question do we need a ts-jest transformer ?
Excellent for newbies and as a refresher! Thanks!
Do you have a video for testing an rtk query endpoint?
No BS TS is such a good title for the book!
Thanks for the awesome tutorial!
awesome explanation and methodology
.
Really nice video, thanks a lot! Covers a lot in a really easy to digest format
OMG 😍 thank you... Again.
Great video! Is there any meaningful difference between resetting the Zustand store on beforeEach vs afterEach?
I don't think so.
This here is quality content! Thank you!
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?
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
Please keep up. This video is awesome.
nice thumbnail. jacky
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
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.
How snapshot is different from this one ?
Snapshots get all the attributes indiscriminately. There is no indication of what parts of it are important, and what are not, nor any indication of what you are testing.
@@jherr okay thanks 😊
great content as always, loved zustand.
You're a lifesaver man!