Docs
Module-20-Testing-Debugging
Module 20: Testing & Debugging
Master the art of writing reliable, testable code and efficiently debugging JavaScript applications.
╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ ┌─────────────────────────────────────────────────────────────────┐ ║
║ │ TESTING & DEBUGGING │ ║
║ │ │ ║
║ │ "Code without tests is broken by design." - Jacob Kaplan-Moss │ ║
║ └─────────────────────────────────────────────────────────────────┘ ║
║ ║
║ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ║
║ │ TEST │ │ DEBUG │ │ PROFILE │ │ MONITOR │ ║
║ │ ─────── │ │ ─────── │ │ ─────── │ │ ─────── │ ║
║ │ Unit │ │ DevTools │ │ Memory │ │ Logs │ ║
║ │ Integration│ │ Breakpoints│ │ CPU │ │ Errors │ ║
║ │ E2E │ │ Console │ │ Network │ │ Metrics │ ║
║ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
📋 Module Overview
This module transforms you from a developer who hopes code works into one who knows it works. Learn professional testing practices, master debugging tools, and build confidence in your code.
┌─────────────────────────────────────────────────────────────────────────────┐
│ THE TESTING MINDSET │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Without Tests: With Tests: │
│ ────────────── ─────────── │
│ │
│ function add(a, b) { function add(a, b) { │
│ return a + b; return a + b; │
│ } } │
│ // "I think it works" │
│ test('adds numbers', () => { │
│ expect(add(2, 3)).toBe(5); │
│ expect(add(-1, 1)).toBe(0); │
│ expect(add(0, 0)).toBe(0); │
│ }); │
│ // "I KNOW it works" │
│ │
│ Benefits: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ ✅ Catch bugs before production │ │
│ │ ✅ Refactor with confidence │ │
│ │ ✅ Document expected behavior │ │
│ │ ✅ Faster development in the long run │ │
│ │ ✅ Better code design (testable = modular) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
📚 Module Structure
20.1 Unit Testing Fundamentals
┌─────────────────────────────────────────────────────────────────────────────┐
│ UNIT TESTING BASICS │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ The AAA Pattern: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ test('user can update their name', () => { │ │
│ │ // ARRANGE - Set up the test data │ │
│ │ const user = new User('Alice'); │ │
│ │ │ │
│ │ // ACT - Perform the action being tested │ │
│ │ user.setName('Bob'); │ │
│ │ │ │
│ │ // ASSERT - Verify the expected outcome │ │
│ │ expect(user.name).toBe('Bob'); │ │
│ │ }); │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Test Doubles: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ TYPE PURPOSE EXAMPLE │ │
│ │ ──── ─────── ─────── │ │
│ │ Dummy Fill parameter slots () => {} │ │
│ │ Stub Return canned values () => 42 │ │
│ │ Spy Record interactions jest.fn() │ │
│ │ Mock Verify expectations jest.mock('./module') │ │
│ │ Fake Working implementation In-memory database │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
- •Testing principles - Why, what, and how to test
- •Test structure - Arrange-Act-Assert pattern
- •Test doubles - Mocks, stubs, spies, fakes
- •Code coverage - Measuring test completeness
20.2 Testing with Jest
┌─────────────────────────────────────────────────────────────────────────────┐
│ JEST FRAMEWORK │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Matchers Cheat Sheet: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ // Equality │ │
│ │ expect(x).toBe(y) // Strict equality (===) │ │
│ │ expect(x).toEqual(y) // Deep equality │ │
│ │ expect(x).toStrictEqual(y) // Deep + undefined properties │ │
│ │ │ │
│ │ // Truthiness │ │
│ │ expect(x).toBeTruthy() │ │
│ │ expect(x).toBeFalsy() │ │
│ │ expect(x).toBeNull() │ │
│ │ expect(x).toBeUndefined() │ │
│ │ expect(x).toBeDefined() │ │
│ │ │ │
│ │ // Numbers │ │
│ │ expect(x).toBeGreaterThan(y) │ │
│ │ expect(x).toBeLessThan(y) │ │
│ │ expect(x).toBeCloseTo(y) // For floating point │ │
│ │ │ │
│ │ // Strings │ │
│ │ expect(x).toMatch(/pattern/) │ │
│ │ expect(x).toContain('substring') │ │
│ │ │ │
│ │ // Arrays/Iterables │ │
│ │ expect(arr).toContain(item) │ │
│ │ expect(arr).toHaveLength(n) │ │
│ │ │ │
│ │ // Objects │ │
│ │ expect(obj).toHaveProperty('key', value) │ │
│ │ expect(obj).toMatchObject(partialObj) │ │
│ │ │ │
│ │ // Exceptions │ │
│ │ expect(() => fn()).toThrow() │ │
│ │ expect(() => fn()).toThrow(ErrorType) │ │
│ │ expect(() => fn()).toThrow('message') │ │
│ │ │ │
│ │ // Negation │ │
│ │ expect(x).not.toBe(y) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Async Testing: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ // With async/await │ │
│ │ test('async test', async () => { │ │
│ │ const data = await fetchData(); │ │
│ │ expect(data).toBe('result'); │ │
│ │ }); │ │
│ │ │ │
│ │ // With resolves/rejects │ │
│ │ test('promise resolves', () => { │ │
│ │ return expect(fetchData()).resolves.toBe('result'); │ │
│ │ }); │ │
│ │ │ │
│ │ test('promise rejects', () => { │ │
│ │ return expect(badFetch()).rejects.toThrow('error'); │ │
│ │ }); │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
- •Jest configuration - Setup and customization
- •Matchers and assertions - Complete matcher reference
- •Async testing - Testing promises and async/await
- •Mocking - Mock functions and modules
20.3 Testing DOM and Browser Code
┌─────────────────────────────────────────────────────────────────────────────┐
│ DOM TESTING │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Testing Library Philosophy: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ "The more your tests resemble the way your software is used, │ │
│ │ the more confidence they can give you." │ │
│ │ │ │
│ │ Query Priority (most to least preferred): │ │
│ │ ──────────────────────────────────────── │ │
│ │ 1. getByRole ← Accessible to everyone │ │
│ │ 2. getByLabelText ← Form fields │ │
│ │ 3. getByPlaceholderText │ │
│ │ 4. getByText ← Non-interactive elements │ │
│ │ 5. getByDisplayValue ← Current form values │ │
│ │ 6. getByAltText ← Images │ │
│ │ 7. getByTitle │ │
│ │ 8. getByTestId ← Last resort │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Example: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ import { render, screen, fireEvent } from '@testing-library/dom'; │ │
│ │ │ │
│ │ test('button click updates text', () => { │ │
│ │ // Render │ │
│ │ render(`<button>Click me</button><span></span>`); │ │
│ │ │ │
│ │ // Query │ │
│ │ const button = screen.getByRole('button', { name: /click me/i });│ │
│ │ │ │
│ │ // Interact │ │
│ │ fireEvent.click(button); │ │
│ │ │ │
│ │ // Assert │ │
│ │ expect(screen.getByText('Clicked!')).toBeInTheDocument(); │ │
│ │ }); │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
- •DOM testing utilities - JSDOM, Testing Library
- •Event simulation - Click, input, keyboard events
- •Async UI updates - waitFor, findBy queries
- •Component testing - Testing UI components
20.4 Debugging Techniques
┌─────────────────────────────────────────────────────────────────────────────┐
│ DEBUGGING TOOLKIT │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Console Methods: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ console.log(obj) // Basic output │ │
│ │ console.dir(obj) // Interactive object tree │ │
│ │ console.table(arr) // Tabular format │ │
│ │ console.group('name') // Group related logs │ │
│ │ console.groupEnd() │ │
│ │ console.time('label') // Start timer │ │
│ │ console.timeEnd('label') // End timer, show duration │ │
│ │ console.trace() // Show call stack │ │
│ │ console.assert(cond) // Log if condition is false │ │
│ │ console.count('label') // Count invocations │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Breakpoint Types: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Line Breakpoint │ Click line number in Sources panel │ │
│ │ Conditional │ Right-click → Add conditional breakpoint │ │
│ │ Logpoint │ Right-click → Add logpoint (no pause) │ │
│ │ DOM Breakpoint │ Elements → Right-click → Break on... │ │
│ │ XHR Breakpoint │ Sources → XHR Breakpoints │ │
│ │ Event Breakpoint │ Sources → Event Listener Breakpoints │ │
│ │ Exception │ Sources → Pause on exceptions │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Stepping Controls: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ▶ Resume │ Continue until next breakpoint │ │
│ │ ⤵ Step Over │ Execute current line, move to next │ │
│ │ ⤓ Step Into │ Enter function call │ │
│ │ ⤴ Step Out │ Complete current function, return to caller │ │
│ │ ⟲ Restart │ Restart the current call frame │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
- •Browser DevTools - Full feature mastery
- •Console methods - Beyond console.log
- •Breakpoints - Strategic debugging
- •Performance profiling - Finding bottlenecks
20.5 Error Handling & Logging
┌─────────────────────────────────────────────────────────────────────────────┐
│ ERROR MANAGEMENT │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Error Handling Strategy: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ User Action │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Try Operation │ │ │
│ │ └─────────────────┘ │ │
│ │ │ │ │
│ │ Success? ──────► ✓ Continue normal flow │ │
│ │ │ │ │
│ │ ▼ Error │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Catch & Log │ ──► Send to error tracking service │ │
│ │ └─────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Can Recover? │ ──► Try fallback / retry │ │
│ │ └─────────────────┘ │ │
│ │ │ No │ │
│ │ ▼ │ │
│ │ ┌─────────────────┐ │ │
│ │ │ Graceful Error │ ──► Show user-friendly message │ │
│ │ │ UI │ │ │
│ │ └─────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Logging Levels: │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ERROR █████████████ Critical failures, needs attention │ │
│ │ WARN █████████ Potential issues, degraded performance │ │
│ │ INFO █████ Normal operations, milestones │ │
│ │ DEBUG ███ Detailed diagnostic information │ │
│ │ TRACE █ Very detailed execution trace │ │
│ │ │ │
│ │ Production: ERROR, WARN, (INFO) │ │
│ │ Development: All levels │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
- •Structured error handling - Consistent patterns
- •Logging strategies - Development vs production
- •Error tracking - Sentry, LogRocket, etc.
- •Production debugging - Source maps and monitoring
🎯 Learning Flow
┌─────────────────────────────────────────────────────────────────────────────┐
│ LEARNING PROGRESSION │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Week 1: Unit Testing Fundamentals │
│ ├── Understand why testing matters │
│ ├── Learn the AAA pattern │
│ ├── Practice with simple pure functions │
│ └── Understand test doubles concepts │
│ │
│ Week 2: Jest Mastery │
│ ├── Set up Jest in a project │
│ ├── Learn all common matchers │
│ ├── Test async code │
│ └── Mock functions and modules │
│ │
│ Week 3: DOM and Integration Testing │
│ ├── Set up Testing Library │
│ ├── Test UI components │
│ ├── Simulate user interactions │
│ └── Write integration tests │
│ │
│ Week 4: Debugging and Error Handling │
│ ├── Master DevTools debugging │
│ ├── Use advanced console methods │
│ ├── Implement error tracking │
│ └── Build logging infrastructure │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🔺 Testing Pyramid
┌─────────────────────────────────────────────────────────────────────────────┐
│ THE TESTING PYRAMID │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ │
│ ╱ E2E ╲ │
│ ╱ (Manual) ╲ ← FEW: Slow, expensive │
│ ╱─────────────╲ Simulate real user flows │
│ ╱ Integration ╲ │
│ ╱ (Automated) ╲ ← SOME: Medium speed │
│ ╱───────────────────╲ Multiple units together │
│ ╱ Unit Tests ╲ │
│ ╱ (Automated) ╲ ← MANY: Fast, cheap │
│ ╱─────────────────────────╲ Single functions/modules │
│ │
│ Unit Tests: │
│ ├── Test individual functions and classes │
│ ├── Fast execution (milliseconds) │
│ ├── Easy to write and maintain │
│ └── Run on every save/commit │
│ │
│ Integration Tests: │
│ ├── Test how units work together │
│ ├── May involve database, API mocks │
│ ├── Slower than unit tests │
│ └── Run before merge/deploy │
│ │
│ E2E Tests: │
│ ├── Test complete user flows │
│ ├── Use real browsers (Cypress, Playwright) │
│ ├── Slowest, most expensive │
│ └── Run before major releases │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🔑 Key Concepts
┌─────────────────────────────────────────────────────────────────────────────┐
│ TESTING TERMINOLOGY │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Term │ Description │
│ ─────────────────│───────────────────────────────────────────────────── │
│ Unit Test │ Tests a single unit (function/class) in isolation │
│ Integration Test │ Tests multiple units working together │
│ E2E Test │ Tests entire application flow end-to-end │
│ Test Suite │ Collection of related tests │
│ Test Case │ Single test verifying specific behavior │
│ Test Runner │ Tool that executes tests (Jest, Mocha) │
│ Assertion │ Statement verifying expected outcome │
│ Fixture │ Test data setup │
│ Mock │ Simulated object with programmable behavior │
│ Stub │ Mock that returns canned responses │
│ Spy │ Records function calls for verification │
│ Coverage │ Percentage of code executed by tests │
│ Regression │ Bug reintroduced in previously working code │
│ TDD │ Write tests before implementation │
│ BDD │ Tests written in behavioral language │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
📋 Prerequisites
- •Strong understanding of JavaScript functions
- •Familiarity with async/await
- •Basic understanding of the DOM
- •Experience with npm/package management
📚 Section Files
| Section | Topic | Key Files |
|---|---|---|
| 20.1 | Unit Testing Fundamentals | 01-testing-principles.js, 02-test-doubles.js |
| 20.2 | Testing with Jest | 01-matchers.js, 02-async-testing.js, 03-mocking.js |
| 20.3 | DOM Testing | 01-dom-queries.js, 02-event-testing.js |
| 20.4 | Debugging | 01-console-methods.js, 02-devtools-tips.js |
| 20.5 | Error Handling | 01-error-patterns.js, 02-logging.js |
⚠️ Common Pitfalls
┌─────────────────────────────────────────────────────────────────────────────┐
│ TESTING PITFALLS TO AVOID │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ❌ Testing implementation, not behavior │
│ ───────────────────────────────────────── │
│ // Bad: Tests internal state │
│ expect(counter._count).toBe(1); │
│ // Good: Tests behavior │
│ expect(counter.getValue()).toBe(1); │
│ │
│ ❌ Tests that depend on each other │
│ ──────────────────────────────── │
│ // Bad: Test B depends on Test A running first │
│ // Good: Each test sets up its own data │
│ │
│ ❌ Not testing edge cases │
│ ───────────────────────────── │
│ // Bad: Only test the happy path │
│ // Good: Test null, empty, boundaries, errors │
│ │
│ ❌ Over-mocking │
│ ────────────── │
│ // Bad: Mock everything, test doesn't verify real behavior │
│ // Good: Mock external dependencies, not the unit under test │
│ │
│ ❌ Ignoring flaky tests │
│ ─────────────────────── │
│ // Bad: "It usually passes, skip it" │
│ // Good: Fix timing issues, make tests deterministic │
│ │
│ ❌ 100% coverage as a goal │
│ ───────────────────────── │
│ // Bad: Write pointless tests just to hit coverage │
│ // Good: Focus on critical paths and edge cases │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🔗 Related Modules
- •Previous: Module 19 - Advanced DOM & Browser APIs
- •Next: Module 21 - Security Best Practices
- •Related: Module 04 - Control Flow (try-catch)
🎯 Quick Reference
┌─────────────────────────────────────────────────────────────────────────────┐
│ JEST QUICK REFERENCE │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ // Test structure │
│ describe('Module', () => { │
│ beforeEach(() => { /* setup */ }); │
│ afterEach(() => { /* cleanup */ }); │
│ │
│ test('should do something', () => { │
│ expect(result).toBe(expected); │
│ }); │
│ │
│ test.skip('skipped test', () => {}); │
│ test.only('only this runs', () => {}); │
│ }); │
│ │
│ // Common matchers │
│ expect(x).toBe(y) // === │
│ expect(x).toEqual(y) // Deep equal │
│ expect(x).toBeTruthy() // Boolean true │
│ expect(x).toContain(item) // Array/string contains │
│ expect(fn).toThrow() // Function throws │
│ expect(fn).toHaveBeenCalled() // Mock was called │
│ expect(fn).toHaveBeenCalledWith() // Mock called with args │
│ │
│ // Mocking │
│ jest.fn() // Create mock function │
│ jest.mock('./module') // Mock entire module │
│ jest.spyOn(obj, 'method') // Spy on existing method │
│ │
│ // Async │
│ await expect(p).resolves.toBe(x) // Promise resolves │
│ await expect(p).rejects.toThrow() // Promise rejects │
│ │
└─────────────────────────────────────────────────────────────────────────────┘