Testing and Documentation: Vitest & Storybook

A project is only as good as its tests and documentation. Without them, a codebase eventually becomes a "black box"—scary to touch and impossible to explain. To ensure this portfolio remains "bulletproof" as it grows, I've integrated Vitest for testing and Storybook for living documentation.

Why Vitest?

Vitest is a blazing fast unit testing framework powered by Vite. In the past, setting up Jest with a Next.js project could be a configuration nightmare. Because Vitest shares the same transformation pipeline as our development server, it "just works" with our existing setup.

Unit Testing Components

I've added unit tests for our core UI components to ensure they behave as expected. For example, the Button component:

import { render, screen } from "@testing-library/react";
import { Button } from "../button";
 
describe("Button", () => {
  it("renders correctly", () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText("Click me")).toBeInTheDocument();
  });
 
  it("applies variant classes", () => {
    render(<Button variant="destructive">Delete</Button>);
    const button = screen.getByText("Delete");
    expect(button).toHaveClass("text-destructive");
  });
});

These tests catch regressions early. If I decide to refactor the button's styling or logic, I can run pnpm vitest run and immediately see if I've broken any existing functionality.

Storybook: The Living Style Guide

Storybook allows me to develop and document components in isolation. This is crucial for maintaining a consistent design system.

The Benefits of Isolation

When building a complex component like the ResumeTimeline, it's helpful to see how it looks with various data sets without having to refresh the entire app and navigate to the resume page. Storybook provides a "sandbox" for this.

Accessibility (a11y) Integration

I've integrated the @storybook/addon-a11y which automatically audits my components against Web Content Accessibility Guidelines (WCAG). This ensures that the site is usable for everyone, including those using screen readers or navigating solely via keyboard.

Automated Documentation

By using Storybook's autodocs feature, I've created a living documentation site that developers (including my future self) can use to understand how to use the components I've built.

const meta: Meta<typeof Button> = {
  title: "UI/Button",
  component: Button,
  tags: ["autodocs"],
  // ...
};

Conclusion: The "Bulletproof" Mindset

Building this site wasn't just about creating a pretty UI. It was about applying professional engineering standards to a personal project. By combining a feature-based architecture, efficient CLI tools, and a robust testing suite, I've created a foundation that is easy to maintain and a joy to develop on.

I hope this series has provided some insight into the modern web development workflow. Happy coding!