Jest Custom Angular Preset for TypeScript

This challenge asks you to create a custom Jest preset for Angular projects written in TypeScript. A Jest preset allows you to define a set of default configurations and transformations for Jest, making it easier to manage test setups for specific frameworks or languages. This will streamline the testing experience for Angular developers by providing sensible defaults and necessary transformations for their TypeScript code.

Problem Description

Your task is to create a Jest preset that can be easily configured and used in an Angular project. This preset should handle common configurations required for testing Angular applications written in TypeScript.

Key Requirements:

1. TypeScript Transformation: The preset must be able to transform TypeScript code into JavaScript that Jest can understand. This includes handling decorators, classes, and other Angular-specific TypeScript features.
2. Angular Dependencies: Configure Jest to recognize and handle Angular-specific modules and dependencies, such as those from @angular/core, @angular/common, etc.
3. Configuration Defaults: Provide sensible default configurations for common testing scenarios in Angular, such as:
   • moduleNameMapper to handle asset imports (e.g., .html, .css, .scss).
   • transform configuration for TypeScript files.
   • testEnvironment suitable for Angular (e.g., jsdom).
4. Extensibility: The preset should be designed in a way that allows users to extend or override its configurations if needed.
5. TypeScript Implementation: The preset itself should be implemented as a TypeScript file.

Expected Behavior:

When this preset is applied to a Jest configuration, tests in an Angular TypeScript project should run without requiring extensive manual Jest configuration for basic setups. Specifically, TypeScript files should be transformed correctly, and Angular modules should be resolvable.

Edge Cases to Consider:

• How will the preset handle different CSS preprocessors (e.g., SCSS, LESS)? (For this challenge, we'll focus on mocking common asset types).
• How can users override or extend the preset's default configurations?

Examples

Example 1:

Input: A Jest configuration file (jest.config.js or jest.config.ts) that uses your custom preset.

// jest.config.js
module.exports = {
  preset: './path/to/your/custom-jest-preset.js', // Your custom preset file
  // other Jest configurations
};

Output: When running jest, the tests in a typical Angular TypeScript project will execute successfully, correctly transforming TS files and resolving Angular modules.

Explanation: The preset property in the Jest configuration points to your custom preset file. Jest loads this preset, applies its configurations, and then merges them with any configurations defined directly in the jest.config.js file.

Example 2:

Input: A simple Angular component test file.

// src/app/my-component/my-component.spec.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div>Hello</div>',
})
export class MyComponent {}

describe('MyComponent', () => {
  it('should be created', () => {
    expect(new MyComponent()).toBeTruthy();
  });
});

Output: The test should pass without errors related to TypeScript syntax (decorators) or Angular module resolution when run with Jest configured using your preset.

Explanation: Your preset will include a transformer (like ts-jest) to compile the TypeScript code and ensure Angular decorators are processed correctly. It will also likely set up moduleNameMapper to handle imports from @angular/*.

Constraints

• The preset must be implementable in TypeScript.
• It should rely on common Jest and TypeScript tooling (e.g., ts-jest for transformation).
• The preset should be general enough to work with most standard Angular projects.
• Focus on core functionalities; advanced Angular-specific testing utilities (like TestBed) are beyond the scope of this basic preset implementation.

Notes

• Consider using ts-jest as the primary TypeScript transformer. You'll need to configure it within your preset.
• Think about how to mock static assets that Angular projects often import (e.g., .html, .css, .scss). A common approach is to use moduleNameMapper to return empty strings or mock modules.
• Your preset file should export a Jest configuration object.
• The name property of the preset is not strictly necessary if it's being pointed to directly via its file path.
• The extends property of a Jest preset can be useful if you want to build upon another existing preset (though for this challenge, you'll be defining most from scratch).