Raj Aryan

Posted on Apr 28

Front-End Unit Testing: A Step-by-Step Guide from Beginner to Advanced

#javascript #react #nextjs #frontend

Unit testing is a crucial part of front-end development that ensures your code works as expected and prevents bugs before they reach production. Whether you're just starting or looking to level up your testing skills, this guide will take you from beginner to advanced in front-end unit testing.

1. What is Unit Testing?

Unit testing involves testing individual units (functions, components, or modules) of your code in isolation to verify they behave as intended.

Why Unit Test?

✅ Catches bugs early

✅ Improves code quality

✅ Makes refactoring safer

✅ Documents expected behavior

2. Beginner: Setting Up & Writing Your First Test

Step 1: Choose a Testing Framework

Popular front-end testing frameworks:

Jest (Recommended for React, Vue, and JavaScript)
Mocha + Chai (Flexible but needs more setup)
Vitest (Fast, compatible with Vite)

Step 2: Install Jest

npm install --save-dev jest

Add a test script in package.json:

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

Step 3: Write Your First Test

Example: Testing a simple function.

sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

sum.test.js

const sum = require('./sum');

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

Run the test:

npm test

🎉 Congratulations! You just wrote your first unit test!

3. Intermediate: Testing React Components

Step 1: Install React Testing Tools

npm install --save-dev @testing-library/react @testing-library/jest-dom

Step 2: Test a React Component

Button.js

import React from 'react';

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}
export default Button;

Button.test.js

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

test('Button calls onClick when clicked', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick}>Click Me</Button>);

  fireEvent.click(getByText('Click Me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Step 3: Test Component Rendering

test('Button renders correctly', () => {
  const { getByText } = render(<Button>Submit</Button>);
  expect(getByText('Submit')).toBeInTheDocument();
});

4. Advanced: Mocking & Asynchronous Testing

Mocking API Calls (Fetch, Axios)

fetchData.js

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

fetchData.test.js

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ data: 'Mocked data' }),
  })
);

test('fetchData returns mocked data', async () => {
  const data = await fetchData('https://api.example.com');
  expect(data).toEqual({ data: 'Mocked data' });
  expect(fetch).toHaveBeenCalledWith('https://api.example.com');
});

Testing Custom Hooks

Use @testing-library/react-hooks:

npm install --save-dev @testing-library/react-hooks

useCounter.js

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

useCounter.test.js

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('useCounter increments count', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

5. Best Practices for Effective Unit Testing

✔ Test behavior, not implementation

✔ Keep tests small & focused

✔ Use descriptive test names

✔ Mock external dependencies

✔ Run tests in CI/CD pipelines

Conclusion

Unit testing is a skill that improves with practice. Start small, test critical logic first, and gradually expand your test coverage.

🔗 Further Learning:

Happy testing! 🚀

What’s your biggest challenge with unit testing? Let’s discuss in the comments! 👇

DEV Community