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

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【^1†L28-L52】.

Step-by-Step Test Execution

1. Install Dependencies

Clone the repository and install the workspace packages:

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】:

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【^1†L15-L16】:

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:

# 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 – Integration tests for the bridge runtime
• 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 – Tests for preset persistence logic
• 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, 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 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 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 and shared/storage.test.ts) and web-panel/bridge/src/ for bridge-level integration tests (such as runtime.integration.test.ts).

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}