Custom Assertions with Jest's Expect Library
00:00 All right, let's extend expect with a custom assertion called to have redirect and this is going to take a response and a redirect too. Let's also get our types going in here.
00:16 Here's our template that we're going to have this called to have redirect and it's going to accept a response and a redirect too, but the first argument in your matcher is not represented in this type.
00:29 We don't actually really get a certain known type for the expect because you can pass anything to expect. That's how the expect assertion library works. So we only type the second argument and it's redirect to and that's a string.
00:45 And then we can actually update this. We'll just update this one, expect the response to have redirect. There it is. We get autocomplete. Beautiful. Love that. And so now this is complaining because we're not returning anything here.
01:03 Let's return pass is false and message is ahhh. And maybe let's do the function form of that. And there it is. There's our error. So let's actually determine what the error is.
01:19 Let's get the location from the response. Response headers get location. And then if the location is equal to the redirect to, then we're good. So if I save this, we should not get an error and that works out great. Now let's see what happens when we do get an error.
01:38 So I'll make a little typo, githubs, there we go. And we get that error. So we'll come over here and give a nicer error message for that.
01:49 So we'll say we expected response to redirect to, redirect to, redirect to, but got the location. There we go.
02:06 And that gives us expected response to redirect to onboarding githubs, but got onboarding github. All right, that is correct. We can improve this even further by saying this.utils.print expected. This is our expected thing. And then this.utils.print received.
02:26 Here's our received thing. And now we'll get some highlighting there as well. So that's what we expected in green and that's what we received in red. I am so sorry for those of you who are colorblind. That is just a really unfortunate decision there, sorry. So that does it for this.
02:45 Things can get way more complicated, like really, really complicated because you can have a not on here where you say, oh, I want it to be the opposite of this thing. And it does actually work. But if we have this, now these two are the same.
03:03 We said we want them to not be the same. And here it says expected response to redirect to onboarding github, but got onboarding github. That error message doesn't make any sense because that is what they are. And so now we have to consider that in our message.
03:19 And you can do that with this.is not and then branch off of that. But your error messages get really wonky and funny looking. But I invite you to go ahead and expand this to be a really full-featured thing. Kelly is going to do that for us, and so you can feel free to reference what Kelly does
03:38 and compare that with what you've done. And then also take the other assertions that we've got in here and make custom assertions for those. And then finally, I think it makes sense to move these custom assertions somewhere else. So you can make a custom assertions or custom matchers file in the test util directory and
03:58 reference that in the setup. And then you'll have it all over in every one of your tests. So extending expects is definitely useful, especially in a code base. We've got lots of co-workers working on it so that you can have really custom, fine-tuned assertions. And, yeah, you can take this to the next level. So feel free to do that.
04:17 Have a good time if you do, and we'll see you on the other side.