How to Write Unit Tests for a Web App (Beginner’s Guide)

by | Blog

If you’re building a web application, writing unit tests might seem like an optional or even intimidating task—especially if you’re just starting out. But testing is one of the most important skills you can develop as a developer. It ensures your app works as intended and helps prevent bugs from sneaking in during future development. This guide will introduce you to the basics of writing unit tests for a web app, in a way that’s both approachable and practical.

TL;DR (Too Long; Didn’t Read)

Unit testing is a key part of reliable software development. It involves testing individual components or “units” of your code to ensure they function as expected. This guide will walk you through how to set up your testing environment, write your first unit tests, and understand common testing tools and best practices—all with a beginner-friendly approach. Even if you’ve never written a unit test before, you’ll be equipped to start testing your web apps confidently by the end.

What Are Unit Tests?

Unit tests are automated tests that check the functionality of a specific piece of your application’s code—typically a single function or method. Unlike integration tests or end-to-end tests that look at how components interact, unit tests zoom in to focus on one job at a time.

For example, if you have a function that calculates tax, a unit test would feed it different values and validate that the correct results are returned.

Why You Should Write Unit Tests

Here are some good reasons to start writing unit tests from day one:

  • Catch bugs early: Unit tests detect issues before your code even reaches a browser.
  • Improve code reliability: Tests act as a safety net when making changes or adding new features.
  • Speed up development: Once you develop a good test suite, debugging becomes easier and faster.
  • Boost confidence: Whether it’s a small tweak or a major refactor, passing tests assure you everything still works.

Setting Up Your Testing Environment

Before you write your first test, you’ll need a testing framework. There are several options depending on your tech stack, but here are some common choices:

  • JavaScript (React, Angular, Vue): Jest, Mocha, Jasmine
  • Python (Django, Flask): PyTest, unittest
  • Ruby on Rails: RSpec, Minitest

Assuming you’re building a JavaScript web app, here’s how you might set up with Jest:

npm init -y
npm install --save-dev jest

Update your package.json file:

"scripts": {
  "test": "jest"
}

Now you’re ready to go! Create a file like mathUtils.test.js to start writing tests.

Your First Unit Test

Let’s write a simple function and a test to go with it.

// mathUtils.js
function add(a, b) {
  return a + b;
}

module.exports = add;

// mathUtils.test.js
const add = require('./mathUtils');

test('adds 2 + 3 to equal 5', () => {
  expect(add(2, 3)).toBe(5);
});

When you run npm test, Jest will execute the test and tell you if it passed or failed. It’s that simple!

Writing Better Tests: Tips and Tricks

Once you’re up and running with basic tests, take things further with these best practices:

1. Keep Your Units Small

Write small, focused functions that do one thing well. This makes them easier to test—and to re-use.

2. Test Both Expected and Unexpected Scenarios

Include test cases for:

  • Valid inputs (happy path)
  • Edge cases (zero, null, undefined)
  • Invalid inputs (bad types, missing data)

3. Name Your Tests Clearly

Write test names like full sentences that describe what they check:

test('should return null when input is invalid', () => {...})

4. Isolate Units From Each Other

Each test should run independently. Avoid relying on shared state or global variables. Mock dependencies to remove external factors.

5. Aim for a Good Mix of Test Coverage

Test functions, components, and services. Focus on code that contains logic—not just getters, setters, or boilerplate UI labels.

Unit Tests and Front-End Frameworks

If you’re working with a UI framework like React or Angular, unit tests still apply. You can test components the same way you test functions.

Example: Testing a React Component

Let’s say you have a <Button /> component:

// Button.js
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

export default Button;

Using React Testing Library and Jest, you can write a unit test like this:

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with correct label', () => {
  render(<Button label="Submit" onClick={() => {}} />);
  expect(screen.getByText('Submit')).toBeInTheDocument();
});

Event simulation also becomes simple:

test('calls onClick when button is clicked', () => {
  const handleClick = jest.fn();
  render(<Button label="Click Me" onClick={handleClick} />);
  fireEvent.click(screen.getByText('Click Me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Common Mistakes to Avoid

Even experienced developers can fall into a few testing pitfalls. Watch out for:

  • Over-testing or under-testing: Aim for meaningful tests, but don’t test trivial code that has zero logic.
  • Testing implementation instead of behavior: Focus on what the function or component should do, not how it does it.
  • Skipping tests for time: Tests save time in the long run. Skipping them often leads to costly debugging sessions.

How to Use Mocking

Sometimes, you need to mock APIs, databases, or dependencies that your function relies on. Testing frameworks like Jest make this easy.

// Mocking a fetch call
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ id: 1, name: 'John' })
  })
);

With mocks, you control external data and make tests more predictable and faster.

Continuously Running Tests

Make sure your tests run automatically:

  • Use watch mode (e.g., jest --watch) while coding.
  • Integrate with a CI/CD pipeline like GitHub Actions or Travis CI.

Where to Go From Here

If you’re excited about what you’ve learned so far, great! There’s plenty more to explore:

  • Try Test-Driven Development (TDD)
  • Learn about Integration and E2E testing
  • Dive into coverage reports and performance optimization

Most importantly, practice writing tests as part of your normal workflow. The more you write, the more natural it becomes.

Final Thoughts

Unit testing is a superpower that turns ordinary developers into confident, bug-squashing pros. It sharpens your coding skills, helps you write more maintainable code, and saves everyone on your team time and stress. Don’t worry about getting it perfect right away—just start small, write meaningful tests, and build the habit.

Once you start thinking in

Pin It on Pinterest