Justifying and Realizing a Strong ROI on Test Automation Sign up now

Sinon JS Tutorial: A Beginner’s Guide to Mocking

The Testim blog has been publishing a lot of posts about JavaScript testing related concepts and tools. We've covered Jest…

By Testim,

The Testim blog has been publishing a lot of posts about JavaScript testing related concepts and tools. We’ve covered Jest testing, Cucumber.js, and load testing with Artillery, among many other topics. Today, we carry on with the trend by covering yet another JavaScript testing-related tool: Sinon JS.

Sinon JS is a popular JavaScript library that lets you replace complicated parts of your code that are hard to test for “placeholders,” so you can keep your unit tests fast and deterministic, as they should be.

If the line above didn’t make much sense, there’s no reason to despair, since we’ll explain what these placeholders are and why we need them before getting to the tutorial. Let’s get started.

Sinon JS: An Intro

As promised, we start with an overview of Sinon JS. But to be able to understand what this tool is and why it’s useful, you first have to understand what test doubles are and the role they play in unit testing, so let’s start with that.

The Importance of Test Doubles in Unit Testing

To understand what test doubles are and why they matter, you must understand unit testing and the main difference between it and other types of testing—such as integration or end-to-end testing.

Unit Tests Can’t Play Outside

Whenever I have to explain what unit tests are, I like to resort to Michael Feather’s definition, which I really like because it’s a negative definition in a way: it explains what unit tests are not.

A test is not a unit test if:

  • It talks to the database
  • It communicates across the network
  • It touches the file system
  • It can’t run at the same time as any of your other unit tests
  • You have to do special things to your environment (such as editing config files) to run it.

In other words, we can say that unit tests can’t have side-effects. Of course, there are reasons for that. By making our tests neither consume nor create side-effects, we can have fast tests (since they don’t do I/O) that are also deterministic (the tested functions always return the same result for the same input) and can be run concurrently.

Test Doubles to the Rescue

That’s where the concept of test doubles comes in handy. “Test double” is the generic term for an object or procedure you use to replace a real object or procedure that’s hard to test. The test double looks and behaves as if it was the real thing, but without incurring any side-effects whatsoever. The code that interacts with the double is none the wiser and “thinks” it’s dealing with the real thing.

Confusing? Don’t worry. Examples will come and make things clearer.

The Different Types of Testing Doubles

There are several types of test doubles, mocks and stubs being the most well-known. Even though people often use the terms interchangeably, they’re not the same thing.

Here’s a list of the main types of test doubles, as defined by Gerard Meszaros (author of the book XUnit Testing Patterns) and shared by Martin Fowler:

  • Dummy objects are passed around but never actually used. Usually they are just used to fill parameter lists.
  • Fake objects actually have working implementations, but usually take some shortcut which makes them not suitable for production (an in memory database is a good example).
  • Stubs provide canned answers to calls made during the test, usually not responding at all to anything outside what’s programmed in for the test.
  • Spies are stubs that also record some information based on how they were called. One form of this might be an email service that records how many messages it was sent.
  • Mocks are what we are talking about here: objects pre-programmed with expectations which form a specification of the calls they are expected to receive.

Test Doubles in JavaScript? Say Hello to Sinon JS

SinonJS is a JavaScript library that provides standalone test spies, stubs, and mocks. It’s very flexible and easy to use since you can combine it with any testing framework. For this post, we’re using Mocha.

Time for Our Sinon JS Tutorial

With the theory and fundamentals out of the way, we’re finally ready for our Sinon JS tutorial. We’ll start by installing the necessary tools. For starters, you’re going to need Node.js, since we’re using npm to install the tools we need. So, if you don’t already have it, go ahead and download and install Node.js so you can follow the tutorial.

Installing Mocha

Node.js installed? Great, let’s continue. The first tool we’re going to install is Mocha. Open your terminal and execute the following command:

As you can see, we’ve used the “-g” option. That means that we want npm to install mocha globally—instead of just for a single product—so we can access it via the command line. To check if the installation was successful, run this:

That should return the current version, which, by the time of this writing, is 6.2.2. Now, let’s create a directory for our sample project:

Let’s enter the directory, initiate the new project, and add mocha to it:

Creating Our First Mocha Test

Now we’re ready to create a simple test just to get a taste of how to work with Mocha. Create a directory called test and place a new file inside it called first.js. Open first.js and paste the following content on it:

As you can see, our test is super simple. It just checks whether two plus two is four. You run the test simply by running mocha. By default, Mocha looks for tests inside a test named test. Since we’re following that convention, no additional action is required. If everything went right, that’s what you’ll see:

sinon js tutorial

Let’s now change the test, so it fails, just to see how that looks like. Go back to the test and replace the four with any other number. Then save the file and run the test again. This is my result:

sinon js tutorial

Installing SinonJS and Creating an “Untestable” Function

It’s now finally the time to install SinonJS. Run the following command:

After the installation is completed, we’re going to create a function to test. Go to the root of the project, and create a file called greeter.js and paste the following content on it:

What this function does is something very simple: after receiving a name, it returns a string in which it greets the person and informs the current day. So, that’s what I get when I pass my name to it:

Wouldn’t it be great if we could test this function? Yes, of course. But currently, we can’t, since it depends on the current time. How do we test it, then?

Putting Sinon to Work

We’re going to use SinonJS for that. By providing a “fake” current time, we’ll be able to check if the function works properly. The test is going to be fast and deterministic, as unit tests ought to be. It also won’t rely on any external volatile dependence. So, let’s get to it.

First of all, we’re going to make some small changes to our greeter.js file, so the function can be exported. Go there and replace its content with this:

Now, let’s change our test. Go back to test/first.js, and replace its content with the code below:

Save and run the test again. It will fail (unless it’s actually March 15, 2020, when you’re reading this.) Here is how it looks like to me:

sinon js tutorial

To make this test pass, we need a way to pretend we’re on a different day. Can SinonJS help us with that? You bet it can!

Let’s change the test file again, so it looks like this:

The changes were minimal. First, right at the start of the file, we require Sinon, in order to use it afterward. In the test method, just before the assertion, we call the “useFakeTimers” function, passing March 15, 2020, as the date. Remember that in JavaScript, months start in zero, so March is number two instead of the expected three.

After the assertion, we restore the clock, so the time can go back to normal and not affect the other test cases. Easy, right? Now let’s run the test to see it passing:

sinon js tutorial

Fake It ‘Til You Make It

Automated testing is crucial for writing high-quality apps, and unit tests are one of the most important types of tests you can use.

However, unit testing real, complex applications isn’t always easy. Useful code consumes and/or generates side-effects, takes dependencies on environmental data—like the current time or the current locale—and so on. In order to solve these problems, we use test doubles.

This post was a brief introduction to using test doubles/fakes/mocks in JavaScript. Despite being a very simple tutorial, you now have a good understanding of the principles and motivations behind using test doubles. You also have a working SinonJS environment, which you can use to practice and learn more.

Also, stay tuned to this blog, since we’ll continue publishing interesting articles about testing-related subjects. Thanks for reading, and we’ll see you next time.

This post was written by Carlos Schults. Carlos is a .NET software developer with experience in both desktop and web development, and he’s now trying his hand at mobile. He has a passion for writing clean and concise code, and he’s interested in practices that help you improve app health, such as code review, automated testing, and continuous build.

Testim's latest articles, right in your inbox.

From our latest feature releases, to the way it impacts the businesses of our clients, follow the evolution of our product

Blog Subscribe