Mastering Front‑End Testing: From Basics to Building Your Own Test Runner

Software Testing Overview

According to Wikipedia, software testing is the process of operating a program under specified conditions to discover errors, measure quality, and evaluate whether it meets design requirements. Baidu defines it as using manual or automated means to run a software system to verify that it satisfies requirements and to understand the difference between expected and actual results. Keywords: discover (errors), measure (quality), evaluate (differences)

Test Method Classification

By execution state: static testing, dynamic testing

By algorithm/structure: black‑box, white‑box, gray‑box

By execution mode: manual testing, automated testing

By acceptance stage: unit testing, integration testing, system testing, acceptance testing

In practice, testing tools often combine several classifications (e.g., automated black‑box testing for a system unit).

General Testing Principles

The most basic and core requirement of a test tool is to simulate input, run the test, and compare the output.

The essential workflow is: simulate input → execute test → compare output.

Testing in the Front‑End Domain

Common Test Types

The names used here are not formal terminology.

Unit testing – checks the smallest testable unit such as a function, class, or component; most widely used and easiest to organize.

Integration testing – combines multiple units according to business needs; boundaries with unit testing are often blurry.

End‑to‑end (E2E) testing – also called functional or smoke testing; a system‑level test from the user’s perspective, usually performed by dedicated QA engineers.

Typical development ladder: function → class → component → module → system.

Classes may not exist; they can be parallel with functions or components.

Popular Test Frameworks

Unit Testing

Unit testing is the cornerstone of test frameworks.

Popular frameworks include Jest, Mocha, Jasmine, Ava, and Tape. Their download trends show Jest and Mocha as the current mainstream choices.

Feature comparison (assertion, snapshot, coverage, mocking, documentation, license):

Jest – supports all listed features, documentation in Chinese, MIT licensed.

Mocha – lacks built‑in assertion, snapshot, coverage; documentation in English, MIT licensed.

Jasmine – supports assertion, snapshot, mocking; documentation in English, MIT licensed.

Ava – supports assertion, snapshot, coverage; documentation in Chinese, MIT licensed.

Tape – supports assertion only; documentation in English, MIT licensed.

Choosing a tool depends on required features; two common trends are using Jest alone or combining Mocha with extensions such as Chai (assertion), Sinon (mock), and Istanbul (coverage).

End‑to‑End Testing

For web front‑ends, E2E testing covers forms, animations, page navigation, DOM rendering, Ajax, etc., essentially combining integration and unit testing.

Download statistics show that E2E tools have far fewer downloads than unit‑test tools, indicating a smaller usage scale.

Component Testing

Component‑testing frameworks are built on top of unit testing to add browser‑specific capabilities.

The Testing Library family (e.g., React Testing Library, Vue Testing Library) provides component‑testing utilities for various frameworks, though each framework often requires its own wrapper.

Other Auxiliary Tools

Coverage tools – IstanbulJS, etc.

Assertion libraries – Chai, Unexpected, etc.

Mocking libraries – SinonJS, TestdoubleJS, etc.

Building a Minimal Test Runner

The core of a test tool is input simulation, test execution, and output comparison.

A simple implementation can be expressed in a few functions:

const chai = require('chai');
const assert = chai.assert;
const expect = chai.expect;
const should = chai.should();
const str = 'hello chai';

assert.typeOf(str, 'string');
assert.typeOf(str, 'string', 'foo is a string');

expect(str).to.be.a('string');
expect(str).to.equal('hello chai');

str.should.be.a('string');
str.should.equal('hello chai');

Mocking is optional but useful for isolating dependencies, especially when front‑end and back‑end development run in parallel.

module.exports.test0 = function (title, input, expected, fn) {
  if (fn(...input) === expected) {
    console.log(`✅ ${title} passed!`);
  } else {
    console.log(`❎ ${title} failed!`);
  }
};

Adding error handling with try…catch improves robustness:

module.exports.test1 = function (title, input, expected, fn) {
  try {
    if (fn(...input) === expected) {
      console.log(`✅ ${title} passed!`);
    } else {
      console.log(`❎ ${title} failed!`);
    }
  } catch (e) {
    console.log(`${title} encountered an error and could not run!`);
    console.error(e);
  }
};

Further extensions include a simple Result class to aggregate statistics, an event emitter for per‑case updates, and a CLI that parses arguments (e.g., --showJson, --saveJson).

module.exports.Result = class Result {
  numTotalTestFiles = 0;
  numPassTestFiles = 0;
  numFailTestFiles = 0;
  numTotalTestCases = 0;
  numPassTestCases = 0;
  numFailTestCases = 0;
  startTime = 0;
  endTime = 0;
  testFilesResult = [];
};

The final project structure groups source files, CLI entry point, and optional configuration class.

TDD and BDD

Test‑Driven Development (TDD) writes unit tests before implementation, driving design and ensuring coverage. Behavior‑Driven Development (BDD) refines TDD by describing expected behavior in a more expressive way (e.g., “clicking a button should display a modal”).

Typical TDD workflow: break tasks, write examples, write failing test, implement minimal code, refactor, repeat. Benefits include clearer requirements, higher code quality, and automated regression protection; drawbacks are the overhead of writing many tests.

References

ava vs jasmine vs jest vs mocha vs tape – npm trends

Testing Library documentation

Node.js assert API

Jest snapshot tutorial

Front‑end testing framework survey (Huawei Cloud)

JS testing framework comparison (Juejin)

Istanbul coverage tool tutorial (阮一峰)

Jest tutorial on GitHub

Try‑catch cannot catch syntax errors (Juejin)

Node.js command‑line argument parsing (CSDN)

Deep dive into TDD (简书)