Unlock Front‑End Quality: A Complete Guide to Jest Automated Testing

Automated Testing Overview

Automated testing runs test code with tools, compares actual results to expected values, and generates reports. It is essential for continuous integration and delivery because it can repeatedly execute regression tests and perform checks that are impractical manually.

Why Front‑End Automation?

Front‑end projects grow in size and complexity. Automated tests improve stability, reduce bugs, and make maintenance easier, complementing manual testing.

Testing Types

Unit Testing

Tests a single function, class, or module in isolation.

Integration Testing

Tests the interaction of multiple units, often covering a full user flow.

Test‑Driven Development (TDD)

Write a failing test before implementation. Benefits include reduced regressions, higher code quality, better coverage, and fewer bugs introduced during development.

Behavior‑Driven Development (BDD)

Focuses on user‑level behavior, describing scenarios in a language understandable to both developers and stakeholders.

Manual Test Example (No Framework)

Compare an expected value with the actual result using if/else:

function ZcyZooTeam(str) {
  return 'Zcy' + str;
}

const result = ZcyZooTeam('Zero');
const expected = 'ZcyZooTeam';
if (result !== expected) {
  throw Error(`ZcyZooTeam result should be ${expected}, but got ${result}`);
}

Wrap the logic in a reusable helper to avoid repetitive code:

function expect(result) {
  return {
    toBe(value) {
      if (result !== value) {
        throw Error(`Result should be ${value}, but got ${result}`);
      }
      console.log('Test passed!');
    }
  };
}

function test(msg, fn) {
  try {
    fn();
    console.log(msg + ' test passed!');
  } catch (error) {
    console.log(msg + ' test failed! ' + error);
  }
}

test('ZcyZooTeam', () => {
  expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');
});

Jest Framework

Popular Front‑End Test Runners

Jasmine

: easy to learn, supports async, works in Node and browsers. Mocha: async & promise support, flexible integrations. Jest: fast, simple API, isolated environment, snapshot support, parallel execution.

Installation & Initialization

npm i jest --save-dev
npx jest --init
# Choose test environment (node or jsdom)
# Enable coverage? (y/N)
# Clear mock calls between tests? (y/N)
# A jest.config.js file is generated.

Babel Configuration for ES6 Imports/Exports

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ]
}

Update package.json to run Jest in watch mode:

"scripts": {
  "test": "jest --watchAll"
}

Jest Startup Process

Run npm run test.

Jest loads babel-jest and checks for a Babel configuration.

If .babelrc exists, Babel transforms the code.

The transformed code is executed.

Generating a Coverage Report

npx jest --coverage

This creates a coverage directory with an HTML report showing statements, branches, functions, and line coverage.

Core Jest Matchers

toBe

: strict equality (===). toEqual: deep equality for objects. toBeNull, toBeUndefined, toBeDefined, toBeTruthy, toBeFalsy.

Negation with not (e.g., expect(a).not.toBeFalsy()).

Numeric: toBeGreaterThan, toBeLessThan, toBeGreaterThanOrEqual.

String/regex: toMatch.

Array inclusion: toContain.

Exception testing: toThrow.

Asynchronous Testing

Jest supports callbacks, promises, and async/await:

// Callback style
test('getData returns { success: true }', done => {
  getData(data => {
    expect(data).toEqual({ success: true });
    done();
  });
});

// Promise style
test('getData returns { success: true }', () => {
  return getData().then(res => {
    expect(res.data).toEqual({ success: true });
  });
});

// Async/await style
test('getData returns { success: true }', async () => {
  await expect(getData()).resolves.toMatchObject({
    data: { success: true }
  });
});

Lifecycle Hooks

beforeAll

: runs once before all tests. beforeEach: runs before each test. afterEach: runs after each test. afterAll: runs once after all tests.

Example using hooks to isolate state:

let count;

beforeEach(() => {
  count = new Counter();
});

test('adds 1', () => {
  count.add();
  expect(count.number).toBe(1);
});

test('subtracts 1', () => {
  count.minus();
  expect(count.number).toBe(-1);
});

Grouping Tests with describe

describe('Counter tests', () => {
  beforeAll(() => console.log('beforeAll'));
  beforeEach(() => console.log('beforeEach'));
  afterEach(() => console.log('afterEach'));
  afterAll(() => console.log('afterAll'));

  describe('add method', () => {
    test('adds 1', () => {
      count.add();
      expect(count.number).toBe(1);
    });
  });

  describe('minus method', () => {
    test('subtracts 1', () => {
      count.minus();
      expect(count.number).toBe(-1);
    });
  });
});

Mock Functions

Create mock functions with jest.fn() to record calls, set return values, or provide custom implementations.

const fn = jest.fn(() => 456);
fn.mockReturnValueOnce('zoo');
fn.mockImplementation(() => '123');

runFn(fn);
runFn(fn);

expect(fn).toBeCalled();
expect(fn.mock.calls.length).toBe(2);
expect(fn.mock.calls[0]).toEqual([123]);
expect(fn).toBeCalledWith(123);
expect(fn.mock.results[0].value).toBe('zoo');

Advanced Mocking with __mocks__

Place a module inside a __mocks__ folder. Jest will automatically use it when the module is imported.

// mocker.test.js
jest.mock('./mock');
import { getData } from './mock';

test('getData returns mocked value', () => {
  return getData().then(data => {
    expect(eval(data)).toEqual('123');
  });
});

Mock Timers

Replace real timers with fake timers to control time‑dependent code.

jest.useFakeTimers();

test('timer calls function twice', () => {
  const fn = jest.fn();
  timer(fn);
  jest.runAllTimers();
  expect(fn).toBeCalledTimes(2);
});

Snapshot Testing

Capture the output of a function and compare it on subsequent runs.

// snapshot.test.js
import { config1, config2 } from './snapshot';

test('config1 snapshot', () => {
  expect(config1()).toMatchSnapshot({ time: expect.any(Date) });
});

test('config2 snapshot', () => {
  expect(config2()).toMatchSnapshot({ time: expect.any(Number) });
});

DOM Node Testing

Jest bundles jsdom to simulate a browser environment.

// dom.test.js
import addDiv from './dom';
import $ from 'jquery';

test('addDiv creates two divs', () => {
  addDiv();
  addDiv();
  expect($('body').find('div').length).toBe(2);
  expect(document.getElementsByTagName('div').length).toBe(2);
});

Reference Repositories

Demo project: https://github.com/Jadony/Jest-demo

Jest basic configuration: https://github.com/Jadony/jest-config

Matcher examples: https://github.com/Jadony/jest-matchers

Async testing: https://github.com/Jadony/jest-async

Hook usage: https://github.com/Jadony/jest-hook

Mock functions: https://github.com/Jadony/jest-mock

Snapshot testing: https://github.com/Jadony/jest-snapshot

DOM testing: https://github.com/Jadony/jest-dom