Jasmine JS: A From-Scratch Tutorial to Start Testing

Although the benefits of having automated tests are well known, setting up any new test framework can be bewildering and…

By Testim,

Although the benefits of having automated tests are well known, setting up any new test framework can be bewildering and time consuming. If you’re writing JavaScript, a language that lies somewhere in the middle between object-oriented and functional programming, understanding what to test can be hard too. This tutorial will explain the basics of testing with Jasmine JS and get you started writing tests before you can say “console log hello world!”

Before we start testing, let’s take a look at the Jasmine framework.

What Is Jasmine JS?

Jasmine is a framework for unit testing JavaScript. It’s open source and has nearly 15,000 stars on GitHub. Its popularity among developers means that it has a strong community and documentation available when you get stuck. Angular developers especially favor Jasmine because Jasmine is included natively in Angular projects.

Jasmine’s value proposition is that it’s easy to set up and that it’s easy to write tests. That’s great news for us, because next we’re going to dive into setting up Jasmine!

Setting up Jasmine

Before we do the work of setup, let’s cover the principles of setting up Jasmine. This is what we’re going to do at a high level:

  • Give your code to access to Jasmine, downloading it manually or with a package manager
  • Initialize Jasmine
  • Create a spec (test) file
  • Make the source code available to your spec file

Then we’re ready to test! Don’t worry—we’ll walk through the details of how to set up Jasmine first.

Download and Set Up Jasmine

When we use the standalone version of Jasmine, we download it and manually place it in the project. This way of starting up is great if you just want to see how it all works.

Start by downloading a distribution from the Jasmine releases page.

Jasmine download page

Then create a new directory and create a new subdirectory called Jasmine.

Move the Jasmine release zip to first-jasmine-project/jasmine and unpack it there.

So your file structure should look like this:

File structure

Drag SpecRunner.html to a web browser. Voila! You have Jasmine tests.

Your first test output

OK, they aren’t your tests, but at least they’re working.

Open up your favorite code editor (I’m using Visual Studio Code), and take a look at SpecRunner.html. There’s a section for specs (lines 19–20) and a section for source code (lines 15–16). Everything is linked here, so all we have to do to test our own code is link to our own test files and code files from here.


Next, navigate back up to your project root (first-jasmine-project). Create an src folder, and create a new file called helloWorld.js with the following function:

Then create a spec folder in the project root and create a new test file called helloWorldSpec.js. Put the following in the code.

Note the describe, it, and expect statements. Every Jasmine test uses these!

Now update the spec runner to have links to helloWorld.js and helloWorldSpec.js.

Drag the spec runner into your browser to see your test run—and pass!

Passing test

Now that you know how to run your own tests using the standalone Jasmine distribution, you’re really rolling. The next bit will cover another way to set up Jasmine using NPM, or you can skip ahead to learn about Jasmine tests.

Set up Jasmine With NPM

Instead of manually downloading the Jasmine distribution, we can use Node Package Manager (NPM). NPM handles keeping track of what version of our package we’re using and makes it really simple to install packages.

Steps to Set up Jasmine With NPM

In your terminal, navigate into your project. If you’re using the same project as above, delete your entire first-jasmine-project/jasmine directory. From the root of first-jasmine-project, do the following:

Install Jasmine. NPM handles getting the most recent version of the Jasmine package and puts a copy in your node_modules folder.

Initialize Jasmine. This will generate a support/jasmine.json within spec that lets Jasmine know where to look for tests.

Now run tests by simply running jasmine in the command line, instead of using the specRunner.html.

The tests will run in the terminal. The test should fail because it can’t find the code for helloWorld().

To make the test pass, let’s export the code so we can use it in the test file. Back in src/helloWorld.js:

Now, go back to the spec file and tell Jasmine where to look for the code. In helloWorld.spec.js require src/helloWorld.js.

Now run the tests again. They should pass!

Check out the Jasmine docs to set up Jasmine for Ruby or Jasmine for Python.

Next we’ll explore Jasmine’s test suite.

Anatomy of a Jasmine Test Suite

Now that we know how to set up Jasmine, let’s understand what’s in a Jasmine test.

Spec Files

Jasmine tests are split into specs (test files). It’s up to you how to organize your test files. You can tell Jasmine where to search for the test files in spec/support/jasmine.json, which gets generated when you run jasmine init.


Describe Blocks

Within a spec file, Jasmine uses describe blocks to help you organize your tests. A describe block is a wrapper in which you can write the subject of the current set of tests. You can nest describe blocks as much as you want.

It Statements

It statements tell us what it (the unit being tested) should be doing. For our calculator example above, in myService, the method add should return the sum of two numbers. You can put as many it statements in each describe block as you want.


Jasmine uses Expectations to set up comparisons between two things. I expect add(1,1) to be 2. If the function returns something other than 2, the test fails. You can put as many Expectations in each it statement as you want.


Compare a value from your code with an expected value using a boolean matcher. ToBe is one of the most common matchers. A full list of Jasmine matchers are here. You can also customize your matchers.

Now that we know what makes up Jasmine tests, let’s briefly dive into Jasmine’s implementation of one of the most important unit test concepts: spies.

Jasmine Spies

Unit testing is easy when your methods have no external dependencies. But what if they do? Jasmine’s solution is spies. When you call an outside method from the function you’re testing, you can tell the test to do something else instead. This allows you to control what external methods return and to check how many times the methods are called.

An Example With a Spy

The method calculate calls an outside method, isAddition, which will return true or false. If it returns true, calculate will return the sum of two numbers.

The Test

In the test for calculate, we tell Jasmine to spy on the outside method. That way we can control what isAddition returns during the test and test how calculate reacts to each return value.

Understanding spies will be extremely useful as you test more complicated applications.

Next Steps

Now you know how to set up Jasmine, the components of a Jasmine test suite, and the basic syntax to write unit tests for your JavaScript project. Before you know it, with a little practice, writing tests will feel like second nature. And in the meantime, don’t forget to explore other kinds of tests too!

This post was written by Jess Campbell. Jess is a software developer and consultant in Ann Arbor, MI. Jess has worked on many sides of software product development, spanning Photoshop contracting, web and mobile design, UX, front end, and full-stack development. She specializes in helping clients identify business problems that can be solved with high quality software.

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