<NME> README.md
<BEF> <h1 align="center">Jest Preset Angular</h1>

<p align="center">A preset of Jest configuration for Angular projects.</p>

<p align="center">
    <a href="https://actions-badge.atrox.dev/thymikee/jest-preset-angular/goto?ref=main"><img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fthymikee%2Fjest-preset-angular%2Fbadge%3Fref%3Dmain&style=flat-square" /></a>
    <a href="https://www.npmjs.com/package/jest-preset-angular"><img src="https://img.shields.io/npm/v/jest-preset-angular/latest.svg?style=flat-square" alt="NPM Version" /></a>
    <a href="https://github.com/thymikee/jest-preset-angular/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/jest-preset-angular.svg?style=flat-square" alt="GitHub license" /></a>
</p>

> 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](https://www.xfive.co/blog/testing-angular-faster-jest/).


...and inclue this in your `package.json`:
```json
"jest": {
  "preset": "jest-preset-angular",
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
}
```

Or [`npm`](https://www.npmjs.com/package/jest-preset-angular):

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

## Configuration

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

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

Add the following section:

- to your root `jest.config.js`

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

- or to your root `package.json`

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

Adjust your `tsconfig.spec.json` to be:

```json
{
  "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

## Migration from Angular < 13

Check out our [Migration from Angular < 13 guidance](https://thymikee.github.io/jest-preset-angular/docs/guides/angular-13+)

## Angular Ivy

Check out our [Angular Ivy guidance](https://thymikee.github.io/jest-preset-angular/docs/guides/angular-ivy)

## Example projects with base Jest configuration

We have [example apps](https://github.com/thymikee/jest-preset-angular/tree/main/examples) 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.

## Built With

- [TypeScript](https://www.typescriptlang.org/) - JavaScript that scales
- [Angular](https://angular.io/) - The modern web developer's platform
- [`ts-jest`](https://kulshekhar.github.io/ts-jest) - Jest transformer for TypeScript

## Authors/maintainers

- **Michał Pierzchała** - [thymikee](https://github.com/thymikee)
- **Ahn** - [ahnpnl](https://github.com/ahnpnl)
- **Thomas** - [wtho](https://github.com/wtho)

See also the list of [contributors](https://github.com/thymikee/jest-preset-angular/contributors) who participated in this project.

## License

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

<MSG> Make json gh highlighting happy
<DFF> @@ -15,9 +15,11 @@ import './jestGlobalMocks'; // browser mocks globally available for every test
 
 ...and inclue this in your `package.json`:
 ```json
-"jest": {
-  "preset": "jest-preset-angular",
-  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
+{
+  "jest": {
+    "preset": "jest-preset-angular",
+    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
+  }
 }
 ```
 

{'commit': 'diff --git a/README.md b/README.md\nindex 9d979778..5395b465 100644\n--- a/README.md\n+++ b/README.md\n@@ -15,9 +15,11 @@ import \'./jestGlobalMocks\'; // browser mocks globally available for every test\n \n ...and inclue this in your `package.json`:\n ```json\n-"jest": {\n-  "preset": "jest-preset-angular",\n-  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"\n+{\n+  "jest": {\n+    "preset": "jest-preset-angular",\n+    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"\n+  }\n }\n ```\n \n', 'commit_subject': 'Make json gh highlighting happy', 'repo_name': 'thymikee/jest-preset-angular', 'committer': {'name': 'GitHub', 'email': '1505422b2465e9a84f6fdfaa161078890c593f06@github.com', 'time_sec': '1494880019', 'tz_offset': '120', 'date': {'seconds': '1494880019'}}, 'commit_tree': 'a558982d6fa1fb7c75ef0bd5d39041aee724600e', 'commit_message': 'Make json gh highlighting happy', 'language_name': 'JavaScript', 'license': 'mit', 'hunks': '@@ -15,9 +15,11 @@ import \'./jestGlobalMocks\'; // browser mocks globally available for every test\n \n ...and inclue this in your `package.json`:\n ```json\n-"jest": {\n-  "preset": "jest-preset-angular",\n-  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"\n+{\n+  "jest": {\n+    "preset": "jest-preset-angular",\n+    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"\n+  }\n }\n ```\n \n', 'addition_count': 5, 'deletion_count': 3, 'src_file': 'a/README.md', 'tgt_file': 'b/README.md', 'file_extension': '.md', 'before_file': '<h1 align="center">Jest Preset Angular</h1>\n\n<p align="center">A preset of Jest configuration for Angular projects.</p>\n\n<p align="center">\n    <a href="https://actions-badge.atrox.dev/thymikee/jest-preset-angular/goto?ref=main"><img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fthymikee%2Fjest-preset-angular%2Fbadge%3Fref%3Dmain&style=flat-square" /></a>\n    <a href="https://www.npmjs.com/package/jest-preset-angular"><img src="https://img.shields.io/npm/v/jest-preset-angular/latest.svg?style=flat-square" alt="NPM Version" /></a>\n    <a href="https://github.com/thymikee/jest-preset-angular/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/jest-preset-angular.svg?style=flat-square" alt="GitHub license" /></a>\n</p>\n\n> Our online documentation is available at https://thymikee.github.io/jest-preset-angular/\n\n> This is a part of the article: [Testing Angular faster with Jest](https://www.xfive.co/blog/testing-angular-faster-jest/).\n\n\n...and inclue this in your `package.json`:\n```json\n"jest": {\n  "preset": "jest-preset-angular",\n  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"\n}\n```\n\nOr [`npm`](https://www.npmjs.com/package/jest-preset-angular):\n\n```bash\nnpm install -D jest jest-preset-angular @types/jest\n```\n\n## Configuration\n\nIn your project root, create `setup-jest.ts` file with following contents:\n\n```ts\nimport \'jest-preset-angular/setup-jest\';\n```\n\nAdd the following section:\n\n- to your root `jest.config.js`\n\n```js\n// jest.config.js\nmodule.exports = {\n  preset: \'jest-preset-angular\',\n  setupFilesAfterEnv: [\'<rootDir>/setup-jest.ts\'],\n  globalSetup: \'jest-preset-angular/global-setup\',\n};\n```\n\n- or to your root `package.json`\n\n```json\n{\n  "jest": {\n    "preset": "jest-preset-angular",\n    "setupFilesAfterEnv": ["<rootDir>/setup-jest.ts"],\n    "globalSetup": "jest-preset-angular/global-setup"\n  }\n}\n```\n\nAdjust your `tsconfig.spec.json` to be:\n\n```json\n{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "outDir": "./out-tsc/spec",\n    "module": "CommonJs",\n    "types": ["jest"]\n  },\n  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n```\n\n**IMPORTANT**\n\nAngular doesn\'t support native `async/await` in testing with `target` higher than `ES2016`, see https://github.com/angular/components/issues/21632#issuecomment-764975917\n\n## Migration from Angular < 13\n\nCheck out our [Migration from Angular < 13 guidance](https://thymikee.github.io/jest-preset-angular/docs/guides/angular-13+)\n\n## Angular Ivy\n\nCheck out our [Angular Ivy guidance](https://thymikee.github.io/jest-preset-angular/docs/guides/angular-ivy)\n\n## Example projects with base Jest configuration\n\nWe have [example apps](https://github.com/thymikee/jest-preset-angular/tree/main/examples) to provide a basic setup to use Jest in an Angular project.\nThe `examples` folder consist of several example Angular applications from **v10** to **13**, as well as example projects\nwith `yarn workspace` or monorepo structure.\n\n## Built With\n\n- [TypeScript](https://www.typescriptlang.org/) - JavaScript that scales\n- [Angular](https://angular.io/) - The modern web developer\'s platform\n- [`ts-jest`](https://kulshekhar.github.io/ts-jest) - Jest transformer for TypeScript\n\n## Authors/maintainers\n\n- **Michał Pierzchała** - [thymikee](https://github.com/thymikee)\n- **Ahn** - [ahnpnl](https://github.com/ahnpnl)\n- **Thomas** - [wtho](https://github.com/wtho)\n\nSee also the list of [contributors](https://github.com/thymikee/jest-preset-angular/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n', 'message': 'Make json gh highlighting happy', 'author_name': 'GitHub', 'lang': 'md'}