Jest: JavaScript Testing Framework

Definition

The Jest framework is a delightful JavaScript Testing Framework with a focus on simplicity. It is designed to ensure the correctness of any JavaScript codebase. Jest allows you to write tests with an approachable, familiar and feature-rich API that will give you results quickly. Jest works well with projects that uses Babel, TypeScript, Node.js, React, Angular and Vue.js.

Brief History

Jest was produced and is maintained by Facebook and had its initial on May 14, 2014. Since its released it has been an open sourced project. It is written in JavaScript.

Comparism with Mocha

Jest as a tool is very similar to Mocha, the differences between both tools are:

• Jest has a certain set of conventions, while Mocha is less opinionated.
• Jest works usually out of the box, because it is opinionated, while Mocha requires more configuration.
• Mocha is older and more established compared to Jest and has more tooling integrations

Use Cases

Comparing expected results with actual results.

Given certain parameters, you can check if the actual result is actual result is equal to the expected. As you do this over and over the function can quickly get bloated.

An example of this implementation is as given below:

const add = (x, y) => x + y;

describe("'add' utility", () => {
  it("given 3 and 3 as arguments, returns 6", () => {
    const result = add(3, 3);
    expect(result).toEqual(6);
  });
  it("given -3 and -3 as arguments, returns -6", () => {
    const result = add(-3, -3);
    expect(result).toEqual(-3);
  });
  it("given 3 and -3 as arguments, returns 0", () => {
    const result = add(3, -3);
    expect(result).toEqual(0);
  });
});

• Avoiding unnecessary repetition

Jest comes in really handy when testing JavaScript applications, take for instance you have a test cases that follow a similar sequence of steps. This is common when you are unit testing helpers/utility functions.

Jest provides the test.each Jest utility.

This helper advises that you help you create the array of cases, where you can store arguments and the expected result.

const add = (x, y) => x + y;

const cases = [[2, 2, 4], [-2, -2, -4], [2, -2, 0]];

describe("'add' utility", () => {
  test.each(cases)(
    "given %p and %p as arguments, returns %p",
    (firstArg, secondArg, expectedResult) => {
      const result = add(firstArg, secondArg);
      expect(result).toEqual(expectedResult);
    }
  );
});

• Testing a component in your application

Take for instance that you want to test your React component, instead of rendering the graphical UI, which would require that you build the entire app, you can make use of a test renderer to quickly generate a serializable value for your React tree. An example is shown below:

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.example.com">Example Page</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

The first time you run this test, Jest will create a snapshot file that looks like this:

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Example Page
</a>
`;

Next: Getting Started with Jest.