# How to Run Tests for Wand Enhancer Locally: Complete Node.js Setup Guide

> Learn how to run Wand Enhancer tests locally with Node.js. Follow our straightforward guide to set up your environment and execute tests in minutes.

- Repository: [k1tbyte/Wand-Enhancer](https://github.com/k1tbyte/Wand-Enhancer)
- Tags: how-to-guide
- Published: 2026-07-13

---

**To run tests for Wand Enhancer locally, execute `pnpm test` in the `web-panel` directory, which first builds the Electron bridge via `web-panel/bridge/build.mjs` and then runs the Vitest suite.**

Wand Enhancer is an open-source application with a comprehensive test suite located in the **web-panel** workspace. The testing infrastructure relies on **Vitest** for unit and integration testing, coupled with a mandatory build step for the Electron bridge that generates runtime dependencies. Understanding how to run tests for Wand Enhancer locally ensures you can validate changes to the trainer presets, storage modules, and bridge runtime before submitting contributions.

## Prerequisites

Before running the test suite, ensure your environment meets these requirements:

- **Node.js ≥ 20** – Required for the modern ESM and TypeScript features used in the build pipeline
- **pnpm** – The package manager used throughout the repository (install via `npm i -g pnpm`)
- **Git** – Optional, for cloning the repository

All test dependencies—including Vitest, jsdom, and testing-library—are declared in [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json)【^1†L28-L52】.

## Step-by-Step Test Execution

### 1. Install Dependencies

Clone the repository and install the workspace packages:

```bash
git clone https://github.com/k1tbyte/Wand-Enhancer.git
cd Wand-Enhancer/web-panel
pnpm install

```

This installs both runtime and development dependencies required by the bridge and UI layers.

### 2. Build the Electron Bridge

The test suite depends on compiled bridge artifacts. The build script at `web-panel/bridge/build.mjs` generates `dist/bridge.cjs` and the default renderer scripts【^1†L10-L11】:

```bash
pnpm run build:bridge

```

This step is **mandatory** before running any tests, as the UI layer imports from the compiled bridge output.

### 3. Run the Vitest Suite

Execute the full test command defined in [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json)【^1†L15-L16】:

```bash
pnpm test

```

This expands to `pnpm build:bridge && vitest run`, which discovers all `*.test.*` files under `web-panel/src` and `web-panel/bridge/src`.

For development workflows, you can run the steps manually or use watch mode:

```bash

# Build once, then watch for changes

pnpm run build:bridge
pnpm vitest --watch

# Or run with coverage reporting

pnpm test -- --coverage

# Launch the Vitest UI for interactive debugging

pnpm test -- --ui

```

## Understanding the Test Structure

### Bridge-Level Tests

The bridge contains the runtime code that facilitates communication between the Electron main process and the renderer. Key test files include:

- [`web-panel/bridge/src/runtime.integration.test.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/bridge/src/runtime.integration.test.ts) – Integration tests for the bridge runtime
- [`web-panel/bridge/src/websocket-codec.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/bridge/src/websocket-codec.ts) – Module exercised by bridge tests for WebSocket protocol handling

### UI-Level Tests

The UI layer contains unit tests for storage mechanisms and state management:

- [`web-panel/src/trainer/presets/preset-storage.test.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/trainer/presets/preset-storage.test.ts) – Tests for preset persistence logic
- [`web-panel/src/shared/storage.test.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/shared/storage.test.ts) – Tests for the shared storage utilities

### Configuration

The test environment is configured in [`web-panel/vitest.config.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/vitest.config.ts), which sets up the jsdom environment, global mocks, and coverage options. The environment is pure TypeScript/Node and requires no external services to run.

## Summary

- **Run tests** by executing `pnpm test` in the `web-panel` directory, which automatically handles the build step and Vitest execution
- **Prerequisites** include Node.js ≥ 20 and the pnpm package manager
- **Bridge compilation** via `web-panel/bridge/build.mjs` is required to generate `dist/bridge.cjs` before tests can execute
- **Test files** are co-located with source code using the `*.test.*` pattern in both `web-panel/src` and `web-panel/bridge/src`

## Frequently Asked Questions

### What command runs all tests in Wand Enhancer?

Execute `pnpm test` from the `web-panel` directory. According to the [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json) definition, this runs the `build:bridge` script to generate the bridge artifacts, then invokes `vitest run` to execute all `*.test.*` files under `web-panel/src` and `web-panel/bridge/src`.

### Why do I need to build the bridge before running tests?

The bridge contains the runtime code (`bridge.cjs`) and default renderer scripts that the UI layer depends on during test execution. The build process defined in [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json) under the `build:bridge` script must complete first so that Vitest can import and test against the compiled bridge modules.

### Can I run tests in watch mode for development?

Yes. After running `pnpm run build:bridge` once, you can start Vitest in watch mode with `pnpm vitest --watch`. Alternatively, pass the `--ui` flag to `pnpm test` to launch the Vitest UI for interactive debugging and browser-based test exploration.

### Where are the test files located in the repository?

Test files follow the `*.test.*` pattern and are located in `web-panel/src/` for UI components (such as [`trainer/presets/preset-storage.test.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/trainer/presets/preset-storage.test.ts) and [`shared/storage.test.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/shared/storage.test.ts)) and `web-panel/bridge/src/` for bridge-level integration tests (such as [`runtime.integration.test.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/runtime.integration.test.ts)).