testing.md

technology	SolidJS
domain	frontend
level	Senior/Architect
version	1+
tags	solidjs testing best-practices clean-code reactivity vibe-coding
ai_role	Senior SolidJS Testing Expert
last_updated	2026-04-05

🧪 SolidJS Testing Best Practices

⬆️ Back to Top

📖 Context & Scope

• Primary Goal: Enforce testing practices optimized for Solid's fine-grained reactivity.
• Target Tooling: Cursor, Windsurf, Antigravity.
• Tech Stack Version: SolidJS 1+

Important

Strict Constraints for AI:

• Always wrap test setups involving reactivity in createRoot if testing outside the DOM.
• Never mock Solid's core reactivity primitives (like createSignal).

---

🚀 I. Testing Reactivity

🚨 1. Orphaned Signals in Tests

Note

Context: Testing state management logic independent of a UI component.

❌ Bad Practice

test('signal updates', () => {
  const [count, setCount] = createSignal(0);
  setCount(1);
  expect(count()).toBe(1);
});

⚠️ Problem

Creating signals outside of a reactive root (like a component or createRoot) can lead to memory leaks in complex test suites, as effects and computations aren't properly disposed of.

✅ Best Practice

import { createRoot, createSignal } from 'solid-js';

test('signal updates', () => {
  createRoot((dispose) => {
    const [count, setCount] = createSignal(0);
    setCount(1);
    expect(count()).toBe(1);
    dispose();
  });
});

🚀 Solution

Wrap reactive primitives in createRoot and invoke the dispose function at the end of the test block. This mimics the component lifecycle and prevents memory leaks.

---

⬆️ Back to Top