chore(release): 14.2.0

CHANGELOG.md

@@ -1,3 +1,19 @@
+## [14.2.0](https://github.com/thymikee/jest-preset-angular/compare/v14.1.1...v14.2.0) (2024-07-22)
+
+
+### Features
+
+* feat(serializers): add option to remove comp attributes ([a1be63d](https://github.com/thymikee/jest-preset-angular/commit/a1be63d)), closes [#2578](https://github.com/thymikee/jest-preset-angular/issues/2578) [#2580](https://github.com/thymikee/jest-preset-angular/issues/2580)
+
+
+### Code Refactoring
+
+* refactor(compiler): replace copied codes from ts source with public API ([ad7a297](https://github.com/thymikee/jest-preset-angular/commit/ad7a297))
+* refactor(serializers): improve codes for snapshot serializer ([047f09a](https://github.com/thymikee/jest-preset-angular/commit/047f09a))
+* refactor(serializers): use proper ts types for `ng-snapshot` ([3ce21cd](https://github.com/thymikee/jest-preset-angular/commit/3ce21cd))
+
+
+
 ## [14.1.1](https://github.com/thymikee/jest-preset-angular/compare/v14.1.0...v14.1.1) (2024-06-19)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jest-preset-angular",
-  "version": "14.1.1",
+  "version": "14.2.0",
   "description": "Jest preset configuration for Angular projects",
   "license": "MIT",
   "engines": {

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

@@ -30,7 +30,7 @@ module.exports = {
 ### Exposed configuration
 
 ```js
-const snapshotSerializers = require('../build/serializers');
+const snapshotSerializers = require('jest-preset-angular/build/serializers');
 
 module.exports = {
   globals: {

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

@@ -30,7 +30,7 @@ module.exports = {
 ### Exposed configuration
 
 ```js
-const snapshotSerializers = require('../build/serializers');
+const snapshotSerializers = require('jest-preset-angular/build/serializers');
 
 module.exports = {
   globals: {

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

@@ -30,7 +30,7 @@ module.exports = {
 ### Exposed configuration
 
 ```js
-const snapshotSerializers = require('../build/serializers');
+const snapshotSerializers = require('jest-preset-angular/build/serializers');
 
 module.exports = {
   globals: {

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

@@ -82,7 +82,7 @@ export default jestConfig;
 
 ```js tab
 // jest.config.js
-const snapshotSerializers = require('../build/serializers');
+const snapshotSerializers = require('jest-preset-angular/build/serializers');
 
 module.exports = {
   globals: {

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

@@ -82,7 +82,7 @@ export default jestConfig;
 
 ```js tab
 // jest.config.js
-const snapshotSerializers = require('../build/serializers');
+const snapshotSerializers = require('jest-preset-angular/build/serializers');
 
 module.exports = {
   moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],

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

@@ -0,0 +1,127 @@
+---
+id: installation
+title: Installation
+---
+
+### 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 `setup-jest.ts` file with following contents:
+
+```ts
+import 'jest-preset-angular/setup-jest';
+```
+
+Add the following section:
+
+- to your root Jest config
+
+```js tab
+// jest.config.js
+module.exports = {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+};
+```
+
+```ts tab
+// jest.config.ts
+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:
+
+```json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "module": "CommonJs",
+    "types": ["jest"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}
+```
+
+Adjust `scripts` part your `package.json` to use `jest` instead of `ng`, e.g.
+
+```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
+// 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(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.0/getting-started/options.md

@@ -0,0 +1,149 @@
+---
+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. Note: by default angular adds
+  some angular-specific attributes to the code (like `ng-reflect-*`, `ng-version="*"`, `_ngcontent-c*` etc).
+  This package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.
+  To remove such specific attributes use `no-ng-attributes` serializer. You need to add `no-ng-attributes` serializer manually.
+- `"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.