Solid.js Testing — Component and Logic Testing

In this tutorial, you will learn about Solid.js Testing. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js testing: write unit tests for signals and components, use Vitest, test reactivity, and verify DOM output.

In this lesson, you'll set up Vitest for Solid.js, test signals and effects, render components, and verify reactive behavior.

What You'll Learn

How to install Vitest, test signals and derived values, render components for DOM testing, and test async resources.

Why It Matters

Testing ensures your reactive logic works correctly. Solid.js's fine-grained reactivity requires testing strategies different from React.

Real-World Use

Doda Browser's Solid.js components have unit tests for signals, memos, and component rendering in CI.

flowchart LR
    A[Write Tests] --> B[Vitest Runner]
    B --> C[Signal Tests]
    B --> D[Component Tests]
    B --> E[Resource Tests]
    style B fill:#2c4f7c,color:#fff

Setup Vitest

npm install -D vitest solid-testing-library @testing-library/jest-dom

Configure in vite.config.js:

/// <reference types="vitest" />
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [solidPlugin()],
  test: {
    environment: "jsdom",
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
});

Testing Signals

import { test, expect } from "vitest";
import { createSignal, createMemo } from "solid-js";

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

  setCount(5);
  expect(count()).toBe(5);
});

test("memo derives value from signal", () => {
  const [count, setCount] = createSignal(2);
  const doubled = createMemo(() => count() * 2);

  expect(doubled()).toBe(4);
  setCount(3);
  expect(doubled()).toBe(6);
});

Testing Components

import { test, expect } from "vitest";
import { render, screen } from "solid-testing-library";
import Counter from "./Counter";

test("renders counter and increments", async () => {
  render(() => <Counter />);

  expect(screen.getByText("Count: 0")).toBeDefined();

  const button = screen.getByRole("button");
  button.click();

  expect(screen.getByText("Count: 1")).toBeDefined();
});

Testing Async Resources

import { test, expect } from "vitest";
import { createResource } from "solid-js";

test("resource fetches data", async () => {
  const fetcher = async () => {
    return { name: "Alice" };
  };

  const [data] = createResource(fetcher);
  await data;

  expect(data().name).toBe("Alice");
});

Common Mistakes

1. Not using solid-testing-library: Regular DOM testing tools don't work with Solid.js's reactive system.
2. Forgetting await for async operations: Resource fetching and DOM updates are async. Await them before assertions.
3. Testing implementation details: Test what the user sees, not internal signal values.
4. Not cleaning up between tests: Each test should render fresh components. Solid.js components need cleanup between tests.
5. Testing without reactive context: Signals and effects need a reactive root. Use render or createRoot for testing.

Practice Questions

1. What Testing Library is recommended for Solid.js? Answer: solid-testing-library which wraps @testing-library/dom with Solid.js-specific adaptations.

2. How do you test a component's rendered output? Answer: Use render(() => <Component />) and query the DOM with screen.getByText() or other queries.

3. What environment does Solid.js testing need? Answer: jsdom environment for DOM APIs and Solid.js's reactive system.

4. How do you test reactive signal logic? Answer: Directly test signals and memos by creating them in test functions and asserting their values.

Challenge

Write a test suite for a Counter component: test initial render, click increment/decrement, test that it doesn't go below zero, and test the memoized doubled value.

Mini Project

Create a test suite for a todo list app: test adding todos, toggling completion, filtering (all/active/completed), and clearing completed. Use both signal-level and component-level tests.

FAQ

What's Next

Learn about Solid.js SSR and Hydration for server-side rendering with Solid.js.