jest-preset-angular

What is jest-preset-angular?

jest-preset-angular is a Jest preset configuration for Angular projects. It simplifies the setup and configuration of Jest for testing Angular applications, providing necessary configurations, transformers, and environment settings.

What are jest-preset-angular's main functionalities?

Setup and Configuration

This feature provides a preset configuration for Jest, making it easier to set up Jest in Angular projects. The code sample shows how to configure Jest to use jest-preset-angular in the Jest configuration file.

module.exports = { preset: 'jest-preset-angular', setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'] };

Transformers

jest-preset-angular includes transformers to handle TypeScript and Angular templates. The code sample demonstrates how to configure Jest to use ts-jest for transforming TypeScript and HTML files.

module.exports = { transform: { '^.+\.(ts|html)$': 'ts-jest' } };

Global Mocks

jest-preset-angular provides global mocks for common Angular dependencies, such as Angular's testing utilities. The code sample shows how to import jest-preset-angular to include these global mocks in your tests.

import 'jest-preset-angular';

Other packages similar to jest-preset-angular

karma

Karma is a test runner for JavaScript that works well with Angular. Unlike jest-preset-angular, which is a Jest preset, Karma is a standalone test runner that can be configured to work with various testing frameworks, including Jasmine and Mocha.

angular-testing-library

angular-testing-library is a set of utilities for testing Angular components. It focuses on testing user interactions and component behavior, similar to jest-preset-angular, but it is not a Jest preset and can be used with different test runners.

ng-mocks

ng-mocks is a library for creating mocks of Angular components, directives, and services. It complements jest-preset-angular by providing additional mocking capabilities, but it is not a preset configuration for Jest.

README

Jest Preset Angular

A preset of Jest configuration for Angular projects.

This is a part of the article: Testing Angular faster with Jest.

Getting Started

These instructions will get you setup to use jest-preset-angular in your project. For more detailed documentation, please check online documentation.

Install using yarn:

yarn add -D jest jest-preset-angular @types/jest

Or npm:

npm install -D jest jest-preset-angular @types/jest

Configuration

In your project root, create setup-jest.ts file with following contents:

import 'jest-preset-angular/setup-jest';

Add the following section:

• to your root jest.config.js

// jest.config.js
module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

• or to your root package.json

{
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/setup-jest.ts"]
  }
}

Adjust your tsconfig.spec.json to be:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Angular Ivy

Check out our Angular Ivy guidance

Example apps

We have example apps to provide a basic setup to use Jest in an Angular project.

Built With

• TypeScript - JavaScript that scales
• Angular - The modern web developer's platform
• ts-jest - Jest transformer for TypeScript

Authors/maintainers

• Michał Pierzchała - thymikee
• Ahn - ahnpnl
• Thomas - wtho

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details