### Start Local Development Server

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/README.md

Starts a local development server that reflects changes live without requiring a restart.

```console
yarn start
```

--------------------------------

### Start Docusaurus Dev Server

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Starts the Docusaurus development server for the project documentation. This command should be run from the 'website' directory.

```bash
yarn doc
```

--------------------------------

### Run Example App Tests

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Runs tests across all example applications within the project. This process can take a considerable amount of time.

```bash
yarn test-examples
```

--------------------------------

### Installation

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Install jest-preset-angular and its peer dependencies using npm or yarn.

```APIDOC
## Installation

Install jest-preset-angular and its peer dependencies using npm or yarn.

```bash
npm install -D jest jest-preset-angular @types/jest jest-environment-jsdom jsdom
```
```

--------------------------------

### Install Website Dependencies

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Installs dependencies specifically for the Docusaurus website. Navigate to the 'website' directory before running this command.

```bash
cd website && yarn install
```

--------------------------------

### Setup Component Snapshot Serialization in Setup File

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/snapshot-testing.md

Import and add the componentSnapshotSerializer to expect in your setup test environment file (e.g., setup-jest.ts) to enable component HTML snapshots for all tests.

```typescript
import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

expect.addSnapshotSerializer(componentSnapshotSerializer);
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/README.md

Installs project dependencies using Yarn.

```console
yarn install
```

--------------------------------

### Install jest-preset-angular and Dependencies

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Install jest-preset-angular and its core dependencies using npm or yarn. This command installs the necessary packages as development dependencies.

```bash
npm install -D jest jest-preset-angular @types/jest jest-environment-jsdom jsdom
```

--------------------------------

### Install Dependencies

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Installs project dependencies using Yarn. This command can take a significant amount of time and should not be interrupted.

```bash
yarn install --frozen-lockfile
```

--------------------------------

### Start Development Server

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/README.md

Run 'ng serve' to start the Angular development server. Access the application at http://localhost:4200/. The app reloads automatically on source file changes.

```bash
ng serve
```

--------------------------------

### Global Setup File with Global Mocks (ESM)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Extend the ESM setup file to include custom global mocks by importing './jest-global-mocks'. This is useful for simulating browser environments in ESM projects.

```typescript
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
import './jest-global-mocks';

setupZoneTestEnv();
```

--------------------------------

### Global Setup File with Global Mocks (CJS)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Extend the CommonJS setup file to include custom global mocks by importing './jest-global-mocks'. This allows simulating browser environments for testing.

```typescript
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import './jest-global-mocks';

setupZoneTestEnv();
```

--------------------------------

### Example jest-global-mocks.ts

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Provides example implementations for global browser mocks like `document.doctype`, `window.getComputedStyle`, and `document.body.style.transform` to address JSDOM limitations.

```typescript
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>',
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance'],
    };
  },
});
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});
```

--------------------------------

### Setup Zoneless Test Environment

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Configure the Angular TestBed without zone.js using `setupZonelessTestEnv`. This setup is recommended for improved performance and simplified testing in Angular applications that have disabled zone.js. Error handling for unknown elements and properties can be configured.

```typescript
// setup-jest.ts
import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';

setupZonelessTestEnv({
  errorOnUnknownElements: true,
  errorOnUnknownProperties: true,
});
```

--------------------------------

### Setup HTML Comment Removal in Setup File

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/snapshot-testing.md

Import and add the removeHtmlCommentsSerializer to expect in your setup test environment file (e.g., setup-jest.ts) to enable HTML comment removal for all tests.

```typescript
import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';

expect.addSnapshotSerializer(removeHtmlCommentsSerializer);
```

--------------------------------

### Setup Zoneless TestBed Environment (CJS)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/testbed-environment.md

Use this to configure a zoneless TestBed environment. Import from 'jest-preset-angular/setup-env/zoneless'.

```typescript
import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';

setupZonelessTestEnv({
  //...options
});
```

--------------------------------

### Configure Component Snapshot Serialization with Options in Setup File

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/snapshot-testing.md

Customize component snapshot serialization by providing options like `omitAllCompAttrs: true` when adding the serializer in your setup test environment file.

```typescript
import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

expect.addSnapshotSerializer({
  print: (val, print, indent, options, colors) =>
    componentSnapshotSerializer.print(
      val,
      print,
      indent,
      {
        ...options,
        omitAllCompAttrs: true,
      },
      colors,
    ),
  test: componentSnapshotSerializer.test,
});
```

--------------------------------

### Setup Zone-Based TestBed Environment (CJS)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/testbed-environment.md

Use this to configure a zone-based TestBed environment. Import from 'jest-preset-angular/setup-env/zone'.

```typescript
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';

setupZoneTestEnv({
  //...options
});
```

--------------------------------

### Jest Setup File for Angular Zone Test Environment

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Initializes the Jest environment for Angular testing, including zone.js setup and global mocks. Configure error handling for unknown elements and properties as needed.

```typescript
// setup-jest.ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import './jest-global-mocks';

setupZoneTestEnv({
  errorOnUnknownElements: true,
  errorOnUnknownProperties: true,
});
```

--------------------------------

### Setup Jest Environment (CJS)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Configure the Jest environment for CommonJS modules by importing `setupZoneTestEnv` from `jest-preset-angular/setup-env/zone`. This is typically used in older Node.js versions or specific project setups.

```typescript
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';

setupZoneTestEnv();
```

--------------------------------

### Setup Zone-Based TestBed Environment (ESM)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/testbed-environment.md

Use this to configure a zone-based TestBed environment in ESM format. Import from 'jest-preset-angular/setup-env/zone/index.mjs'.

```typescript
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';

setupZoneTestEnv({
  //...options
});
```

--------------------------------

### Load jQuery in Jest setup file (Method 1)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/troubleshooting.md

To load vendor libraries like jQuery, you can use require in your Jest setup file.

```typescript
window.$ = require('path/to/jquery');
```

--------------------------------

### Load jQuery in Jest setup file (Method 2)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/troubleshooting.md

Alternatively, import jQuery and assign it to global variables in your Jest setup file.

```typescript
import $ from 'jquery';
global.$ = global.jQuery = $;
```

--------------------------------

### Setup Zone.js Test Environment

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Configure the Angular TestBed with zone.js using `setupZoneTestEnv`. This is suitable for standard Angular applications that rely on zone.js for asynchronous operations. You can configure error handling and add extra providers at the platform level.

```typescript
// setup-jest.ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import './jest-global-mocks';

setupZoneTestEnv({
  // Optional: error handling behavior
  errorOnUnknownElements: true,
  errorOnUnknownProperties: true,
  // Optional: extra providers at platform level
  extraProviders: [
    { provide: 'PLATFORM_TOKEN', useValue: 'test-value' },
  ],
});
```

--------------------------------

### Install Desired JSDOM Version

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/jsdom-environment.md

Install the specific JSDOM version you need using npm or yarn. This step is required before configuring Jest.

```bash
npm install -D jsdom@<desired-version>
```

--------------------------------

### Setup Zoneless TestBed Environment (ESM)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/testbed-environment.md

Use this to configure a zoneless TestBed environment in ESM format. Import from 'jest-preset-angular/setup-env/zoneless/index.mjs'.

```typescript
import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';

setupZonelessTestEnv({
  //...options
});
```

--------------------------------

### Full Pre-commit Validation

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Runs the complete suite of pre-commit validation checks, including tests, ESLint, and example app tests.

```bash
yarn test && yarn test-esm && yarn lint && yarn lint-prettier-ci && yarn test-examples
```

--------------------------------

### Import Reflection Libraries in setup-jest.ts

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/troubleshooting.md

If Angular's reflection requirements change, install 'core-js' and import its reflection libraries in your setup-jest.ts file.

```typescript
import 'core-js/es/reflect';
import 'core-js/proposals/reflect-metadata';
```

--------------------------------

### Setup Jest Snapshot Serializer in setup-jest.ts

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/snapshot-testing.md

Import and add the 'no-ng-attributes' serializer in your setup-jest.ts file for global snapshot serialization.

```typescript
import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';

expect.addSnapshotSerializer(removeNgAttributes);
```

--------------------------------

### Setup Jest Environment (ESM)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Configure the Jest environment for ESM modules by importing `setupZoneTestEnv` from `jest-preset-angular/setup-env/zone/index.mjs`. This is suitable for projects using ES Modules.

```typescript
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';

setupZoneTestEnv();
```

--------------------------------

### Jest Configuration with ts-jest and esbuild

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/options.md

A comprehensive Jest configuration example for jest-preset-angular, including module file extensions, snapshot serializers, test environment, transform ignore patterns, and ts-jest transformer options with esbuild processing.

```typescript
import type { Config } from 'jest';

export default {
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/html-comment',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/no-ng-attributes',
  ],
  testEnvironment: 'jsdom',
  transformIgnorePatterns: ['node_modules/(?!(.*\.mjs$|@angular/common/locales/.*\.js$))'],
  transform: {
    '^.+\.(ts|js|mjs|html|svg)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\.(html|svg)$',
      },
    ],
  },
} satisfies Config;
```

--------------------------------

### Install ts-node for TypeScript Jest Configs

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/esm-support.md

Install ts-node as a dev dependency if you are using Jest configuration in TypeScript. This is required for Jest to process TypeScript configuration files.

```bash
npm install -D ts-node
```

--------------------------------

### Component Testing with TestBed

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Example of testing an Angular component using Jest with TestBed configuration, mocking services, and testing user interactions. Requires Angular's HttpClientTestingModule for HTTP requests.

```typescript
// hero-detail.component.spec.ts
import { provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { TestBed, waitForAsync } from '@angular/core/testing';
import { provideRouter, Router } from '@angular/router';
import { RouterTestingHarness } from '@angular/router/testing';
import { jest } from '@jest/globals';
import { of } from 'rxjs';

import { HeroDetailComponent } from './hero-detail.component';
import { HeroDetailService } from './hero-detail.service';
import { Hero } from '../model';

describe('HeroDetailComponent', () => {
  let component: HeroDetailComponent;
  let harness: RouterTestingHarness;

  beforeEach(waitForAsync(async () => {
    await TestBed.configureTestingModule({
      imports: [HeroDetailComponent],
      providers: [
        provideRouter([
          { path: 'heroes/:id', component: HeroDetailComponent },
        ]),
        provideHttpClient(),
        provideHttpClientTesting(),
      ],
    }).compileComponents();
  }));

  it('should display hero name', async () => {
    harness = await RouterTestingHarness.create();
    component = await harness.navigateByUrl('/heroes/1', HeroDetailComponent);

    // Mock HTTP response
    const httpController = TestBed.inject(HttpTestingController);
    const request = httpController.expectOne('api/heroes/?id=1');
    request.flush([{ id: 1, name: 'Superman' }]);
    harness.detectChanges();

    const nameElement = harness.routeNativeElement?.querySelector('span');
    expect(nameElement?.textContent).toBe('Superman');
  });

  it('should save hero with mocked service', async () => {
    const mockService = {
      getHero: jest.fn().mockReturnValue(of({ id: 1, name: 'Batman' })),
      saveHero: jest.fn((hero: Hero) => of(hero)),
    };

    TestBed.overrideComponent(HeroDetailComponent, {
      set: {
        providers: [{ provide: HeroDetailService, useValue: mockService }],
      },
    });

    harness = await RouterTestingHarness.create();
    component = await harness.navigateByUrl('/heroes/1', HeroDetailComponent);
    harness.detectChanges();

    expect(mockService.getHero).toHaveBeenCalled();

    // Simulate save
    const saveButton = harness.routeNativeElement?.querySelector('button');
    saveButton?.click();

    expect(mockService.saveHero).toHaveBeenCalled();
  });
});

```

--------------------------------

### Configure Custom JSDOM Environment

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Use a custom JSDOM environment by specifying 'jest-preset-angular/environments/jest-jsdom-env' in testEnvironment. Ensure you have installed a specific version of jsdom, e.g., 'npm install -D jsdom@24.0.0'.

```typescript
// jest.config.ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createCjsPreset(),
  // Use custom JSDOM environment with your installed version
  testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;

// Install specific JSDOM version:
// npm install -D jsdom@24.0.0

```

--------------------------------

### Create CJS Preset for Node 22.18+

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/presets.md

This TypeScript example demonstrates how to create a CommonJS preset for Jest with Node.js version 22.18 and later. It imports `createCjsPreset` from `jest-preset-angular/presets/index.js`.

```typescript
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

const presetConfig = createCjsPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```

--------------------------------

### Configure Jest Snapshot Serializers

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Default Jest configuration includes all snapshot serializers. Custom serializer configuration can be done in a setup file.

```typescript
// jest.config.ts - Default configuration includes all serializers
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createCjsPreset(),
  // Serializers are included by default:
  // snapshotSerializers:
  //   'jest-preset-angular/build/serializers/html-comment',
  //   'jest-preset-angular/build/serializers/ng-snapshot',
  //   'jest-preset-angular/build/serializers/no-ng-attributes',
} satisfies Config;
```

```typescript
// Custom serializer configuration in setup file
// setup-jest.ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

setupZoneTestEnv();

// Configure ng-snapshot with options to omit all component attributes
expect.addSnapshotSerializer({
  print: (val, print, indent, options, colors) =>
    componentSnapshotSerializer.print(val, print, indent, {
      ...options,
      omitAllCompAttrs: true,
    }, colors),
  test: componentSnapshotSerializer.test,
});
```

--------------------------------

### Jest Configuration for Node 22.18+ (ESM)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Configure Jest for Node.js version 22.18 and above using ESM presets. Ensure `setupFilesAfterEnv` points to your setup file.

```typescript
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;
```

--------------------------------

### Jest Configuration for Node <22.18 (CJS)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Configure Jest for Node.js versions prior to 22.18 using CommonJS presets. Ensure `setupFilesAfterEnv` points to your setup file.

```typescript
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets';

export default {
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;
```

--------------------------------

### Create ESM Preset for Node 22.18+

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/presets.md

Use this TypeScript example to generate an ES Module preset for Jest when running on Node.js version 22.18 or later. It imports `createEsmPreset` from `jest-preset-angular/presets/index.js`.

```typescript
import type { Config } from 'jest';
import { createEsmPreset } from 'jest-preset-angular/presets/index.js';

const presetConfig = createEsmPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```

--------------------------------

### Configure Babel for Jest Coverage

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/troubleshooting.md

To fix Jest coverage issues when using Babel, install necessary Babel packages and configure a .babelrc file with the transform-classes plugin. This is typically needed when Babel is used for coverage reporting.

```json
{
  // this plugin will fix issue with class inheritance
  "plugins": ["@babel/plugin-transform-classes"]
}
```

--------------------------------

### Website Serve Built Site

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Serves the locally built documentation site. This command is run from within the 'website' directory.

```bash
yarn serve
```

--------------------------------

### Publish User Project

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/libs/user/README.md

After building the 'user' project, navigate to the dist/user directory and run this command to publish the library.

```bash
npm publish
```

--------------------------------

### Build User Project

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/libs/user/README.md

Builds the 'user' project. The output artifacts will be located in the dist/ directory.

```bash
ng build user
```

--------------------------------

### Build Project

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/full-ivy-lib/node_modules/full-ivy/README.md

Builds the 'full-ivy' project. Artifacts are stored in the 'dist/' directory.

```bash
ng build full-ivy
```

--------------------------------

### Build Documentation Site

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Builds the documentation site for production using Docusaurus. This command should be executed within the 'website' directory.

```bash
yarn doc:build
```

--------------------------------

### Publish PartialIvy Library

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/partial-ivy-lib/node_modules/partial-ivy/README.md

After building the library, navigate to the dist folder and use npm publish to make the library available.

```bash
cd dist/partial-ivy && npm publish
```

--------------------------------

### Build PartialIvy Library

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/partial-ivy-lib/node_modules/partial-ivy/README.md

Build the PartialIvy library. The output artifacts will be placed in the dist/ directory.

```bash
ng build partial-ivy
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/README.md

Builds the website and pushes it to the 'gh-pages' branch for deployment on GitHub Pages. Ensure to replace '<Your GitHub username>' with your actual username.

```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Publish Library

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/full-ivy-lib/node_modules/full-ivy/README.md

After building the library, navigate to the dist folder and publish it using npm.

```bash
cd dist/full-ivy && npm publish
```

--------------------------------

### setupZoneTestEnv

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/testbed-environment.md

Configures a zone-based testing environment for Angular applications using `zone.js`. This is the default and recommended approach for most Angular projects.

```APIDOC
## `setupZoneTestEnv(options)`

### Description
Configures an environment that uses `zone.js`, which is the mechanism for tracking asynchronous operations. It is suitable for most Angular applications that rely on `zone.js` for change detection and other framework features.

You can customize the environment by providing options as function arguments.

### Parameters
#### `options` (optional)
An object that extends [TestEnvironmentOptions interface](https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95) with the following additional properties:
  - `extraProviders` (optional): An array of [StaticProvider](https://angular.dev/api/core/StaticProvider) to be injected at the platform level. This is useful for mocking platform services that cannot be configured via `TestBed.configureTestingModule`.

### Request Example
#### Setup file CJS
```ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';

setupZoneTestEnv({
  //...options
});
```
#### Setup file ESM
```ts
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';

setupZoneTestEnv({
  //...options
});
```
#### Jest configuration (Node <22.18)
```ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets';

export default {
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;
```
#### Jest configuration (Node 22.18+)
```ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;
```
```

--------------------------------

### Build Static Website Content

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/README.md

Generates static website content into the 'build' directory, ready for hosting.

```console
yarn build
```

--------------------------------

### Angular CLI Help

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/full-ivy-lib/node_modules/full-ivy/README.md

Access help information for the Angular CLI.

```bash
ng help
```

--------------------------------

### Configure setupFilesAfterEnv in jest.config.ts

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/snapshot-testing.md

Reference your setup-jest.ts file in the setupFilesAfterEnv array within jest.config.ts to ensure the serializer is applied.

```typescript
import type { Config } from 'jest';

export default {
  //[...]
  setupFilesAfterEnv: ['./setup-jest.ts'],
  //[...]
} satisfies Config;
```

--------------------------------

### Generate Component with PartialIvy

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/partial-ivy-lib/node_modules/partial-ivy/README.md

Use this command to generate a new component within the PartialIvy project. Ensure to include the --project flag to avoid adding it to the default project.

```bash
ng generate component component-name --project partial-ivy
```

--------------------------------

### Run Performance Benchmarks

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Executes performance benchmarks for the project.

```bash
yarn test-perf
```

--------------------------------

### setupZonelessTestEnv

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/testbed-environment.md

Configures a zoneless testing environment, suitable for Angular projects that have disabled `zone.js` for performance benefits.

```APIDOC
## `setupZonelessTestEnv(options)`

### Description
Configures an environment that **DOESN'T** use `zone.js`, as described in [Angular experimental zoneless guide](https://angular.dev/guide/experimental/zoneless). It is designed for projects that have disabled `zone.js`, which can lead to improved performance and simplified testing.

You can customize the environment by providing options as function arguments.

### Parameters
#### `options` (optional)
An object that extends [TestEnvironmentOptions interface](https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95) with the following additional properties:
  - `extraProviders` (optional): An array of [StaticProvider](https://angular.dev/api/core/StaticProvider) to be injected at the platform level. This is useful for mocking platform services that cannot be configured via `TestBed.configureTestingModule`.

### Request Example
#### Setup file CJS
```ts
import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';

setupZonelessTestEnv({
  //...options
});
```
#### Setup file ESM
```ts
import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';

setupZonelessTestEnv({
  //...options
});
```
#### Jest configuration (Node <22.18)
```ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets';

export default {
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;
```
#### Jest configuration (Node 22.18+)
```ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
} satisfies Config;
```
```

--------------------------------

### Run Unit Tests

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Builds the project and runs unit tests defined in `src/**/*.spec.ts` files.

```bash
yarn test
```

--------------------------------

### Generate New Component for User Project

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/libs/user/README.md

Use this command to generate a new component specifically for the 'user' project. Ensure to include the --project flag to avoid adding it to the default project.

```bash
ng generate component component-name --project user
```

--------------------------------

### Override Change Detection Strategy in TestBed

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/troubleshooting.md

To work around issues with @Input() bindings and ChangeDetectionStrategy.OnPush, override the component's change detection strategy to Default within your TestBed setup.

```typescript
beforeEach(async(() => {
  TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })
    .overrideComponent(PizzaItemComponent, {
      set: { changeDetection: ChangeDetectionStrategy.Default },
    })
    .compileComponents();
}));
```

--------------------------------

### Run Unit Tests for PartialIvy

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/partial-ivy-lib/node_modules/partial-ivy/README.md

Execute the unit tests for the PartialIvy project using Karma.

```bash
ng test partial-ivy
```

--------------------------------

### Build Project

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/README.md

Build the Angular project using 'ng build'. Artifacts are stored in the 'dist/' directory. Use the '--prod' flag for a production build.

```bash
ng build
```

--------------------------------

### Run Unit Tests

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/full-ivy-lib/node_modules/full-ivy/README.md

Executes unit tests for the 'full-ivy' project using Karma.

```bash
ng test full-ivy
```

--------------------------------

### Auto-format with Prettier

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Automatically formats YAML and Markdown files using Prettier.

```bash
yarn lint-prettier
```

--------------------------------

### Run Unit Tests for User Project

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/libs/user/README.md

Executes the unit tests for the 'user' project using Karma.

```bash
ng test user
```

--------------------------------

### Generate New Component

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/full-ivy-lib/node_modules/full-ivy/README.md

Use this command to generate a new component within the 'full-ivy' project. Ensure the project flag is included to avoid adding it to the default project.

```bash
ng generate component component-name --project full-ivy
```

--------------------------------

### Run End-to-End Tests

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Builds the project and executes the full end-to-end test suite, covering both CommonJS (CJS) and ES Modules (ESM) formats.

```bash
yarn test-e2e
```

--------------------------------

### Yarn Alternative for Executing Jest with Experimental VM Modules

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/esm-support.md

An alternative command for Yarn users to execute Jest with the --experimental-vm-modules flag. This method also works with Yarn Plug'n'Play.

```bash
yarn node --experimental-vm-modules $(yarn bin jest)
```

--------------------------------

### Run Unit Tests with Jest

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/README.md

Execute unit tests using Jest by running the 'yarn test' or 'npm test' command.

```bash
yarn test
```

```bash
npm test
```

--------------------------------

### Default CJS Preset Configuration

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/presets.md

This JSON object represents the default configuration returned by `createCjsPreset`. It includes module file extensions, snapshot serializers, test environment, and transform configurations for processing various file types.

```json
{
  "moduleFileExtensions": ["ts", "html", "js", "json", "mjs"],
  "snapshotSerializers": [
    "jest-preset-angular/build/serializers/html-comment",
    "jest-preset-angular/build/serializers/ng-snapshot",
    "jest-preset-angular/build/serializers/no-ng-attributes"
  ],
  "testEnvironment": "jsdom",
  "transform": {
    "^.+\\.(ts|js|mjs|html|svg)$": [
      "jest-preset-angular",
      {
        "stringifyContentPathRegex": "\\.(html|svg)$",
        "tsconfig": "<rootDir>/tsconfig.spec.json"
      }
    ]
  },
  "transformIgnorePatterns": ["node_modules/(?!(.*\\.mjs$|@angular/common/locales/.*\\.js$))"]
}
```

--------------------------------

### Run ESLint

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Runs ESLint across all files to check for code style and potential errors.

```bash
yarn lint
```

--------------------------------

### Execute Jest with Experimental VM Modules

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/esm-support.md

Run Jest using the Node.js executable with the --experimental-vm-modules flag to enable ESM support. This is a common requirement for running Jest in ESM mode.

```bash
node --experimental-vm-modules node_modules/jest/bin/jest.js
```

--------------------------------

### Generate Other User Project Schematics

Source: https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-monorepo/libs/user/README.md

This command allows generating various other schematics like directives, pipes, services, etc., for the 'user' project. Always specify the --project user flag.

```bash
ng generate directive|pipe|service|class|guard|interface|enum|module --project user
```

--------------------------------

### createEsmPreset Function

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/presets.md

Generates a Jest configuration preset for ECMAScript Module (ESM) environments, supporting JavaScript, TypeScript, HTML, and SVG files.

```APIDOC
## createEsmPreset(options)

### Description
Create a configuration to process JavaScript/TypeScript/HTML/SVG files (`ts|js|html|svg`).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - OPTIONAL
  - **tsconfig** (object) - see more at [tsconfig options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig)
  - **isolatedModules** (boolean) - see more at [isolatedModules options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules)
  - **astTransformers** (array) - see more at [astTransformers options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers)
  - **diagnostics** (object) - see more at [diagnostics options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics)
  - **testEnvironment** (string) - either `jsdom` or `jest-preset-angular/environments/jest-jsdom-env`. Defaults to `jsdom`.

### Request Example
```ts
import type { Config } from 'jest';
import { createEsmPreset } from 'jest-preset-angular/presets';

const presetConfig = createEsmPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```

### Response
#### Success Response (200)
- **Default returned value** (object) - An object contains Jest config:
```json
{
  "extensionsToTreatAsEsm": [".ts"],
  "moduleFileExtensions": ["ts", "html", "js", "json", "mjs"],
  "moduleNameMapper": {
    "tslib": "tslib/tslib.es6.js"
  },
  "snapshotSerializers": [
    "jest-preset-angular/build/serializers/html-comment",
    "jest-preset-angular/build/serializers/ng-snapshot",
    "jest-preset-angular/build/serializers/no-ng-attributes"
  ],
  "testEnvironment": "jsdom",
  "transform": {
    "^.+\\.(ts|js|html|svg)$": [
      "jest-preset-angular",
      {
        "stringifyContentPathRegex": "\\.(html|svg)$",
        "tsconfig": "<rootDir>/tsconfig.spec.json",
        "useESM": true
      }
    ]
  },
  "transformIgnorePatterns": ["node_modules/(?!tslib)"]
}
```

#### Response Example
```ts title="jest.config.ts" tab={"label":"Node <22.18"}
import type { Config } from 'jest';
import { createEsmPreset } from 'jest-preset-angular/presets';

const presetConfig = createEsmPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```

```ts title="jest.config.ts" tab={"label":"Node 22.18+"}
import type { Config } from 'jest';
import { createEsmPreset } from 'jest-preset-angular/presets/index.js';

const presetConfig = createEsmPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```
```

--------------------------------

### Complete Jest Configuration for Angular

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

This configuration file sets up Jest for an Angular project, including module name mapping and coverage collection. Ensure tsconfig.json is correctly configured for path aliases.

```typescript
// jest.config.ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';
import { pathsToModuleNameMapper } from 'ts-jest';
import { compilerOptions } from './tsconfig.json' with { type: 'json' };

export default {
  displayName: 'my-angular-app',
  ...createCjsPreset(),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths ?? {}, {
    prefix: '<rootDir>'
  }),
  testPathIgnorePatterns: [
    '<rootDir>/node_modules/',
    '<rootDir>/src/test.ts', // Ignore Karma test file
  ],
  collectCoverageFrom: [
    'src/**/*.ts',
    '!src/**/*.module.ts',
    '!src/main.ts',
  ],
} satisfies Config;
```

--------------------------------

### Create ESM Jest Preset

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Use `createEsmPreset` to generate a Jest configuration for ECMAScript modules. This configures Jest to handle .ts files as ESM and includes module name mappings for tslib and other ESM dependencies. Remember to run Jest with the `--experimental-vm-modules` flag.

```typescript
// jest.config.ts
import type { Config } from 'jest';
import { createEsmPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createEsmPreset({
    tsconfig: '<rootDir>/tsconfig.spec.json',
    isolatedModules: true,
  }),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  moduleNameMapper: {
    tslib: 'tslib/tslib.es6.js',
    '^rxjs': '<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js',
  },
} satisfies Config;

// Run with: node --experimental-vm-modules node_modules/jest/bin/jest.js
```

--------------------------------

### Configure Global Browser Mocks for JSDOM

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Set up global browser mocks for JSDOM to simulate missing browser behaviors in the test environment. This includes mocking document.doctype, window.getComputedStyle, document.body.style.transform, canvas context, and window.matchMedia.

```typescript
// jest-global-mocks.ts
import { jest } from '@jest/globals';

// Mock document.doctype
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>',
});

// Mock window.getComputedStyle for CSS calculations
Object.defineProperty(window, 'getComputedStyle', {
  value: () => ({
    display: 'none',
    appearance: ['-webkit-appearance'],
  }),
});

// Mock CSS transform for Angular Material
Object.defineProperty(document.body.style, 'transform', {
  value: () => ({
    enumerable: true,
    configurable: true,
  }),
});

// Mock canvas context for charts/graphics
HTMLCanvasElement.prototype.getContext = jest.fn() as typeof HTMLCanvasElement.prototype.getContext;

// Mock matchMedia for responsive design tests
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query: string) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

```

--------------------------------

### createCjsPreset

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Creates a Jest configuration preset for CommonJS module format, handling TypeScript, JavaScript, HTML, and SVG file transformations with appropriate snapshot serializers and transform patterns.

```APIDOC
## createCjsPreset(options)

Creates a Jest configuration preset for CommonJS module format, handling TypeScript, JavaScript, HTML, and SVG file transformations with appropriate snapshot serializers and transform patterns.

### Parameters

#### Request Body

- **options** (object) - Optional - Configuration options for the preset.
  - **tsconfig** (string) - Optional - Custom tsconfig path.
  - **isolatedModules** (boolean) - Optional - Enable isolated modules for faster compilation.
  - **diagnostics** (object) - Optional - Configure diagnostics.
    - **ignoreCodes** (number[]) - Optional - Codes to ignore for diagnostics.

### Request Example

```typescript
// jest.config.ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createCjsPreset({
    // Optional: custom tsconfig path
    tsconfig: '<rootDir>/tsconfig.spec.json',
    // Optional: enable isolated modules for faster compilation
    isolatedModules: true,
    // Optional: configure diagnostics
    diagnostics: {
      ignoreCodes: [151001],
    },
  }),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  // Optional: add module name mappings for absolute imports
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
    '^app/(.*)$': '<rootDir>/src/app/$1',
  },
} satisfies Config;
```
```

--------------------------------

### createCjsPreset Function

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/presets.md

Generates a Jest configuration preset for CommonJS environments, supporting JavaScript, TypeScript, HTML, and SVG files.

```APIDOC
## createCjsPreset(options)

### Description
Create a configuration to process JavaScript/TypeScript/HTML/SVG files (`ts|js|mjs|html|svg`).

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - OPTIONAL
  - **tsconfig** (object) - see more at [tsconfig options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig)
  - **isolatedModules** (boolean) - see more at [isolatedModules options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules)
  - **astTransformers** (array) - see more at [astTransformers options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers)
  - **diagnostics** (object) - see more at [diagnostics options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics)
  - **testEnvironment** (string) - either `jsdom` or `jest-preset-angular/environments/jest-jsdom-env`. Defaults to `jsdom`.

### Request Example
```ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets';

const presetConfig = createCjsPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```

### Response
#### Success Response (200)
- **Default returned value** (object) - An object contains Jest config:
```json
{
  "moduleFileExtensions": ["ts", "html", "js", "json", "mjs"],
  "snapshotSerializers": [
    "jest-preset-angular/build/serializers/html-comment",
    "jest-preset-angular/build/serializers/ng-snapshot",
    "jest-preset-angular/build/serializers/no-ng-attributes"
  ],
  "testEnvironment": "jsdom",
  "transform": {
    "^.+\\.(ts|js|mjs|html|svg)$": [
      "jest-preset-angular",
      {
        "stringifyContentPathRegex": "\\.(html|svg)$",
        "tsconfig": "<rootDir>/tsconfig.spec.json"
      }
    ]
  },
  "transformIgnorePatterns": ["node_modules/(?!(.*\\.mjs$|@angular/common/locales/.*\\.js$))"]
}
```

#### Response Example
```ts title="jest.config.ts" tab={"label":"Node <22.18"}
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets';

const presetConfig = createCjsPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```

```ts title="jest.config.ts" tab={"label":"Node 22.18+"}
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

const presetConfig = createCjsPreset({
  //...options
});

export default {
  ...presetConfig,
} satisfies Config;
```
```

--------------------------------

### Configure Babel for Jest

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/using-with-babel.md

Set up your Babel configuration to include presets for Jest integration. Ensure you use `babel.config.js` and not `.babelrc` for proper module transpilation.

```javascript
module.exports = function (api) {
  api.cache(true);

  const presets = ['@babel/preset-env'];
  const plugins = [];

  return {
    presets,
    plugins,
  };
};
```

--------------------------------

### Run Single Test File

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Runs tests for a specific file. This is useful for focused debugging when a test is failing.

```bash
yarn test <path/to/test.file.ts>
```

--------------------------------

### Check Prettier Formatting (CI)

Source: https://github.com/thymikee/jest-preset-angular/blob/main/AGENTS.md

Checks Prettier formatting in CI mode, ensuring code adheres to the defined style guidelines.

```bash
yarn lint-prettier-ci
```

--------------------------------

### Generate Other Schematics

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/full-ivy-lib/node_modules/full-ivy/README.md

Generate directives, pipes, services, classes, guards, interfaces, enums, or modules for the 'full-ivy' project. Always include the project flag.

```bash
ng generate directive|pipe|service|class|guard|interface|enum|module --project full-ivy
```

--------------------------------

### Package.json script for CJS

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Update the `scripts` section in `package.json` to use `jest` directly for running tests when using CommonJS.

```json
{
  //...
  "scripts": {
    "test": "jest"
  }
  //...
}
```

--------------------------------

### Enable Component Snapshot Serialization in Individual Test File

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/snapshot-testing.md

Import and add the componentSnapshotSerializer to expect within a specific test file (e.g., foo.component.spec.ts) to enable component HTML snapshots only for that test.

```typescript
import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';

expect.addSnapshotSerializer(componentSnapshotSerializer);

it('should work', () => {
  //[...]
});
```

--------------------------------

### Package.json script for ESM

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/installation.md

Update the `scripts` section in `package.json` to use `node --experimental-vm-modules` for running Jest tests when using ESM.

```json
{
  //...
  "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
  }
  //...
}
```

--------------------------------

### Jest Config for Node 22.18+ with ESM Preset

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/guides/esm-support.md

Configure Jest for ESM support using createEsmPreset for Node.js version 22.18 and later. Uses the index.js path for the preset and includes moduleNameMapper.

```typescript
import type { Config } from 'jest';
import { createEsmPreset } from 'jest-preset-angular/presets/index.js';

export default {
  //...
  ...createEsmPreset(),
  moduleNameMapper: {
    tslib: 'tslib/tslib.es6.js',
    '^rxjs': '<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js',
  },
} satisfies Config;
```

--------------------------------

### Generate Other Angular Schematics

Source: https://github.com/thymikee/jest-preset-angular/blob/main/e2e/partial-ivy-lib/node_modules/partial-ivy/README.md

This command generates various Angular schematics like directives, pipes, services, etc., for the PartialIvy project. Always specify the --project flag.

```bash
ng generate directive|pipe|service|class|guard|interface|enum|module --project partial-ivy
```

--------------------------------

### Create CommonJS Jest Preset

Source: https://context7.com/thymikee/jest-preset-angular/llms.txt

Use `createCjsPreset` to generate a Jest configuration for CommonJS modules. This handles transformations for TypeScript, JavaScript, HTML, and SVG files. Configure custom tsconfig paths, isolated modules, and diagnostics as needed.

```typescript
// jest.config.ts
import type { Config } from 'jest';
import { createCjsPreset } from 'jest-preset-angular/presets/index.js';

export default {
  ...createCjsPreset({
    // Optional: custom tsconfig path
    tsconfig: '<rootDir>/tsconfig.spec.json',
    // Optional: enable isolated modules for faster compilation
    isolatedModules: true,
    // Optional: configure diagnostics
    diagnostics: {
      ignoreCodes: [151001],
    },
  }),
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  // Optional: add module name mappings for absolute imports
  moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',
    '^app/(.*)$': '<rootDir>/src/app/$1',
  },
} satisfies Config;
```

--------------------------------

### Configure esbuild for Additional File Types

Source: https://github.com/thymikee/jest-preset-angular/blob/main/website/versioned_docs/version-16.x/getting-started/options.md

Configure jest-preset-angular to process additional file types with esbuild. By default, .mjs files are processed by esbuild.

```typescript
import type { Config } from 'jest';

export default {
  //...
  transform: {
    '^.+\.(ts|js|mjs|html|svg)$': [
      'jest-preset-angular',
      {
        processWithEsbuild: [<glob_to_files>]
      }
    ]
  }
} satisfies Config;
```