docs: add documentation for v14.3

website/docs/getting-started/installation.md

@@ -33,7 +33,7 @@ setupZoneTestEnv();
 
 ```ts tab={"label":"TypeScript ESM"}
 // setup-jest.ts
-import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone.mjs';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
 
 setupZoneTestEnv();
 ```

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

@@ -44,7 +44,7 @@ setupZoneTestEnv({
 
 ```ts tab={"label": "TypeScript ESM"}
 // setup-jest.ts
-import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone.mjs';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
 
 setupZoneTestEnv({
   //...options
@@ -100,7 +100,7 @@ You can customize the environment by providing options as function arguments.
 
 ```ts tab={"label": "TypeScript ESM"}
 // setup-jest.ts
-import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zone.mjs';
+import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';
 
 setupZonelessTestEnv({
   //...options

website/docs/guides/angular-13+.md

@@ -111,16 +111,18 @@ export default jestConfig;
 
 Before upgrading to ng13 and switching to ES Modules, your `setup-jest.ts` file most likely uses the preset `setup-jest`, like the following:
 
-```ts
+```ts tab={"label":"TypeScript CJS"}
 // setup-jest.ts
-import 'jest-preset-angular/setup-jest';
-```
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
 
-or for ESM mode
+setupZoneTestEnv();
+```
 
-```ts
+```ts tab={"label":"TypeScript ESM"}
 // setup-jest.ts
-import 'jest-preset-angular/setup-jest.mjs';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+setupZoneTestEnv();
 ```
 
 ## Potential issues with Angular 13 ESM package format and workaround

website/docs/guides/esm-support.md

@@ -19,7 +19,9 @@ Besides, there is `setup-jest.mjs` to add to Jest setup file to ensure that Jest
 
 ```ts
 // setup-jest.ts
-import 'jest-preset-angular/setup-jest.mjs';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+setupZoneTestEnv();
 ```
 
 ### Examples

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

@@ -0,0 +1,174 @@
+---
+id: installation
+title: Installation
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+### Dependencies
+
+You can install `jest-preset-angular` and dependencies all at once with one of the following commands.
+
+```bash npm2yarn
+npm install -D jest jest-preset-angular @types/jest
+```
+
+### Configuration
+
+:::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
+
+:::
+
+In your project root, create a setup file with following contents:
+
+```ts tab={"label":"TypeScript CJS"}
+// setup-jest.ts
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
+```
+
+```ts tab={"label":"TypeScript ESM"}
+// setup-jest.ts
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+setupZoneTestEnv();
+```
+
+Add the following section to your root Jest config
+
+```ts tab={"label":"TypeScript CJS"}
+// jest.config.ts
+import type { Config } from 'jest';
+
+const jestConfig: Config = {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+};
+
+export default jestConfig;
+```
+
+```ts tab={"label":"TypeScript ESM"}
+// jest.config.mts
+import type { Config } from 'jest';
+
+const jestConfig: Config = {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+};
+
+export default jestConfig;
+```
+
+Adjust your `tsconfig.spec.json` to be:
+
+```json5 tab={"label": "Tsconfig CJS"}
+// tsconfig.spec.json
+{
+  //...
+  extends: './tsconfig.json',
+  compilerOptions: {
+    //...
+    module: 'CommonJS',
+    types: ['jest'],
+  },
+  include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],
+  //...
+}
+```
+
+```json tab={"label": "Tsconfig ESM"}
+// tsconfig.spec.json
+{
+  //...
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    //...
+    "module": "ES2022",
+    "types": ["jest"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+  //...
+}
+```
+
+Adjust `scripts` part your `package.json` to use `jest` instead of `ng`, e.g.
+
+```json
+// package.json
+{
+  //...
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch"
+  }
+  //...
+}
+```
+
+### Customizing
+
+#### Global mocks
+
+`jest-preset-angular` uses `JSDOM` which is different from normal browsers. You might need some global browser mocks to
+simulate 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 tab={"label":"TypeScript CJS"}
+// setup-jest.ts
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+import './jest-global-mocks';
+
+setupZoneTestEnv();
+```
+
+```ts tab={"label":"TypeScript ESM"}
+// setup-jest.ts
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone.mjs';
+import './jest-global-mocks';
+
+setupZoneTestEnv();
+```
+
+:::tip
+
+An example for `jest-global-mocks.ts`
+
+```ts
+// 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,
+    };
+  },
+});
+```
+
+:::
+
+#### 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.

website/versioned_docs/version-14.3/getting-started/options.md

@@ -0,0 +1,146 @@
+---
+id: options
+title: Options
+---
+
+`jest-preset-angular` uses `ts-jest` options under the hood, which are located under the `transform` of Jest config object
+in the `package.json` file of your project, or through a `jest.config.js`, or `jest.config.ts` file.
+
+More information about `ts-jest` options, see [doc](https://kulshekhar.github.io/ts-jest/docs/getting-started/options)
+
+:::important
+
+Since **v9.0.0**, `jest-preset-angular` default Jest configuration no longer provides `moduleNameMapper`. If you wish to reuse
+the old `moduleNameMapper` configuration, you can put this into your Jest config.
+
+```js tab
+// jest.config.js
+module.exports = {
+  //...
+  moduleNameMapper: {
+    '^src/(.*)$': '<rootDir>/src/$1',
+    '^app/(.*)$': '<rootDir>/src/app/$1',
+    '^assets/(.*)$': '<rootDir>/src/assets/$1',
+    '^environments/(.*)$': '<rootDir>/src/environments/$1',
+  },
+};
+```
+
+```ts tab
+// jest.config.ts
+import type { Config } from 'jest';
+
+const jestConfig: Config = {
+  //...
+  moduleNameMapper: {
+    '^src/(.*)$': '<rootDir>/src/$1',
+    '^app/(.*)$': '<rootDir>/src/app/$1',
+    '^assets/(.*)$': '<rootDir>/src/assets/$1',
+    '^environments/(.*)$': '<rootDir>/src/environments/$1',
+  },
+};
+
+export default jestConfig;
+```
+
+### Processing with esbuild
+
+Since **v11.0.0**, `jest-preset-angular` introduced the usage of `esbuild` to process files besides TypeScript API. By default, all `.mjs` files
+will be processed by `esbuild` in `jest-preset-angular`. To configure extra files to process with `esbuild`, one can do the following:
+
+```js tab
+// jest.config.js
+module.exports = {
+  //...
+  globals: {
+    ngJest: {
+      processWithEsbuild: [<glob_to_files>],
+    },
+  },
+}
+```
+
+```ts tab
+// jest.config.ts
+import type { Config } from 'jest';
+
+const jestConfig: Config = {
+  //...
+  globals: {
+    ngJest: {
+      processWithEsbuild: [<glob_to_files>],
+    },
+  },
+}
+
+export default jestConfig;
+```
+
+:::
+
+### Exposed configuration
+
+```js tab
+// jest.config.js
+const snapshotSerializers = require('jest-preset-angular/build/serializers');
+
+module.exports = {
+  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
+  resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
+  snapshotSerializers,
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  transform: {
+    '^.+\\.(ts|js|mjs|html|svg)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+};
+```
+
+```ts tab
+// jest.config.ts
+import type { Config } from 'jest';
+import snapshotSerializers from 'jest-preset-angular/build/serializers';
+
+const jestConfig: Config = {
+  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
+  resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
+  snapshotSerializers,
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  transform: {
+    '^.+\\.(ts|js|mjs|html|svg)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+};
+
+export default jestConfig;
+```
+
+:::important
+
+Jest runs with `jest-preset-angular` neither in browser nor through dev server. It uses `JSDOM` to abstract browser environment hence we depend on
+`JSDOM` implementation for real browser features.
+
+:::
+
+### Brief explanation of config
+
+- We're using `"transform"` to pass information about configuration to use for code compilation with `ts-jest`.
+- `"moduleFileExtensions"` – our modules are TypeScript (`ts`), HTML (`html`), JavaScript (`js`), JSON (`json`) and ESM JavaScript (`mjs`) files.
+- `"moduleNameMapper"` – if you're using absolute imports here's how to tell Jest where to look for them; uses `RegExp`.
+- `"resolver"` - instruct Jest how to resolve entry file based on `package.json` definitions.
+- `"snapshotSerializers"` - array of serializers which will be applied to snapshot the code. See more in [Snapshot testing](../guides/snapshot-testing.md)
+- `"testEnvironment"` – the test environment to run on.
+- `"transformIgnorePatterns"`: instruct Jest to transform any `.mjs` files which come from `node_modules`.
+- `"transform"` – run every `TS`, `JS`, `MJS`, `HTML`, or `SVG` file through so called _Jest transformer_; this lets Jest understand non-JS syntax.