Interactive Guide

Code with Confidence.
Master Unit Testing.

Unit testing isn't just about finding bugs—it's about design, speed, and reliability. Learn the Red-Green-Refactor cycle, understand the critical difference between Mocks and Stubs, and explore the modern ecosystem.

Start Learning arrow_downward Try Simulator terminal

What is a Unit Test?

A unit test verifies the behavior of the smallest testable part of an application—usually a single function, method, or class—in complete isolation.

Unlike integration tests which check how pieces work together, unit tests are focused, fast, and deterministic. They act as a safety net for refactoring and documentation for how your code is supposed to work.

The Golden Rule: AAA Pattern

A

Arrange: Set up the necessary objects, data, and conditions.
A

Act: Execute the function or method under test.
A

Assert: Verify that the outcome matches your expectations.

calculator.test.js

// Test Suite

test('should calculate total correctly', () => {

// 1. Arrange
const items = [
{ price: 10, qty: 2 },
{ price: 5, qty: 1 }
];

// 2. Act
const total = cart.calculateTotal(items);

// 3. Assert
expect(total).toBe(25);

});

Hover lines to focus

The TDD Workflow

Test-Driven Development (TDD) relies on a simple, rhythmic cycle known as Red-Green-Refactor.

Click the lights to explore the cycle

radio_button_unchecked

Phase 1: Red

Write a test that defines the desired functionality. Since the code doesn't exist yet, the test must fail.

FAIL tests/user.test.js

✕ should return full name

ReferenceError: getFullName is not defined

Goal: Confirm the test detects the missing feature.

Interactive Playground

Fix the Broken Test

The implementation of `calculateDiscount` has a bug. The test is failing. Can you fix the code?

src/pricing.js

function calculateDiscount(price, isMember) {
  // Bug: Members should get 20% off
  if (isMember) {
    return price; <-- ERROR HERE
  }
  return price;
}

terminal Terminal - Jest

$ npm test

Running tests...

FAIL src/pricing.test.js

● calculateDiscount › should apply 20% discount for members

Expected: 80

Received: 100

Tests: 1 failed, 1 total

Time: 0.452s

Mocks vs. Stubs: The Core Difference

This is the most confusing topic in unit testing. The key distinction, as defined by Martin Fowler, is State Verification vs Behavior Verification.

data_object

Stubs

Definition: A "dumb" object that provides canned answers to calls made during the test.

check Used for State Verification.
check Example: "When I call database.get(1), return 'Alice'."
check The test checks the final result, not how it got there.

Analogy: You ask a librarian for a book. You don't care which shelf they went to, only that they returned the book you asked for.

test_user_service_stub.js

// 1. Create Stub (Canned Data)

const

dbStub = {

getUser: () => ({ name: 'Alice' })

};

// 2. Run Logic

const

service =

new

UserService(dbStub);

const result = service.getWelcomeMessage(1);

// 3. Verify State (Output)

expect(result).toBe('Welcome Alice');

Popular Frameworks (2024-2025)

javascript

JavaScript

Jest #1 Choice

Zero-config, snapshot testing, great for React.
Vitest Fastest

Vite-native, ultra-fast, modern Jest alternative.

coffee

Java

JUnit 5 Standard

The industry standard. Modular and powerful.
Mockito Mocking

Essential for creating mocks in Java.

Python

PyTest Dominant

Simple syntax, powerful fixtures, huge plugin ecosystem.
unittest Built-in

Standard library, xUnit style, no install needed.

terminal

C# / .NET

xUnit Modern

Community focused, extensible, modern standard.
NUnit Classic

Robust, rich feature set, widely used in legacy.