This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Testing Custom Hooks" Lesson
[00:00:00]
>> All right, we're gonna test our custom hook next. So let's make a new file here. It's gonna be called usebreedList.test.JS. We're gonna need that, bring that pragma over, that's a color pragma. It's like a comment at the top that means that something's special. Import, expect, and test from up @jest/global.
[00:00:40] Import render from @testinglibrary/react. And import useBreedList from ../useBreedList. So I wanna write a tests that test to make sure that useBreedList works correctly. The problem with that breedList is that it has a hook, right? Hooks can only run inside of react components. So how do we test that?
[00:01:19] Well, we're gonna make a fake react component. So I'm gonna write a function here that says, getBreedList. And it's gonna take an animal. Say Let List, Function TestComponent. List is gonna be equal to useBreedList with animal. And then it's just gonna return null. React components that return null just don't render anything, right, which that's a valid thing to return in react.
[00:02:05] I'm gonna render TestComponent, And then I'm gonna return List. So now I have this function that I can call, that basically renders a dummy component, runs a custom hook in there, pulls that out and returns it. We're very much dangerously toeing the line of, we're testing implementation details now, right?
[00:02:33] But I also argue that testing your custom hook is a valid thing to do. And this is the only way that we can get something out of a hook. So let's write a test that uses that, gives an empty List with no animal. A sink blah is equals that, const breedList status equals getBreedList with nothing, right, we're not gonna give it anything, expect breedList toHaveLength 0.
[00:03:18] And expect status toBe unloaded. That passes. So again, I grant you, this is very strange. In fact, there's a way easier way to do this. I had to do it the hard way to just see that, I'm gonna show you a little tester thing that we can do, our little tester library that we can use.
[00:03:55] That basically does this for you under the hood, but it just hides all the implementation details for you. So stop your tests here for just a second and I want you to npm install -D. This is testing-Library/react-hooks@7.0.2. Okay, this is just a little tiny helper that does exactly what we just did for us.
[00:04:30] Okay and then we can put back on here npm run test go and watch to get that back. And I'll just minimize that for a second. Okay, and then here, we're gonna get render hook and we're gonna get that from react dash hook. So this is another little tester helper function that we can do specifically for a custom hook.
[00:04:53] So you can delete all of this get read list stuff. Deleting code is my favorite thing. Okay, and then you just have to do basically const result equals renderhook, and you give it a function, That it's going to run inside of a react context. So use BreedList with nothing or empty string, either one of those, that's fine.
[00:05:30] And then here we'll just say const breedList, comma status, =result. Result is not inferable. Result.current, sorry. There we go. That's got a lot easier to read, right? You don't have to have that entire helper function that we are gonna have to maintain. So basically this is just going to be run inside of a react component context so that all this stuff can happen.
[00:06:17] And then it's gonna give you back a result, you're gonna pull out a result.current. Whatever you expect it to get out of that hook, this is a really nice helper function for testing react hooks. Cool, any questions about that? One of the points of making your own custom hooks is that this is testable now, right?
[00:06:38] We can pull them out and test them really well. So if you're making custom hooks, you shouldn't write tests for them.