A Quick Start Guide for Testing With Jest

Photo by Suzanne D. Williams on Unsplash

Last week we covered how to quickly set up a vanilla Jest testing directory. This time we’ll go deeper into the actual work of using Jest for some basic tests and the format of using Jest. In this article we’ll be focusing on Jest used in a vanilla Javascript environment rather than a framework. Additionally, this is a quick connect of how to structure the app, as such this will only be a “Hello World!” test.

First we’ll start with the our test file, index.test.js. We know that we are testing for initial Jest setup, so let’s describe that:

describe("Test for initial Jest setup.", () => {
});

Jest’s describe expects a string and then a callback function. This will initialize our tests, and can also be used to initialize a test suite. The next step can be skipped for simple testing, but we’ll add it to demonstrate a suite. Here we are describing the function we plan on testing, knowing this is going to be a practice test.

describe("Test for initial Jest setup.", () => {
  describe("practiceTest", () => {
  });
});

Testing suites can be used to organize your test responses. If all tests within the suite pass, then only the text from the highest level describe will be rendered to the screen. Every level that fails will have more and more detailed information if you set it up that way.

Now we get to the actual testing! This function also expects a string and then a callback function. The string for the describe and test functions wants to unique, as it acts a name for Jest to communicate the issues to you. If two names are the same, then Jest will mark the first one as failed, even if the second test failed. I chose my second describe to be the name of the function, followed by the test describing what should go in and then be received. From there we will name a received variable and an expected variable, making the code for the our tests fairly uniform.

describe("Test for initial Jest setup.", () => {
  describe("practiceTest", () => {
    test("Given 'Hello World!', return 'Hello World!'", () => {
      const received = "Hello World!";
      const expected = "Hello World!";
      
    });
  });
});

Now we write the actual test with Jest, which reads very easily. We expect our practiceTest function, which received our argument to be, or return, our expected result.

describe("Test for initial Jest setup.", () => {
  describe("practiceTest", () => {
    test("Given 'Hello World!', return 'Hello World!'", () => {
      const received = "Hello World!";
      const expected = "Hello World!";
      expect(practiceTest(argument)).toBe(expected);
    });
  });
});

Technically, we could remove one or all of the describes and just have the test, but that wouldn’t be overly descriptive. Plus, does one test cover any corner cases, so why not group them up?

At this point, we would still not have passing tests, as we don’t have the function: practiceTest, nor have we connected the two files. While we are still in the test file, we’ll do half of the necessary connections. At the top of the file we’ll require the Javascript file we intend to test here.

const { practiceTest } = require("./index");

Meaning our file in total looks like:

const { practiceTest } = require("./index");
describe("Test for initial Jest setup.", () => {
  describe("practiceTest", () => {
    test("Given 'Hello World!', return 'Hello World!'", () => {
      const received = "Hello World";
      const expected = "Hello World!";
      expect(practiceTest(argument)).toBe(expected);
    });
  });
});

In the above code we are deconstructing an object of functions, which we are about to build and export. Transitioning to the index.js file, we’ll make a very simple function.

function practiceTest(phrase) {
  return phrase + "!";
}

The addition of the exclamation point is unnecessary, but with it we can verify our initial test function is actually receiving and returning different values. The final step before we actually start running Jest is to make an object of functions to export.

module.exports = {
  practiceTest,
}

Making the final index.js file read as:

function practiceTest(phrase) {
  return phrase + "!";
}
module.exports = {
  practiceTest,
}

From this point navigate to the directory the files have been saved in. If you have not made the directory into a Git repository, then you can only use:

yarn test --watchAll

This will work, but will only run each test once before you have to enter the command again. We want Jest to be actively watching as we build tests and letting us know when we got it right. Also, Jest was built with yarn, so the testing commands function best with yarn versus npm.

Otherwise, if you have the files as a Git repository, we’ll instead run:

yarn test --watch

This will initially run all tests in the directory, then give a list of options to manage how you want Jest to monitor certain files, tests, or other behaviors. Frequently, I will enter p to filter by a filename regex pattern. This allows a narrow focus expanding as you complete more and more tests. However, the best part about using this command is that the tests are actively running, so change the practiceTest function to no longer add the exclamation point. Once the file saves, you should see your test is now failing (a very important aspect of testing). Press w after your tests to get the menu back, or press q to have Jest exit watch mode.

And there you have it. You have a repository which is fully set up and ready to test your next piece of code. While the example is incredibly simple, it should illustrate exactly how to get Jest up and running for your more complicated problems.