Testing Client-Side JavaScript in Hugo Projects

Overview

Hugo sites often include client-side JavaScript for interactive features like theme toggles, search functionality, scroll handlers, and dynamic content loading. Testing this code requires special consideration because it runs in a browser environment with access to the DOM, window, and document objects. This guide covers how to test both pure utility functions and DOM-dependent code using Bun's built-in test runner with happy-dom for DOM mocking.

Test Setup with Bun Test

Bun's Built-In Test Runner

Bun includes a fast, Jest-compatible test runner that requires zero configuration for basic tests. The runner automatically discovers test files and provides familiar assertion APIs.

# Run all tests
bun test

# Run via package.json script (PREFERRED)
bun run test