CodeNewbie Community 🌱

Cover image for How to Start Unit Testing with Jasmine
Marcin Wosinek
Marcin Wosinek

Posted on • Originally published at how-to.dev

How to Start Unit Testing with Jasmine

In my previous article, I showed pseudocode examples of unit testing pure functions. In response to that article, I got an excellent question—so how do I start testing my code then? Let’s take a more practical look at the same, simple case for testing.

Get the codebase

I prepared a repository with the example code. The main content is pure-functions.js:

export function greet(name, surname) {
  return `Hello ${name} ${surname}!`;
}

export function calculateDiscountedPrice(originalPrice, discount) {
  return originalPrice - originalPrice * discount;
}

export function power(base, exponent) {
  return base ** exponent;
}
Enter fullscreen mode Exit fullscreen mode

As you can see, the code is simple.

Gotcha if you create a new package locally

If you want to copy the code file instead of the whole repository, then there is one gotcha. You will need to:

  1. Generate a package with:
$ npm init
Enter fullscreen mode Exit fullscreen mode

So, your node dependencies are installed in the current folder.

  1. Switch the code to be module, by adding to package.json:
{
  …
  "type": "module",
  …
}
Enter fullscreen mode Exit fullscreen mode

You can see how it’s done in my repo

Install Jasmine

The code we are going to test will work the same way on browser or Node. For simplicity, let’s test it on Node. First, we need to install Jasmine. To do so, let’s follow the official documentation:

$ npm install --save-dev jasmine #1

$ npx jasmine init #2
Enter fullscreen mode Exit fullscreen mode

The commands perform the following functions:

  1. Install Jasmine as development dependency
  2. Generate the basic configuration in spec/support/jasmine.json:
{
  "spec_dir": "spec",
  "spec_files": [
    "**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "random": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Lastly, let’s update package.json to configure the testing command:

{
  …
  "scripts": {
    "test": "jasmine"
  },
  …
}
Enter fullscreen mode Exit fullscreen mode

Running (no) tests

At this point, you should have completed all the necessary configuration, and not a single test in place. Let’s see if it works as expected:

$ npm test

> how-to-unit-test@1.0.0 test
> jasmine

Randomized with seed 10285
Started


No specs found
Finished in 0.002 seconds
Incomplete: No specs found
Randomized with seed 10285 (jasmine --random=true --seed=10285)
Enter fullscreen mode Exit fullscreen mode

Example test

Let’s add a simple test. We will create a new file ./spec/pure-functions.spec.js that matches the Jasmine convention:

  • it’s inside ./spec folder—following what is set in this line of the generated configuration: "spec_dir": "spec",
  • it ends with spec.js—another naming pattern established in "spec_files": ["**/*[sS]pec.?(m)js"

Code that goes inside ./spec/pure-functions.spec.js:

import { greet } from "../pure-functions.js";

describe("greet", () => {
  it("should greet by name & surname", () => {
    expect(greet("Lorem", "Ipsum")).toEqual("Hello Lorem Ipsum!");
  });
});
Enter fullscreen mode Exit fullscreen mode

Code:

  • import { greet } from "../pure-functions.js";—gets the function from our source code. This line wouldn’t work as expect without "type": "module", in package.json.
  • describe("", <callback>)—wraps related tests for better error messages.
  • it("", <callback>)—an individual test,
  • expect(<value>).<matcher>(<arguments>);—it’s how we set expectations in Jasmine. You can find matchers in the documentation.

Run!

This test running:

$ npm run test

> how-to-unit-test@1.0.0 test
> jasmine

Randomized with seed 09863
Started
.


1 spec, 0 failures
Finished in 0.004 seconds
Randomized with seed 09863 (jasmine --random=true --seed=09863)
Enter fullscreen mode Exit fullscreen mode

Final code

You can find my final code here.

Homework

Here’s some homework: get the code, and continue reimplementing tests from the first article. You are welcome to share the results or struggles in the comments!

Top comments (0)