JavaScript Mocking Fundamentals

Intro to JavaScript Mocking Fundamentals 

Instructor: [0:00] All right. Mocking. This is a big subject and people can find it to be pretty confusing. I'm excited to teach you about it. With this one, we're going to be taking Jest mock functionality and comparing it to how we would implement that in user land if we were just going to implement it in node. This will hopefully give you some good insight into how it works.

[0:21] The general idea behind mocking is you've got this module that's doing something. You want to test it, but this module is using another module that's doing something that maybe it's sending a request to a credit card payment processing company. You don't have a big enough credit limit or something. You don't want to charge yourself when you're running your test, right?

[0:40] We're going to mock out that module that's making the credit card payment processing request, so that it doesn't do that when you're running your test. Then you want to write some test around it to make sure that you're using that module properly. The idea behind mocking it can be a little bit confusing. Let's take a look at the project here.

[1:01] Here, we're going to mostly be working in the /src directory. The thing that we're trying to test is this thumbWar module, which is taking a player1 and a player2 and then calling this getWinner on three games. Numbers to win is two, so best two out of three in determining who is going to be the winner of this game.

[1:21] It's using this really sophisticated algorithm in this utils, which actually is not sophisticated at all. Just an example. The idea here is we want to mock out the getWinner function. There are various ways to do this and we start out by simply monkey-patching and then we become a little bit more sophisticated and advanced.

[1:40] The way that we get this done is we have our Jest test in here and then we have our no framework test in here. We start out in the Jest test here and then we go to the no framework side and try to implement those same features that we have in Jest without a framework. You get an idea of how the framework is doing what it's doing.

[2:01] The way that this is all working, it's just interesting is we have this other directory where we create a custom runner so that we run our code just a node without Jest installed. It's interesting to dive into, so feel free to inspect that and play around with that a little bit. Jest is a really powerful tool, so it allows us to do that. For our regular Jest test, those are just regular Jest configuration stuff going on here.

[2:24] I hope you enjoyed this module. Even though what we're doing in node land without Jest is not what Jest is doing at all because Jest is in total control of the module system when it's running your test, it's enlightening to see how this might be working if we were to implement it ourselves.

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.

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

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.

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

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.

Intro to JavaScript Mocking Fundamentals

Transcript

Intro to JavaScript Mocking Fundamentals