Stop 15 · TestingTopics · 6/8

Unit Testing

Part of the Frontend Developer Roadmap

In short

A unit test checks one small piece, like a single function, all by itself. They're the fastest tests you can write, so they catch silly bugs before anyone else sees them.

Testing the smallest independent pieces of code — a single function or component — in isolation from the rest of the system.

The jaadu tests one glowing bulb in a tester, with a string of festive lights waiting beside it.

Think of it like this

Testing each bulb before Diwali

Before stringing up the lights, you test each bulb on its own. If one is fused, you know exactly which one. Unit tests check each function alone, so when one fails, you know exactly where to look.

Watch it happen

test.each runs every row

9876543210
0
6123456789
1
5123456789
2
98765
3
98765432a0
4

1/6Five inputs, one function. test.each runs the same check on each row.

The big ideas

What you need to know

One thing at a time

A unit is a function, a hook or a small component. Test it without a real database, network or other units.

Edge cases are the point

Empty input, zero, negative numbers, very long strings. That's where bugs hide, not in the happy path.

Fast and many

Unit tests run in milliseconds, so you can have hundreds and still get feedback instantly.

How it works

The shape of every unit test

  1. 1

    Arrange

    Set up the input and anything the function needs.

  2. 2

    Act

    Call the function once.

  3. 3

    Assert

    Check the output is exactly what you expected.

See it in code

Walk through the code

ts
1// validate.ts2export const isValidIndianMobile = (n: string) => /^[6-9]\d{9}$/.test(n);3 4// validate.test.ts5import { isValidIndianMobile } from "./validate";6 7test.each([8  ["9876543210", true],9  ["6123456789", true],10  ["5123456789", false], // can't start with 511  ["98765", false],      // too short12  ["98765432a0", false], // letter inside13])("isValidIndianMobile(%s) is %s", (input, expected) => {14  expect(isValidIndianMobile(input)).toBe(expected);15});

1/3The unit under test: ten digits, the first one from 6 to 9.

test.each runs the same check on every row, so adding a new edge case is one line. Works the same in Jest and Vitest.

Save yourself the pain

Common mistakes

Oops

Testing private details, like how many times an internal helper ran.

Do this instead

Test inputs and outputs. If you refactor the inside and the output is the same, tests should still pass.

Oops

Only testing the happy path with normal input.

Do this instead

Spend most of your tests on edge cases: empty, zero, too long, wrong type.

Your mission

Break-proof a utility

~25 min

Quick check

Which of these is a true unit test?

Go deeper

  1. 1Write unit tests for 3-4 pure functions in one of your projects.
  2. 2Practice testing edge cases (empty input, zero, negative numbers), not just the happy path.
  3. 3Learn the AAA pattern: Arrange, Act, Assert.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge