jest-preset-angular
Advanced tools
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.
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';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 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 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.
A preset of Jest configuration for Angular projects.
Our online documentation is available at https://thymikee.github.io/jest-preset-angular/
This is a part of the article: Testing Angular faster with Jest.
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
In your project root, create setup-jest.ts file with following contents:
import 'jest-preset-angular/setup-jest';
Add the following section:
jest.config.js// jest.config.js
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
globalSetup: 'jest-preset-angular/global-setup',
};
package.json{
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": ["<rootDir>/setup-jest.ts"],
"globalSetup": "jest-preset-angular/global-setup"
}
}
Adjust your tsconfig.spec.json to be:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"module": "CommonJs",
"types": ["jest"]
},
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}
IMPORTANT
Angular doesn't support native async/await in testing with target higher than ES2016, see https://github.com/angular/components/issues/21632#issuecomment-764975917
Check out our Migration from Angular < 13 guidance
Check out our Angular Ivy guidance
We have example apps to provide a basic setup to use Jest in an Angular project.
The examples folder consist of several example Angular applications from v10 to 13, as well as example projects
with yarn workspace or monorepo structure.
ts-jest - Jest transformer for TypeScriptSee also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
FAQs
Jest preset configuration for Angular projects
The npm package jest-preset-angular receives a total of 732,417 weekly downloads. As such, jest-preset-angular popularity was classified as popular.
We found that jest-preset-angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.