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

The "Using Jest spyOn" 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:

Kent codes the solution to Jest spyOn, which allows the user to keep track of when existing functions are called and mock their implementations.

Preview
Close

Transcript from the "Using Jest spyOn" Lesson

[00:00:00]
>> Speaker 1: Sweet, so let's go ahead and swap ourselves over to spy on. So I neglected to switch us over to the right test, so hopefully that wasn't too much of a struggle. I`ll hit P thumb-war.3.todo and then we're gonna actually just get rid of this entirely. Then I'm gonna say swap that with jest.spyOn/utils, 'getWinner').

[00:00:30]
So I wanna say take this object and swap the getWinner property on it with a mock function. But actually it just kind of wraps the existing function. It's still going to continue to call the underlying function. And in our case, we wanna mock that entirely. It's making a network call or whatever it's doing.

[00:00:50]
And so now that that getWinner is a mock function, it has a bunch of properties on it and one of those is the mockImplementation property. So we'll say mockImplementation. We'll pass our mockImplementation to it. And now, instead of calling the actual implementation or call a fake one. And then instead of here, we no longer need to keep track of the original, we can say utils.getWinner.mockRestore.

[00:01:21]
And everything should still be working. Let me go back and grab this assertion, sorry, I missed out on that. But that should still function as it had before.
>> Speaker 1: Any questions?
>> Speaker 1: All right, cool, so the next thing that we're going to do.
>> Speaker 1: That solves the problem we talked about earlier.

[00:01:50]
So right now even with this jest.spyOn utils. Jest is now the one responsible for modifying this utils objects. But it's not really an object it's more of a namespace, an import namespace. And modifying things on an import name space is a bad idea, it doesn't work with this spec.

[00:02:09]
And so we need to change this and jest actually has a mechanism for doing that built-in called jest.mock. And I've got just a little example of what that looks like It's a relative to this file, relative to the module we wanna mock. So spoiler alert, and then what we want that module to look like.

[00:02:33]
So a function that returns what we want that module to look like. If we were to inline that module right here what would it look like? We're going to swap out our existing stuff with this api and now we're no longer busting the US modules stuff. We're just using jest to accomplish our purposes here.

[00:02:55]
I'll explain a little bit more of how it jest does what it's doing after our exercise. But for now I think you should have everything you need to be successful here.
>> Speaker 1: So let's go ahead and I will hit the P key, thumb-war.4.todo. Get these tests running.

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