With our current usage of the mock function, we have to manually keep track of the original implementation so we can clean up after ourselves to keep our tests idempotent. Let’s see how jest.spyOn can help us avoid the bookkeeping and simplify our situation.

JavaScript Mocking Fundamentals

Restore the Original Implementation of a Mocked JavaScript Function with jest.spyOn

Having to keep track of the `originalGetWinner` and restoring it at the end of our test is annoying.
Jest exposes another utility that we can use to simplify this.
We can run `jest.spyOn` and pass `utils` as the object and `'getWinner'` as the method.

### spy.js
```javascript
test('returns winner', () => {
  jest.spyOn(utils, 'getWinner')
  const originalGetWinner = utils.getWinner
  utils.getWinner = jest.fn((p1, p2) => p2)

  ...
```

With this, we no longer need to keep track of the `originalGetWinner`.
Instead, we can say, `utils.getWinner.mockRestore()`
The `.spyOn` method will replace the `getWinner` on utils with an empty mock function.

```javascript
test('returns winner', () => {
  jest.spyOn(utils, 'getWinner')
  utils.getWinner = jest.fn((p1, p2) => p2)

  ...

  // cleanup
  utils.getWinner.mockRestore()
```

We have a specific implementation that we want to use for our mock function.
Mock functions have an additional method on them called `mockImplementation`.

Here, we can pass the `mockImplementation` we want to be applied. With this, our tests are still passing.
We can use all the regular assertions from Jest that we like.

```javascript
test('returns winner', () => {
  jest.spyOn(utils, 'getWinner')
  utils.getWinner.mockImplementation((p1, p2) => p2)
```

Let's see how we could implement this ourselves. First of all, let's get rid of this `originalGetWinner`.
We'll get rid of that down here below as well. We'll call `mockRestore`.

Here, we'll call a `.spyOn` function that we'll write. We'll pass in `utils` and `getWinner`.
Then we can say, `utils.getWinner.mockImplementation` and pass our `mockImplementation`.

```javascript
// removed const originalGetWinner = utils.getWinner
spyOn(utils, 'getWinner')
utils.getWinner.mockImplementation((p1, p2) => p2)

...

// cleanup
utils.getWinner.mockRestore()
```

Let's implement this `.spyOn` function that's going to take an `obj` and a `prop`.
Then we'll get `const originalValue = obj[prop]`. We'll then set `obj[prop]` with a mock function.

With this API, we also need to provide a default implementation.
We'll make that be an empty arrow function.

```javascript
function fn(impl = () => {}) {...}

function spyOn(obj, prop) {
  const originalValue = obj[prop]
  obj[prop] = fn()
}
```

Then we'll add object at that `obj[prop].mockRestore` equals an arrow
function that simply sets `=> (obj[prop] = originalValue)`.

```javascript
function spyOn(obj, prop) {
  const originalValue = obj[prop]
  obj[prop] = fn()
  obj[prop].mockRestore = () => (obj[prop] = originalValue)
}
```

Next, let's go ahead and add `mockFn.mockImplementation`, which will be an arrow function that accepts a
`newImpl` and assigns `impl` to that `newImpl`. With that, our tests are passing.

```javascript
function fn(impl = () => {}) {
  const mockFn = (...args) => {
    mockFn.mock.calls.push(args)
    return impl(...args)
  }
  mockFn.mock = {calls: []}
  mockFn.mockImplementation = newImpl => (impl = newImpl)
  return mockFn
}
```

In review, our `spyOn` function takes an object and a prop. It is responsible for tracking the `originalValue`.
Then it provides a `mockRestore` function, which we can use to restore the `originalValue` to that object.

```javascript
function spyOn(obj, prop) {
  const originalValue = obj[prop]
  obj[prop] = fn()
  obj[prop].mockRestore = () => (obj[prop] = originalValue)
}
```

We also added this `mockImplementation` to our mock function factory `fn()` so we could continue to mock our
implementation so that our tests can be deterministic.

When running unit tests, you don’t want to actually make network requests or charge real credit cards. That could… get expensive… and also very, very slow. So instead of running your code exactly as it would run in production, you can modify how some of your JavaScript modules and functions work during tests to avoid test unreliability (flakiness) and improve the speed of your tests. This kind of modification can come in the form of stubs, mocks, or generally: “test doubles.”

There are some great libraries and abstractions for mocking your JavaScript modules during tests. 

 has great mocking capabilities built-in for 

. To really understand how things are working though, let’s implement some of these features ourselves.

Intro to JavaScript Mocking Fundamentals 

Mocking allows our tests to be deterministic and ensure that we will get the expected result every time.

The most naïve approach to mocking in JavaScript is to override an object’s properties in the test. This is pretty simple and straightforward, but also fairly limited. In this lesson, we’ll monkey patch our `getWinner` function to always return the same winner every time the function is called. After the test is run, we’ll clean up the mock and assign the original function implementation back to `getWinner`.

Override Object Properties to Mock with Monkey-patching in JavaScript

Often when writing JavaScript tests and mocking dependencies, you’ll want to verify that the function was called correctly. That requires keeping track of how often the function was called and what arguments it was called with. That way we can make assertions on how many times it was called and ensure it was called with the right arguments.

Ensure Functions are Called Correctly with JavaScript Mocks

So far we’re still basically monkey-patching the utils module which is fine, but could lead to problems in the future, especially if we want to mock a ESModule export which doesn’t allow this kind of monkey-patching on exports. Instead, let’s mock the entire module so when our test subject requires the file they get our mocked version instead.

Mock a JavaScript module in a test

Often you’ll want to mock the same file throughout all the tests in your codebase. So let’s make a shared mock file in Jest's `__mocks__` directory which Jest can load for us automatically.

Restore the Original Implementation of a Mocked JavaScript Function with jest.spyOn

Transcript

Restore the Original Implementation of a Mocked JavaScript Function with jest.spyOn