chore(release): 12.0.0 (#1464)

Author: ahnpnl

CHANGELOG.md

@@ -1,4 +1,4 @@
-# [12.0.0-next.2](https://github.com/thymikee/jest-preset-angular/compare/v12.0.0-next.1...v12.0.0-next.2) (2022-05-08)
+# [12.0.0](https://github.com/thymikee/jest-preset-angular/compare/v12.0.0-next.2...v12.0.0) (2022-05-10)
 
 
 ### Bug Fixes
@@ -9,31 +9,24 @@
 
 ### Features
 
+* **config:** add `setup-jest.mjs` for ESM mode ([#1463](https://github.com/thymikee/jest-preset-angular/issues/1463)) ([cc6ce3f](https://github.com/thymikee/jest-preset-angular/commit/cc6ce3fd92d00d8b5d71bec535ce2d625a4cc48c))
 * add an option to configure which file processed by `esbuild` ([#1455](https://github.com/thymikee/jest-preset-angular/issues/1455)) ([b58d089](https://github.com/thymikee/jest-preset-angular/commit/b58d089c255a600707a35cabcfa62fb413f8153b)), closes [#1413](https://github.com/thymikee/jest-preset-angular/issues/1413) [#1437](https://github.com/thymikee/jest-preset-angular/issues/1437)
 * drop support Node 12 ([04195d5](https://github.com/thymikee/jest-preset-angular/commit/04195d5326e370e76e6f76d1e2c9cf277cf975a0))
 * exclude `ng-jest-resolver` from default/esm presets ([#1440](https://github.com/thymikee/jest-preset-angular/issues/1440)) ([56673c4](https://github.com/thymikee/jest-preset-angular/commit/56673c4c086e6a4bf8fada5c196c5a50481b04f0))
-* **presets:** use `.mjs` extension for ESM preset ([#1448](https://github.com/thymikee/jest-preset-angular/issues/1448)) ([cf7239d](https://github.com/thymikee/jest-preset-angular/commit/cf7239d55a0b3d33c7e6f55f9eb0adae54e9ea3f))
 * remove `reflect-metadata` in `setup-jest` ([#1428](https://github.com/thymikee/jest-preset-angular/issues/1428)) ([5a36729](https://github.com/thymikee/jest-preset-angular/commit/5a367293ba490d7d717963b099db7531c347d1f4))
 * remove `zone-patch` and its fallback ([#1427](https://github.com/thymikee/jest-preset-angular/issues/1427)) ([bf9ea44](https://github.com/thymikee/jest-preset-angular/commit/bf9ea44a643311f3bbfbcbc67b493aa000336bee))
-* use `import 'zone.js'` and `import 'zone.js/testing'` in `setup-jest` ([#1429](https://github.com/thymikee/jest-preset-angular/issues/1429)) ([55f4375](https://github.com/thymikee/jest-preset-angular/commit/55f4375c6671319c5ab5579c03f3fa06e8ade320))
+* allow running `ngcc` with specific `tsconfig` path ([#1418](https://github.com/thymikee/jest-preset-angular/issues/1418)) ([5f535b5](https://github.com/thymikee/jest-preset-angular/commit/5f535b59227daea6e64e4886b0ea0bd5fd7c1365)), closes [#1348](https://github.com/thymikee/jest-preset-angular/issues/1348)
+* allow skip `ngcc` via `skipNgcc` option via `globalThis` ([#1417](https://github.com/thymikee/jest-preset-angular/issues/1417)) ([7950b5c](https://github.com/thymikee/jest-preset-angular/commit/7950b5cedfab066a268b16f5c87b5ad3670c6888)), closes [#1396](https://github.com/thymikee/jest-preset-angular/issues/1396)
+* remove `ngcc-jest-processor` entry file ([#1414](https://github.com/thymikee/jest-preset-angular/issues/1414)) ([2c5fd20](https://github.com/thymikee/jest-preset-angular/commit/2c5fd20f0535f5441d8bcb477538defdd9529926))
 
 
 ## BREAKING CHANGES
 
-* Since Angular 11, the minimum version of `zone.js` is 0.11.x and Angular 10 is EOL, so now we can use zone patch directly from `zone.js`. 
+* Since **Angular 11**, the minimum version of `zone.js` is **0.11.x** and Angular 10 is EOL, so now we can use zone patch directly from `zone.js`. 
 If one is not using `[email protected]`, please upgrade.
 * Now we are using Angular AST transformers, `reflect-metadata` is not needed anymore.
-* `setup-jest` now is identical to the file which is generated by Angular CLI for Karma + Jasmine, `test.ts`, in which `jest-preset-angular` put
-```js
-import 'zone.js';
-import 'zone.js/testing';
-```
-* Jest 28 correctly resolves Angular package format files so the `ng-jest-resolver` can be marked as optional
-* Node 12 is no longer support
-* ESM preset now uses `.mjs` extensions which cannot use with `require` syntax. One wishes to import this preset in `js` Jest config file should do
-```js
-import esmPreset from 'jest-preset-angular/presets/defaults-esm/jest-preset.mjs';
-```
+* **Jest 28** correctly resolves Angular package format files so the `ng-jest-resolver` is now optional.
+* **Node 12** is no longer support
 * Previously, we always checked file extension `.mjs` and any files from `node_modules` excluding `tslib` to be processed with `esbuild`. 
 With the new option `processWithEsbuild`, now we put default all `.mjs` files to be processed by `esbuild`. Files like `lodash-es` default isn't processed by `esbuild`. 
 If you wish to use `esbuild` to process such files, please configure in your Jest config like
@@ -48,30 +41,8 @@ module.exports = {
     }
 }
 ```
-
-
-# [12.0.0-next.1](https://github.com/thymikee/jest-preset-angular/compare/v12.0.0-next.0...v12.0.0-next.1) (2022-04-26)
-
-
-### Features
-
-* allow running `ngcc` with specific `tsconfig` path ([#1418](https://github.com/thymikee/jest-preset-angular/issues/1418)) ([5f535b5](https://github.com/thymikee/jest-preset-angular/commit/5f535b59227daea6e64e4886b0ea0bd5fd7c1365)), closes [#1348](https://github.com/thymikee/jest-preset-angular/issues/1348)
-* allow skip `ngcc` via `skipNgcc` option via `globalThis` ([#1417](https://github.com/thymikee/jest-preset-angular/issues/1417)) ([7950b5c](https://github.com/thymikee/jest-preset-angular/commit/7950b5cedfab066a268b16f5c87b5ad3670c6888)), closes [#1396](https://github.com/thymikee/jest-preset-angular/issues/1396)
-
-
-
-# [12.0.0-next.0](https://github.com/thymikee/jest-preset-angular/compare/v11.1.1...v12.0.0-next.0) (2022-04-24)
-
-
-### Features
-
-* remove `ngcc-jest-processor` entry file ([#1414](https://github.com/thymikee/jest-preset-angular/issues/1414)) ([2c5fd20](https://github.com/thymikee/jest-preset-angular/commit/2c5fd20f0535f5441d8bcb477538defdd9529926))
-
-
-## BREAKING CHANGES
-
-* Drop Angular 10 support
-* Require Jest 28
+* **Angular 10** is no longer support
+* Require **Jest 28**
 * `ngcc-jest-processor` entry file is now removed. One should use `jest-preset-angular/global-setup` instead.
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jest-preset-angular",
-  "version": "12.0.0-next.2",
+  "version": "12.0.0",
   "description": "Jest preset configuration for Angular projects",
   "license": "MIT",
   "engines": {

website/docs/getting-started/presets.md

@@ -45,6 +45,14 @@ All presets come with default `ts-jest` config options.
 If you want to override any of the options, you'll need to use the JavaScript version of Jest config,
 copy the original options and override the options you need:
 
+:::important
+
+If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
+options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
+errors.
+
+:::
+
 ```js
 // jest.config.js
 const { defaults: jestNgPreset } = require('jest-preset-angular/presets');
@@ -81,11 +89,3 @@ const config: InitialOptionsTsJest = {
 
 export default config;
 ```
-
-:::important
-
-If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
-options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
-errors.
-
-:::

website/docs/getting-started/test-environment.md

@@ -3,6 +3,9 @@ id: test-environment
 title: Test environment
 ---
 
-If you look at [`setup-jest.ts`](https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts),
-what we're doing here is we're adding globals required by Angular. With the included [jest-zone-patch](https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch)
+If you look at [`setup-jest.js`](https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js),
+what we're doing here is we're adding globals required by Angular. With the included [Angular zone patch](https://github.com/angular/angular/tree/main/packages/zone.js)
 we also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal.
+
+While `setup-jest.js` above is for running Jest with **CommonJS** mode, we also provide [`setup-jest.mjs`](https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs)
+to run with **ESM** mode.

website/versioned_docs/version-10.x/getting-started/presets.md

@@ -45,6 +45,14 @@ All presets come with default `ts-jest` config options.
 If you want to override any of the options, you'll need to use the JavaScript version of Jest config,
 copy the original options and override the options you need:
 
+:::important
+
+If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
+options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
+errors.
+
+:::
+
 ```js
 // jest.config.js
 const { defaults: jestNgPreset } = require('jest-preset-angular/presets');
@@ -81,11 +89,3 @@ const config: InitialOptionsTsJest = {
 
 export default config;
 ```
-
-:::important
-
-If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
-options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
-errors.
-
-:::

website/versioned_docs/version-11.0/getting-started/presets.md

@@ -45,6 +45,14 @@ All presets come with default `ts-jest` config options.
 If you want to override any of the options, you'll need to use the JavaScript version of Jest config,
 copy the original options and override the options you need:
 
+:::important
+
+If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
+options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
+errors.
+
+:::
+
 ```js
 // jest.config.js
 const { defaults: jestNgPreset } = require('jest-preset-angular/presets');
@@ -81,11 +89,3 @@ const config: InitialOptionsTsJest = {
 
 export default config;
 ```
-
-:::important
-
-If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
-options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
-errors.
-
-:::

website/versioned_docs/version-11.1/getting-started/presets.md

@@ -45,6 +45,14 @@ All presets come with default `ts-jest` config options.
 If you want to override any of the options, you'll need to use the JavaScript version of Jest config,
 copy the original options and override the options you need:
 
+:::important
+
+If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
+options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
+errors.
+
+:::
+
 ```js
 // jest.config.js
 const { defaults: jestNgPreset } = require('jest-preset-angular/presets');
@@ -81,11 +89,3 @@ const config: InitialOptionsTsJest = {
 
 export default config;
 ```
-
-:::important
-
-If you choose to override `globals` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
-options provided through the default preset are defined to the `globals.ts-jest` section too, otherwise you will get
-errors.
-
-:::

website/versioned_docs/version-12.0/getting-started/installation.md

@@ -0,0 +1,120 @@
+---
+id: installation
+title: Installation
+---
+
+### Dependencies
+
+You can install `jest-preset-angular` and dependencies all at once with one of the following commands.
+
+#### NPM
+
+```sh
+npm install -D jest jest-preset-angular @types/jest
+```
+
+#### Yarn
+
+```sh
+yarn add -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"]
+}
+```
+
+### Customizing
+
+#### Global mocks
+
+`jest-preset-angular` uses `JSDOM` which is different from normal browsers. You might need some global browser mocks to
+stimulate the behaviors of real browsers in `JSDOM`. To add global mocks, you can do the following:
+
+- Create a file `jest-global-mocks.ts` to your root project.
+- Import it in your global setup file:
+
+```ts
+// Assuming that your global setup file is setup-jest.ts
+import 'jest-preset-angular/setup-jest';
+import './jest-global-mocks';
+```
+
+:::tip
+
+An example for `jest-global-mocks.ts`
+
+```
+Object.defineProperty(window, 'CSS', { value: null });
+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,
+    };
+  },
+});
+```
+
+:::
+
+#### Avoid karma conflicts
+
+By Angular CLI defaults you'll have a `src/test.ts` file which will be picked up by jest. To circumvent this you can either rename it to `src/karmaTest.ts` or hide it from jest by adding `<rootDir>/src/test.ts` to jest `testPathIgnorePatterns` option.