Testing and Debugging

40 min

Writing code is only half the job; ensuring it works correctly is the other half. **Testing** automates verification, while **Debugging** is the art of finding and fixing issues.

**Unit Testing** checks individual functions/components in isolation (e.g., Jest, Vitest). **Integration Testing** checks how modules work together. **E2E (End-to-End) Testing** simulates real user scenarios (e.g., Cypress, Playwright).

**Debugging Techniques**: Beyond `console.log`, use the `debugger` statement to pause execution, set Breakpoints in DevTools, inspect variables in the Scope pane, and step through code line-by-line.

**Test-Driven Development (TDD)** is a methodology where you write the test *before* the code. It forces you to think about the API design and requirements upfront.

Key Concepts

Unit vs. Integration vs. E2E Testing.
Test Runners (Jest, Vitest).
Assertions and Mocks.
The `debugger` keyword.
Source Maps for debugging compiled code.

Learning Objectives

Master

Writing unit tests with Jest/Vitest
Mocking external dependencies (APIs)
Using DevTools breakpoints effectively
Understanding code coverage reports

Develop

TDD mindset
Debugging complex async flows
Setting up a CI/CD testing pipeline

Tips

Write tests that describe *behavior*, not implementation details.
Use `console.table()` for visualizing arrays of objects.
Use `console.trace()` to see the call stack leading to a function.
Enable 'Pause on Caught Exceptions' in DevTools to catch swallowed errors.

Common Pitfalls

Writing brittle tests that break with every minor code change.
Testing implementation details (e.g., checking private variable state).
Ignoring flaky tests (tests that sometimes pass, sometimes fail).
Debugging with `alert()` (please stop, use `console` or debugger).

Summary

Tests save time in the long run.
Debugging is a scientific process.
DevTools are powerful; learn them.
TDD leads to better code design.

Exercise

Write a simple test case for a function using console assertions.

function multiply(a, b) {
  return a * b;
}

// Simple test
console.assert(multiply(2, 3) === 6, 'Multiply function failed');
console.log('All tests passed!');

Exercise Tips

Use console.table() to display test results in a table format.
Set up a test framework like Jest or Mocha for more advanced testing.
Use console.trace() to debug where a function is being called from.
Add try-catch blocks to test error handling: try { ... } catch (e) { console.assert(false, e.message); }

Testing and Debugging