Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kevinrodriguezmorales/siget/llms.txt

Use this file to discover all available pages before exploring further.

Siget uses Vitest (^4.0.8) as its test runner — a fast, Vite-native tool that shares your project’s existing build pipeline. Tests execute in a jsdom environment, giving you real DOM APIs without spinning up a browser, and Angular’s TestBed utilities work exactly as you’d expect inside Vitest’s describe/it blocks.

​
Running Tests

Both commands below invoke the same test architect target defined in angular.json, which is powered by the @angular/build:unit-test builder: 
# Using the Angular CLI directly
ng test

# Using the npm script alias
npm test
The test builder is configured under the "test" architect target in angular.json with "builder": "@angular/build:unit-test". No additional runner configuration file is needed — the builder wires Vitest up automatically.

​
The App Test File

Siget ships with a spec file at src/app/app.spec.ts that covers the root App component. This is the canonical pattern to follow when writing tests for your own components: 
import { TestBed } from '@angular/core/testing';
import { App } from './app';

describe('App', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [App],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(App);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it('should render title', async () => {
    const fixture = TestBed.createComponent(App);
    await fixture.whenStable();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, siget');
  });
});

​
TestBed.configureTestingModule and Standalone Components

Angular 21 components are standalone by default, meaning they declare their own imports rather than belonging to an NgModule. When you configure the testing module for a standalone component, you pass it through the imports array — not declarations: 
// ✅ Correct — standalone component goes in imports
await TestBed.configureTestingModule({
  imports: [App],
}).compileComponents();

// ❌ Incorrect — declarations is for NgModule-based components
await TestBed.configureTestingModule({
  declarations: [App],
}).compileComponents();
Calling .compileComponents() after configuration is still required — it compiles the component’s external template and styles asynchronously before the test body runs.

​
fixture.whenStable() and Signals

The App component uses Angular’s signal() primitive for its title property. Although signal updates are synchronous, calling await fixture.whenStable() ensures that all pending microtasks and async rendering work have completed before you query the DOM. This is especially important when:
  • A component loads data in ngOnInit or via an effect()
  • You’re checking DOM output that depends on signal-driven template expressions
  • You use async/await in lifecycle hooks
Always prefer fixture.whenStable() over fixture.detectChanges() alone when your template reads from signals or async sources.

​
Writing a Test for a New Component

Follow these steps to add a unit test for any new standalone component you create in Siget.
1

Generate or create your component

Use the Angular CLI to scaffold a new standalone component. The CLI will automatically create a matching spec file:
ng generate component features/counter
This produces src/app/features/counter/counter.ts and src/app/features/counter/counter.spec.ts.
2

Import TestBed and your component

Open the generated spec file and confirm it imports both TestBed and the component under test:
import { TestBed } from '@angular/core/testing';
import { Counter } from './counter';
3

Configure the testing module

Inside a beforeEach, configure TestBed with your standalone component in the imports array:
beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [Counter],
  }).compileComponents();
});
4

Create a fixture and write assertions

Use TestBed.createComponent to get a fixture, then assert against the component instance or its rendered DOM:
it('should display the initial count', async () => {
  const fixture = TestBed.createComponent(Counter);
  await fixture.whenStable();
  const el = fixture.nativeElement as HTMLElement;
  expect(el.querySelector('span')?.textContent).toContain('0');
});
5

Run the tests

Execute ng test (or npm test) and confirm the new spec appears in the output with a passing status.
ng test

​
Key Vitest + Angular TestBed APIs

APIDescription
TestBed.configureTestingModule({ imports: [MyComponent] })Configure a standalone component for testing
TestBed.createComponent(MyComponent)Create a component fixture
fixture.componentInstanceGet the live component instance
fixture.nativeElementGet the root DOM element
fixture.whenStable()Wait for all async operations and microtasks
fixture.detectChanges()Trigger a synchronous change detection cycle

​
DOM Simulation with jsdom

Siget includes jsdom (^28.0.0) as a dev dependency. The @angular/build:unit-test builder configures Vitest to use jsdom as the test environment, which means:
  • DOM APIs such as querySelector, textContent, and HTMLElement are available in every test
  • No real browser process is launched — tests run entirely in Node.js
  • The environment is reset between test files, preventing state leakage
You do not need to configure jsdom manually; the builder handles environment selection automatically.
Run Vitest in watch mode for a tight feedback loop during development. Pass the --watch flag through the Angular CLI:
ng test --watch
Vitest will re-run only the affected spec files whenever you save a source or test file.

Build docs developers (and LLMs) love

Get started for freeTalk to us