repository·main·Indexed 21 days ago
https://github.com/thymikee/jest-preset-angularA pre-configured Jest setup for Angular projects that handles TypeScript transformation and Angular-specific requirements. Version 17.0.0 provides support for CommonJS (CJS) and ECMAScript Modules (ESM) transpilation, Babel integration, and custom JSDOM environments. The preset includes configurations for handling .ts, .mjs, .js, and .html files, with options for esbuild processing and stringifying content for assets like SVG and HTML.
jest-preset-angular is a Jest preset configuration and TypeScript preprocessor with source map support. It is designed to allow developers to use Jest as a test runner for Angular projects, providing a faster alternative to traditional testing setups.jest-preset-angular follows the native Karma + Jasmine implementation provided by @angular/cli as closely as possible. This design choice ensures that the testing experience with Jest is more inline and consistent with the native Angular testing experience.When configuring jest-preset-angular, the following keys serve these purposes:
transform: Used to pass configuration to ts-jest for code compilation and to run files through a Jest transformer so Jest can understand non-JS syntax (like TS, HTML, or SVG).moduleFileExtensions: Defines the file types your modules use (e.g., ts, html, js, json, mjs).moduleNameMapper: Maps absolute imports to specific paths using RegExp.snapshotSerializers: An array of serializers applied when performing snapshot testing.testEnvironment: The environment used to run tests (typically jsdom).transformIgnorePatterns: Instructs Jest which files in node_modules should still be transformed (e.g., .mjs files or Angular locale files).jest-preset-angular, the Jest configuration is typically located within the specific project directory at projects/<appName>/jest.config.js. Use this file to customize your testing environment and preset behavior.When injecting dependencies using TypeScript interfaces or exported namespaces, avoid using the @Inject decorator. jest-preset-angular has known caveats when working with class constructors and decorators.
Instead, use the Angular inject() function.
jest-preset-angular adopts the same processing flow as ts-jest. To understand how files are transformed and processed during the Jest execution lifecycle, refer to the official ts-jest documentation.
https://kulshekhar.github.io/ts-jest/docs/processingUse the Angular CLI to build the user library. The resulting build artifacts are output to the dist/ directory.
ng build userIf you use TypeScript path mappings (defined in the paths property of your tsconfig.json), Jest will not automatically resolve them. You must create corresponding mappings in your Jest configuration using the moduleNameMapper property.
This ensures that when your code imports a module via an absolute path (e.g., @app/services/...), Jest knows how to locate the actual file on disk.
For detailed implementation details on how to format these mappings, refer to the ts-jest paths mapping documentation.
To generate new Angular schematics (components, directives, pipes, etc.) specifically for the user project, use the Angular CLI with the --project user flag. This ensures the generated files are placed in the correct project directory rather than the default project defined in angular.json.
Supported types include:
componentdirectivepipeserviceclassguardinterfaceenummoduleng generate component component-name --project user
ng generate directive|pipe|service|class|guard|interface|enum|module --project userTo publish the library to a registry, first build it, then navigate to the distribution folder and run the npm publish command.
ng build usercd dist/usernpm publishng build user
cd dist/user
npm publishSince jest-preset-angular uses JSDOM, which lacks some browser behaviors, you may need to provide global mocks.
jest-global-mocks.ts file in your project root.setup-jest.ts file before calling setupZoneTestEnv().Example jest-global-mocks.ts:
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,
};
},
});import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import './jest-global-mocks';
setupZoneTestEnv();To install the dependencies required for the website project, run the following command in the root directory.
yarn install