Unit testing with Jest

Resources

• Jest

In this video, we're going to cover the basics of Jest testing, including how to set up and run a Jest test.

Vue CLI 3 Jest plugin

In the intial Vue CLI 3 scaffold of our project we elected to include Jest for unit testing. This means we already have the necessary libraries and configuration to begin unit testing our app.

Example test

The scaffold process also created this file, example.spec.js, which provides a boilerplate test.

To run this, we'll first need to delete the content of this file as it relates to boilerplate components also installed by Vue CLI 3 that we've long since removed.

Function to test

Before we get to component testing, let's start with a more modest goal of using Jest to test a regular JavaScript method. So let's declare a function sum with two arguments, a and b. In the body of the function, we'll simply return a + b.

tests/unit/client/example.spec.js

function sum (a, b) {
  return a + b;
}

Test structure

We'll now create a Jest test for this method. If you've used Mocha before, you'll find the test structure for Jest very familiar.

We begin with a describe block which we use to collect related tests. The first argument is the description, which I like to make the name of the function or component being tested, so let's make it "sum".

The second argument to describe is a function in which we define our tests. To define a test, we call another global method it. The first argument to it is the description of the test. Let's make it "should sum two numbers". The second argument to it is a function which will contain the test logic.

tests/unit/client/example.spec.js

...

describe("sum", () => {
  it("should sum two numbers", () => {});
});

Running

You'll see in our package.json file that we have a frontend unit test script already defined; "test:unit:client". This script will invoke the vue-cli-service which in turn will run Jest.

If you need global configuration for Jest, you can use the optional jest.config.js file which is also automatically created by the Vue CLI 3 scaffold.

Looking in this config you can see an option roots which specifies the client unit test directory. Unless a CLI option overrides it, Jest will run any test it finds in the roots directory when you run it.

So let's do that by going to the terminal and typing:

$ npm run test:unit:client

Output

You'll then see this output in the terminal indicating that the test successfully ran. And in the absense of an assertion, the test is considered to have passed.

PASS  tests/unit/client/example.spec.js
  ? sum (1ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.86s
Ran all test suites matching /tests\/unit\/client/i.

expect and matchers

Let's now add the logic for our test. If you did the API testing module of the course, you'll be familiar with the expect library.

This library is also included with Jest, so let's call expect and pass to it sum(1, 2). We can then use a "matcher", which is a method we chain to expect, and make an assertion. So let's put the matcher .toBe() and pass to it the value 3.

tests/unit/client/example.spec.js

describe("sum", () => {
  it("should sum two numbers", () => {
    expect(sum(1, 2)).toBe(3);
  });
});

Let's now run this test again by going back to the terminal and re-running the previous script.

All being well, you should see the still passes with the new logic we've added.

And with that, you're now familiar with the basics of Jest. We'll be exploring a lot more functionality of Jest as we go. But in the next video, we'll be getting an introduction to Vue Test Utils.