Introduction to Unit Testing in JavaScript with Jest

Writing unit tests is really not as difficult as it seems. Let’s see how to do it in JavaScript using Jest.

Set up

Before we begin, let’s prepare everything we need.

Inside a new folder, we’ll initialize npm. In this case, I’m passing the -y flag so it doesn’t ask questions and assigns all default values.

npm init -y

Next, we’ll install jest.

Since we don’t need it to be part of the production bundle, we’ll install it as a development dependency.

npm install --save-dev jest

To be able to run the tests, we’ll create the test command in package.json (or modify it if you already have the default one created by npm).

This is how the scripts section in package.json should look:

"scripts": {
    "test": "jest"
}

Finally, we’ll create the file where we’ll write the code and the file where we’ll write the tests.

touch fizzbuzz.js
touch fizzbuzz.test.js

FizzBuzz

In order to focus on the technical side of testing, we’ll create a very well-known program called fizzBuzz. It basically consists of a function that receives a number and returns…

• Fizz, if the number is divisible by 3.
• Buzz, if the number is divisible by 5.
• FizzBuzz, if the number is divisible by both 3 and 5.
• The same number, if it’s not divisible by either 3 or 5.

As you can see, the functionality is very simple. This is useful because it allows us to avoid complex logic and focus on what matters today: tests.

The program consists of 10 very simple lines that are easy to read and understand, so to save time, here it is:

// fizzbuzz.js
function fizzBuzz(n) {
  const isDivisibleBy3 = n % 3 === 0;
  const isDivisibleBy5 = n % 5 === 0;

  if (isDivisibleBy3 && isDivisibleBy5) return 'FizzBuzz';
  if (isDivisibleBy3) return 'Fizz';
  if (isDivisibleBy5) return 'Buzz';

  return n;
}

module.exports = fizzBuzz;

Tests

This is the part we came for.

The describe function is used to create a test suite. It receives a string as the first parameter, which describes what the suite is testing, and a function as the second parameter where we’ll define the tests.

describe('description', () => {});

Tests are created using the it function, which is very similar to describe. It receives a string as the first parameter describing the specific behavior being tested, and a function as the second parameter, which is the test itself.

We’ll also use the expect function, which receives a single parameter. This parameter can be of any type and represents the value being tested.

We can then chain additional functions to expect to verify that the value matches what we expect. These chained methods are called matchers. With them, we can check whether a value is truthy or falsy, greater or smaller than something, throws an exception, and much more. You can find the full list in the Jest documentation.

Let’s look at a simple example that will help us understand the structure of tests:

describe('Testing true', () => {
  it('should be truthy', () => {
    expect(true).toBeTruthy();
  });

  it('should not be falsy', () => {
    expect(true).not.toBeFalsy();
  });
});

Testing FizzBuzz

In the fizzbuzz.test.js file, we’ll import our fizzBuzz function and create our first test suite.

We’ll test that the fizzBuzz function returns the same number it receives when that number is not divisible by either 3 or 5.

const fizzBuzz = require('./fizzbuzz');

describe('FizzBuzz', () => {
  it('should return number when number is not divisible by either 3 nor 5', () => {
    expect(fizzBuzz(1)).toBe(1);
    expect(fizzBuzz(2)).toBe(2);
  });
});

As you can see, we pass the return value of fizzBuzz to the expect function and chain the toBe matcher.

This is basically saying: “We expect the fizzBuzz function with parameter 1 to return 1.”

Let’s run the tests…

npm test

And everything should be green!

To finish, let’s test the remaining three cases.

And that’s it. You’ve created your first test suite.

Conclusion

I hope this post helps demystify testing. It’s really not as complicated as it might seem.

The hardest part is the strategy, which we can cover in another post.

I recommend reading the Jest documentation and continuing to practice.