Stuck on a Bug or Jira Ticket?

OutlineDev
Back to Guides
AngularTestingSignalsJestVitest

Testing Signals: Fast Unit Tests in 2026

T
Test Engineer
Featured Guide 15 min read

Stop using fakeAsync.

Testing Observables was painful. You needed marbles, tick(), and complex async schedulers.

Signals are synchronous by default. You set a value, and the computed updates instantly (or lazily upon access). The test code reads like a story.

02. Direct Access

No subscription needed. Just call the signal function.

// counter.component.spec.ts
it
('should double the count', () => {'{'}
  component.count.set(2);
  TestBed.flushEffects(); // Run effect() blocks
  
expect
(component.doubleCount()).toBe(4);
{'}'});

03. Mocking Signals

Deep Dive: Mocking Read-Only Signals

Often you need to mock a Service that exposes a read-only Signal<T>.

Technique: Just create a writable signal and cast it!
userService.currentUser = signal(mockUser) as unknown as Signal<User>;
Now your test can control the value by calling .set() on the underlying writable signal, even though the component sees it as read-only.

04. The Senior Engineer's Take

Effect Testing

Normally, you shouldn't granularly test effect() logic as it's implementation detail. Focus on testing the Computed results.

If you must test an effect (e.g. it writes to localStorage), you must call TestBed.flushEffects() because effects schedule asynchronously.

⚡ Interactive Playground

import React, { useState } from 'react';

// 🧪 Test Runner Visualizer

export default function TestDemo() {
    const [state, setState] = useState('idle'); // idle, running, passed
    
    const runTest = async () => {
        setState('running');
        await wait(600);
        setState('passed');
    };

    const wait = (ms) => new Promise(r => setTimeout(r, ms));

    return (
        <div className="bg-slate-50 dark:bg-slate-950 p-8 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-xl">
             <div className="flex justify-between items-center mb-10">
                <h3 className="text-2xl font-black text-gray-900 dark:text-white flex items-center gap-3">
                    <span className="text-green-500">🧪</span> Test Runner (Vitest)
                </h3>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                
                {/* Code Block */}
                <div className="bg-gray-900 rounded-xl p-6 font-mono text-sm relative overflow-hidden text-gray-300 border border-gray-800">
                    <div className="absolute top-0 left-0 right-0 h-6 bg-gray-800 flex items-center px-4 text-xs text-gray-400">
                        user.store.spec.ts
                    </div>
                    <div className="mt-6 space-y-1">
                        <div className="text-purple-400">it(<span className="text-green-400">'updates computed'</span>, () => {'{'}</div>
                        <div className="pl-4">store.users.set([ 'A', 'B' ]);</div>
                        <div className="pl-4 text-gray-500">// No manual "tick()" needed!</div>
                        <div className="pl-4">expect(store.count()).toBe(2);</div>
                        <div className="text-purple-400">{'}'});</div>
                    </div>
                </div>

                {/* Status */}
                <div className="flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800">
                    {state === 'idle' && (
                         <div className="text-center">
                             <div className="mx-auto text-4xl mb-4 text-gray-300">▶️</div>
                             <button onClick={runTest} className="px-6 py-2 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600 transition">
                                 Run Test
                             </button>
                         </div>
                    )}
                    {state === 'running' && (
                         <div className="text-center">
                             <div className="mx-auto text-4xl mb-4 animate-spin">⏳</div>
                             <p className="font-bold text-gray-700 dark:text-white">Executing...</p>
                         </div>
                    )}
                    {state === 'passed' && (
                         <div className="text-center animate-in zoom-in">
                             <div className="mx-auto text-6xl mb-4 text-green-500">✅</div>
                             <p className="font-bold text-2xl text-green-600 dark:text-green-400">PASSED</p>
                             <p className="text-sm text-gray-400 mt-2">Duration: 4ms</p>
                             <button onClick={() => setState('idle')} className="mt-6 text-xs text-gray-500 underline">Reset</button>
                         </div>
                    )}
                </div>

            </div>
        </div>
    );
}
Open on CodeSandboxOpen Sandbox
Personalized Engineering Mentorship
4.9/5 from 250+ Engineers Coached

Stuck on a Complex Codebase or Preparing for Senior Dev Interviews?

Whether you need urgent sprint job support to fix stubborn bugs in production, architectural guidance for your enterprise app, or targeted 1:1 mentorship to land a senior role — get real-time screen-share assistance.

1:1 Deep-Dive Mentorship

Weekly 1-on-1 live coding, design pattern reviews, and customized roadmaps in React, Node, TS, Playwright, and Mongo.

Live IT Job & Sprint Support

Urgent on-demand screen-share assistance to unblock sprint deliverables, debug memory leaks, and optimize slow queries.

FAANG Mock Coding Rounds

Simulated machine coding rounds with line-by-line code reviews, rubric scoring, and Google X-Y-Z resume optimization.

Chat on WhatsApp DirectlyBrowse Free Weekend Cohorts