JavaScript Testing Practices and Principles

Asserting Calling a Mock Solution

Kent C. Dodds

Kent C. Dodds

Professional Trainer
JavaScript Testing Practices and Principles

Check out a free preview of the full JavaScript Testing Practices and Principles course

The "Asserting Calling a Mock Solution" Lesson is part of the full, JavaScript Testing Practices and Principles course featured in this preview video. Here's what you'd learn in this lesson:

After coding the solution for the mock function to keep track of how it is called and to add an assertion for it, Kent introduces the next exercise with the goal of implementing jest.spyOn.


Transcript from the "Asserting Calling a Mock Solution" Lesson

>> Kent C. Dodds: Let's go ahead and keep track of when this is called so we can make assertions on how it was called. So the first thing that I'm gonna do is I'll say utils.getWinner.mock = this object as it calls array on it. I'll show you, we can do that all in one line.

And then we'll turn this arrow function into an arrow function with a body. And we'll just push on to that array every single time it's called. So we'll say utils.getWinner.mock.calls.push. We want to push all the arguments. So what I'm gonna do is we'll make args. And then push(args), and then we'll return args at 1.

There are various ways that you could do that, but I kinda like the way that reads, so great. So now, if we console.log(utils.getWinner.mock.calls), after this thumbWar was called. Then we'll get that printed out. Awesome, so we just need to assert this. We could do this a couple of different ways.

Actually, I think in my solution, I iterate over the calls and make an assertion for each one of those. It's just something occurred to me, that I could actually do this, expect toEqual, and that indicates hey so it's called twice and it's called with exactly that. Alternatively, actually I'll just show you the solution for the alternative.

I say that calls has a length two and every single time it's called it's called with that. So either one works just as well, gives you just as much confidence so. Good with that.
>> Speaker 2: Kent?
>> Kent C. Dodds: Yes?
>> Speaker 2: So the JavaScript on this one really throws me, so I wonder if you can put some words behind so.

So here's my question, line 10 we're assigning utils, the getWinner property of utils to be a function. Line 4, well not sure why-
>> Kent C. Dodds: Yeah, sorry, they're relative. Here let me, answer mode.
>> Speaker 2: Line 14 we're assigning getWinner to have a property to be a JavaScript object that has a property of mock.

So help me understand how getWinner can be a function and also have a property.
>> Kent C. Dodds: Yeah, so functions are first class objects in JavaScript. So they can have properties and that's, trying to think of a good example of that. For example, expect is a function but we also have those asymmetrical matrix.

So expect.any(String) like we had in the,
>> Kent C. Dodds: Example of matching schema. So expect is a function but it's a function that has properties. And you can put any number of properties on functions that you want. Pretty handy feature, I use it pretty often.
>> Kent C. Dodds: Other questions?
>> Kent C. Dodds: Sweet, so let's look at this next situation.

So what, awe man. I accidentally lost our, keeping track of the times it's called, sorry about that. Right, let's just pretend that that's still part of our assertions. One thing that is kind of annoying about what we have right here is having to keep track of the original getWinner and then restoring that ourselves.

And also all of this code, if we had to do this every single time we wanted a mock function, that would be kind of annoying. And so instead we're going to use just.SpyOn to do this. So when you're implementing this one go ahead and pull your original assertion over, your previous assertion over to this because what we implemented is actually the same kind of API that jest.spyOn supports.

But other than that, yeah, try to swap this implementation for jest.spyOn and yeah, and then mockRestore.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now