Unit Testing in Frontend: The "Do One Thing Well" Mantra

"Do one thing, and do it well."

This Unix mantra is the heart of testable code. And if your code isn't testable, it's probably not good code.

What is a Unit?

Unit testing is the process of breaking your application into the smallest possible functions and creating automated tests for each one.

But what exactly is a "unit"?

Example: Calculating Shipping

Imagine a function that, given the customer's address, calculates the shipping cost from the nearest distribution center.

A naive approach:

How do you test this? You'd need:

• Mock distribution centers
• Valid addresses
• Correct distance calculations
• Pricing rules

All together. A nightmare.

The Testable Version

Now each function can be tested in isolation:

Benefits of Small Functions

More Reuse

Now calculateDistance can be used anywhere in the application:

• Show distance to physical store
• Calculate estimated delivery time
• Sort results by proximity

Better Testability

Each function has clear inputs and predictable outputs. No side effects, no global state.

Easier Debugging

When something breaks, you know exactly where to look:

• Wrong distance? calculateDistance
• Wrong center? findNearestCenter
• Wrong price? calculateShippingCost

Test-Driven Development (TDD)

TDD inverts the order: you write the test before the code.

The Red-Green-Refactor Cycle

1. Red: Write a failing test
2. Green: Write the minimum code to pass
3. Refactor: Improve the code while keeping tests green

Practical Example

Requirement: Format price in dollars

Modern Testing Tools

For JavaScript/TypeScript:

Minimal setup with Vitest:

How Much Coverage is Enough?

The honest answer: it depends.

Coverage Metrics

• Line coverage: % of lines executed
• Branch coverage: % of branches (if/else) tested
• Function coverage: % of functions called

Realistic Targets

The Danger of 100%

Chasing 100% coverage can lead to:

• Fragile tests that break with any change
• Time spent testing trivial code
• False sense of security

High coverage ≠ Well-tested code

A test can cover a line without actually verifying it works correctly.

Testing React/Vue Components

Components are more complex than pure functions. Use Testing Library:

Getting Started with Tests

If your project has no tests:

1. Don't try to test everything at once
2. Start with new code — It's easier to write testable from the start
3. Test bugs — When fixing a bug, write a test first
4. Test critical code — Payment, authentication, important calculations