Stop 13 · Testing the Full StackTopics · 1/6

Unit Testing (Frontend)

Part of the Full Stack 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 individual React components and utility functions in isolation — using React Testing Library's philosophy of testing what users see, not internal implementation details.

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

6123456789

5123456789

98765

98765432a0

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
Arrange
Set up the input and anything the function needs.
2
Act
Call the function once.
3
Assert
Check the output is exactly what you expected.

See it in code

Walk through the code

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

1Write a test that renders a component and asserts on visible text.
2Practice `userEvent` to simulate clicks and typing.
3Test a custom hook in isolation using React Testing Library's hook-testing utilities.