Study notes used by the Jest testing framework

Jest Tutorial for Beginners: Getting Started With JavaScript Testing

Jest is a JavaScript test runner, that is, a JavaScript library for creating, running, and building tests.

Jest is released as an NPM package, and you can install it in any JavaScript project. Jest is one of the most popular test runners today and the default choice for React projects.

Setting up the project

As with every JavaScript project, you need an NPM environment (make sure Node is installed on your system). Create a new folder and initialize the project with the following command:

mkdir getting-started-with-jest && cd $_
npm init -y

then:

npm i jest --save-dev

Let's also configure an NPM script to run our test from the command line. Open package.json and configure a script named test to run Jest:

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

Specifications and test-driven development

As developers, we all like creative freedom. However, in most cases, when it comes to serious matters, you don't have that much privilege.

We must follow the norm, which is a written or verbal description of the content to be constructed.

In this tutorial, we got a fairly simple specification from the project manager. A super important client needs a JavaScript function to filter an array of objects.

For each object, we have to check an attribute called "url", and if the value of that attribute matches the given term, then we should include the matched object in the result array.

As a JavaScript developer proficient in testing, you want to follow test-driven development, which is a discipline that forces the writing of failing tests before you start coding.

By default, Jest expects to find test files in a tests Create a new folder:

mkdir tests

Next, create a new file named filterByTerm.spec.js tests You may wonder why the extension includes .spec. This is a convention borrowed from Ruby and is used to mark a file as a specification for a given function.

Test structure, and a first failing test

describe("Filter function", () => {
  // test stuff
});

Our first friend is describe, a Jest method that contains one or more related tests. Every time you start writing a new set of tests for a feature, wrap it in a describe block. As you can see, it requires two parameters: a string to describe the test suite, and a callback function to wrap the actual test.

Next we will encounter another function called test, which is the actual test block:

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    // actual test
  });
});

The type of describe here is jest.Describe, the function accepts two input parameters, the types of which are string and jest.EmptyFunction respectively

And jest.EmptyFunction, the definition is very simple:

type EmptyFunction = () => void;

At this point we are ready to write a test. Remember that testing is a matter of input, function, and expected output. First let us define a simple input, an array of objects:

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];
  });
});

Next, we will define the expected results. According to the specification, the function under test should exclude objects whose url attribute does not match the given search term.

For example, we can expect an array containing a single object, given "link" as the search term:

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];

    const output = [{ id: 3, url: "https://www.link3.dev" }];
  });
});

Now we are ready to write the actual test. We will use expect and a Jest matcher to check whether our fictitious (current) function returns the expected result when called.

This is the test:

expect(filterByTerm(input, "link")).toEqual(output);

The complete code:

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];

    const output = [{ id: 3, url: "https://www.link3.dev" }];

    expect(filterByTerm(input, "link")).toEqual(output);

  });
});

Execute the command line: npm test
Test passed:

Coverage of test code:

npm test -- --coverage

More original articles by Jerry, all in: "Wang Zixi":