Unit Testing (Jest / Vitest)

Level 10 — Ecosystem & Tooling Automated test runners and assertions.

1. Prerequisites

• Function — The core blocks of execution code.
• npm — Node's package manager used to install test framework libraries.

2. Term Category

Ecosystem / Tooling (Universal: Run via terminal CLI tools in development environments.): Unit Testing (Jest / Vitest) is a fundamental concept in this technology stack. Level 10 — Ecosystem & Tooling

3. Explanation

(1) Design Motivation — "Why did we design this?"

Manually testing your application (e.g. opening the browser and clicking around to verify a feature) is slow, repetitive, and does not scale. If you edit a calculation function, how do you guarantee that your edit didn't introduce a side-effect that silently breaks 50 other features elsewhere in the app?

To guarantee code correctness, developers write Unit Tests—automated scripts that test the smallest units of isolated source code (usually single functions or classes) to verify they return correct outputs for given inputs.

The testing ecosystem relies on standard components:

• Test Runner (Jest / Vitest): The command-line CLI engine that scans your directories for files ending in .test.js or .spec.js, executes them, and prints the pass/fail results.
  • Jest: The classic, heavily featured testing framework created by Meta.
  • Vitest: The modern, fast testing framework optimized for Vite, utilizing esbuild for instant starts.
• Assertions (expect): The logic checks that verify if the actual output matches the expectation (e.g., expect(add(2, 2)).toBe(4)).
• Test Block (test or it): The container defining an individual test scenario.
• Test Suite (describe): A wrapper grouping multiple related test blocks together.

(2) Reality Metaphor

Imagine a toy manufacturing factory.

• Manual Testing is like hiring a worker to sit at the end of the line, pick up every toy car, roll it on the floor, and listen to the wheels to make sure they are attached. It is slow and impossible to check every single toy.
• Unit Testing is like building an automated robotic testing rig in the laboratory. You place a single tire component (the unit function) into the rig, press go, and the machine automatically tests it against extreme heat, pressure, and spin friction (assertions) in 2 seconds. The rig flashes a green light (Pass) or red light (Fail) immediately.

(3) JavaScript Code Examples

Testing a Math Utility (math.test.js)

We use standard globals provided by runners (like Jest or Vitest) to write test specifications:

// --- file: math.js ---
export const add = (a, b) => a + b;
export const getStudentProfile = (id) => ({ id, role: "student" });

// --- file: math.test.js ---
import { add, getStudentProfile } from "./math.js";

// 1. Group tests using describe
describe("Math & Profile Utilities", () => {
  
  // 2. Define an individual test case
  test("adds 2 + 3 to equal 5", () => {
    // 3. Make an assertion using expect and a matcher (toBe)
    expect(add(2, 3)).toBe(5); 
  });
  
  test("adds negative numbers correctly", () => {
    expect(add(-1, -1)).toBe(-2);
  });

  // 4. PITFALL: Testing objects/arrays requires toEqual, not toBe!
  test("generates correct student profile object", () => {
    const profile = getStudentProfile(105);
    
    // expect(profile).toBe({ id: 105, role: "student" }); // WILL FAIL! (checks memory address)
    expect(profile).toEqual({ id: 105, role: "student" }); // SUCCESS (checks property values)
  });
});

4. Common Mistakes & Pitfalls

Mistake 1: Using toBe to assert object or array equality

The mistake: Writing expect(getArray()).toBe([1, 2]) expecting a pass.

Why it's wrong: The .toBe() matcher uses strict reference equality (===). Two separate arrays or objects compare as unequal because they reside at different memory addresses, even if their values are identical. Use .toEqual() to compare key-value contents recursively.

Incorrect:

const list = [1, 2];
expect(list).toBe([1, 2]); // Fails! (Different references in heap memory)

Fix:

const list = [1, 2];
expect(list).toEqual([1, 2]); // Succeeds! (Checks values inside)

Mistake 2: Losing Context Binding (this) in Unit Testing Callbacks

The mistake: Passing methods from Unit Testing instances as standalone callbacks to timers or event listeners without explicitly binding this.

Why it's wrong: Extracting object methods disassociates them from their target parent instance, causing this to resolve to undefined (in strict mode) or window/globalThis at runtime.

Incorrect:

const obj = {
    name: "unit_testing",
    log() { console.log(this.name); }
};
setTimeout(obj.log, 100); // ❌ Output: undefined (loses object context)

Fix:

const obj = {
    name: "unit_testing",
    log() { console.log(this.name); }
};
setTimeout(() => obj.log(), 100); // Correct: Arrow function captures lexical context

Mistake 3: Unhandled Asynchronous Failures in Unit Testing Operations

The mistake: Executing asynchronous operations within Unit Testing without wrapping await calls in try...catch blocks or chaining .catch().

Why it's wrong: Unhandled promise rejections trigger UnhandledPromiseRejectionWarning in Node.js or unhandled rejection errors in modern browsers, leaving application state in corrupted or uncoordinated states.

Incorrect:

async function processData() {
    const res = await fetch("/api/unit_testing"); // ❌ Unhandled network failure crashes execution flow
    const data = await res.json();
    return data;
}

Fix:

async function processData() {
    try {
        const res = await fetch("/api/unit_testing");
        if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
        return await res.json();
    } catch (err) {
        console.error(`Caught error in unit_testing: ${err.message}`);
        return null;
    }
}

5. Practice Exercises

Exercise 1: Minimal Unit Test Runner Suite Implementation

Scenario: A modern JavaScript build and tooling architecture implements minimal unit test runner suite to manage application code lifecycle.

Requirements:

1. Write processUnitTestingPrimary(payload).
2. Validate input config/options.
3. Execute tool/runtime operation.
4. Return result object.

function processUnitTestingPrimary(payload) {
  if (!payload || typeof payload !== "object") return null;
  return {
    status: "SUCCESS",
    target: "unit_testing",
    data: payload
  };
}

// Verification tests
const res = processUnitTestingPrimary({ name: "app" });
console.assert(res.status === "SUCCESS", "Test 1 Failed");
console.assert(res.target === "unit_testing", "Test 2 Failed");

Exercise 2: Function Spy Mock Controller Handler

Scenario: An enterprise toolchain handles function spy mock controller using defensive fallback options and specification compliance.

Requirements:

1. Write handleUnitTestingSecondary(target, options).
2. Check target validity.
3. Apply configuration options.
4. Return status boolean.

function handleUnitTestingSecondary(target, options) {
  if (!target || typeof target !== "object") return false;
  const opts = options || {};
  target.enabled = opts.enabled !== undefined ? opts.enabled : true;
  return true;
}

// Verification tests
const mockObj = {};
console.assert(handleUnitTestingSecondary(mockObj, { enabled: true }) === true, "Test 1 Failed");
console.assert(mockObj.enabled === true, "Test 2 Failed");

Exercise 3: Async Test Runner with Timeout Guard Optimization

Scenario: A high-performance build pipeline optimizes async test runner with timeout guard to accelerate compilation speed and reduce bundle size.

Requirements:

1. Write optimizeUnitTestingTertiary(modules).
2. Filter invalid module references.
3. Return optimized modules list.

function optimizeUnitTestingTertiary(modules) {
  if (!Array.isArray(modules)) return [];
  return modules.filter(m => m !== null && m !== undefined);
}

// Verification tests
const list = ["modA", null, "modB"];
const clean = optimizeUnitTestingTertiary(list);
console.assert(clean.join(",") === "modA,modB", "Test 1 Failed");

6. Related Terms

• Pure Function & Side Effects — Functions that are easy to unit test because they have no side-effects.

7. Key Takeaways

• Unit Testing isolates and verifies individual code units (functions/classes).
• Test runners (Jest, Vitest) find test files, execute code blocks, and output results.
• expect() declares test assertions, comparing actual results against expectations.
• Use .toBe() to test primitive values (uses ===).
• Use .toEqual() to test object or array contents (uses recursive value inspection).
• Write pure functions to make code easily testable, eliminating the need for complex mock configurations.