zudo-test-wisdom

Type to search...

to open search from anywhere

Level 1: Unit/Logic Tests

Pure JavaScript testing with vitest or jest for logic, data transforms, and state.

What Level 1 Tests

Level 1 tests verify pure logic — functions that take inputs and return outputs without touching the DOM, browser APIs, or visual rendering.

Typical targets:

  • Utility functions (string manipulation, date formatting, math)
  • Data transforms (API response mapping, normalization)
  • State reducers and selectors
  • Validation logic
  • Business rules

Tools

ToolUse Case
vitestModern projects, Vite-based, fast HMR
jestLegacy projects, CRA, widely supported

Example

// utils/format-price.ts
export function formatPrice(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`;
}
// utils/format-price.test.ts
import { describe, it, expect } from "vitest";
import { formatPrice } from "./format-price";

describe("formatPrice", () => {
  it("formats cents to dollar string", () => {
    expect(formatPrice(1299)).toBe("$12.99");
  });

  it("handles zero", () => {
    expect(formatPrice(0)).toBe("$0.00");
  });

  it("handles single-digit cents", () => {
    expect(formatPrice(5)).toBe("$0.05");
  });
});

TDD Cycle

For logic changes, follow the standard TDD cycle:

  1. Write a failing test that describes the expected behavior
  2. Implement the minimum code to make the test pass
  3. Verify the test is green
  4. Refactor if needed
  5. Repeat for each behavior

Blind Spots

⚠️ Warning

Level 1 tests are blind to everything visual. They cannot detect:

  • Whether an element renders on screen
  • CSS issues (overflow, z-index, opacity, display
    )
  • Layout problems (element present in DOM but not visible)
  • Browser-specific rendering behavior
  • User interaction flows

Level 1 is the right choice when you are confident the bug is in logic, not in rendering. If there is any doubt about visibility or visual correctness, escalate to Level 4 or 5.

When to Use Level 1

ScenarioLevel 1 Appropriate?
Function returns wrong valueYes
Data transform is incorrectYes
Validation rejects valid inputYes
Element not showing on screenNo — use Level 4/5
Layout looks wrongNo — use Level 5
Click handler not firingNo — use Level 2 or 4

Revision History