Understanding Component Testing: A Practical Guide

Introduction As part of my personal website project, serhatozdursun.com, I have implemented component tests to validate the functionality of various UI elements. You can check out the component test package in my GitHub repository. This project initially served as a practice ground for improving my TypeScript and DevOps skills. I previously wrote a detailed article on the CI/CD and software development process from a QA perspective, which you can read here. That article was high-level and broad, so I’ve decided to start a new series focusing on specific topics, beginning with component testing. What is a Component Test? A component test is a type of front-end test that verifies whether an individual component behaves as expected in isolation. These tests ensure that the UI elements and their interactions function correctly, without requiring the entire application to run. Key Features of Component Tests: 1. Test a single component in isolation. 3. Simulate user interactions (clicks, form submissions, input validation, etc.). 5. Use mocks and spies to prevent real API calls. 7. Ensure the correct rendering of UI elements. Writing a Component Test: Example Breakdown Let's analyze a real example of a component test from my ContactForm component: import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import ContactForm from '../components/ContactForm'; import userEvent from '@testing-library/user-event'; jest.mock('emailjs-com', () => ({ send: jest.fn().mockResolvedValue({ text: 'Email sent' }), })); describe('ContactForm', () => { test('displays error message when email exceeds max length', () => { render(); fireEvent.click(screen.getByText('Send a message')); fireEvent.change(screen.getByPlaceholderText('Your Email'), { target: { value: 'test@test.com'.repeat(10) }, }); expect(screen.getByText('Email cannot exceed 50 characters.')).toBeInTheDocument(); }); }); Breakdown of the Test Rendering the Component: The render() function mounts the ContactForm component in a virtual DOM. Simulating User Interaction: Clicking the 'Send a message' button. Typing an excessively long email ('test@test.com'.repeat(10)). Checking the Expected Output: The test ensures that the correct error message appears ('Email cannot exceed 50 characters.'). This test helps us verify that the form correctly handles validation and displays error messages for incorrect user input. Component Tests vs. Other Types of Tests Component testing is distinct from other testing approaches, and understanding these differences is crucial. ❌ What Component Tests Are Not: ❌ Integration Tests → Component tests do not interact with multiple modules or external services like APIs. They focus solely on the behavior of a single component. ❌ End-to-End (E2E) Tests → These tests do not simulate a full user journey within a real browser. Instead, they test components in isolation. ❌ Why Component Tests Are Not Pure Unit Tests: A pure unit test typically verifies a single function or method in complete isolation, without rendering the UI. In contrast, component tests render an entire component, meaning they check how multiple elements interact (e.g., inputs, buttons, validation messages). Since user interactions are simulated, component tests go beyond typical unit testing, though they can still be considered unit tests in the context of UI testing. ✅ Where Component Tests Fit: To better understand where component tests belong, let’s break down testing levels in software development: Unit Tests (Lowest Level)

Mar 13, 2025 - 19:02

Understanding Component Testing: A Practical Guide

Introduction

As part of my personal website project, serhatozdursun.com, I have implemented component tests to validate the functionality of various UI elements. You can check out the component test package in my GitHub repository.

This project initially served as a practice ground for improving my TypeScript and DevOps skills. I previously wrote a detailed article on the CI/CD and software development process from a QA perspective, which you can read here. That article was high-level and broad, so I’ve decided to start a new series focusing on specific topics, beginning with component testing.

What is a Component Test?

A component test is a type of front-end test that verifies whether an individual component behaves as expected in isolation. These tests ensure that the UI elements and their interactions function correctly, without requiring the entire application to run.

Key Features of Component Tests:

1. Test a single component in isolation.
3. Simulate user interactions (clicks, form submissions, input validation, etc.).
5. Use mocks and spies to prevent real API calls.
7. Ensure the correct rendering of UI elements.

Writing a Component Test: Example Breakdown

Let's analyze a real example of a component test from my ContactForm component:

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import ContactForm from '../components/ContactForm';
import userEvent from '@testing-library/user-event';

jest.mock('emailjs-com', () => ({
  send: jest.fn().mockResolvedValue({ text: 'Email sent' }),
}));

describe('ContactForm', () => {
  test('displays error message when email exceeds max length', () => {
    render(<ContactForm />);
    fireEvent.click(screen.getByText('Send a message'));

    fireEvent.change(screen.getByPlaceholderText('Your Email'), {
      target: { value: 'test@test.com'.repeat(10) },
    });

    expect(screen.getByText('Email cannot exceed 50 characters.')).toBeInTheDocument();
  });
});

Breakdown of the Test

Rendering the Component: The render() function mounts the ContactForm component in a virtual DOM.
Simulating User Interaction:
- Clicking the 'Send a message' button.
- Typing an excessively long email ('test@test.com'.repeat(10)).
Checking the Expected Output:
- The test ensures that the correct error message appears ('Email cannot exceed 50 characters.').

This test helps us verify that the form correctly handles validation and displays error messages for incorrect user input.

Component Tests vs. Other Types of Tests

Component testing is distinct from other testing approaches, and understanding these differences is crucial.

❌ What Component Tests Are Not:

❌ Integration Tests → Component tests do not interact with multiple modules or external services like APIs. They focus solely on the behavior of a single component.

❌ End-to-End (E2E) Tests → These tests do not simulate a full user journey within a real browser. Instead, they test components in isolation.

❌ Why Component Tests Are Not Pure Unit Tests:

A pure unit test typically verifies a single function or method in complete isolation, without rendering the UI.

In contrast, component tests render an entire component, meaning they check how multiple elements interact (e.g., inputs, buttons, validation messages).

Since user interactions are simulated, component tests go beyond typical unit testing, though they can still be considered unit tests in the context of UI testing.

✅ Where Component Tests Fit:

To better understand where component tests belong, let’s break down testing levels in software development:

Unit Tests (Lowest Level)

Read More

Tags:

Previous Article

How to Build an Internal Data Application Using Google Sheets as a Data Source

Next Article

Why Every Developer Should Have a Side Project (Even If You’re Busy)

Related Posts

OData with .NET core: Essential Concepts & Best Practices

Mar 11, 2025 0

#ModelMondays - A Weekly Series To Build Our AI Model IQ

Mar 10, 2025 0

How to Create Stunning Scroll Animations in CSS with Tr...

Mar 24, 2025 0

Name

Email

Comment