Skip to content

Commit 6f90447

Browse files
ahnpnlahnpnl
committed
chore(release): 14.2.0
1 parent a1be63d commit 6f90447

38 files changed

+2728
-7
lines changed

‎CHANGELOG.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
## [14.2.0](https://github.com/thymikee/jest-preset-angular/compare/v14.1.1...v14.2.0) (2024-07-22)
2+
3+
4+
### Features
5+
6+
* 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)
7+
8+
9+
### Code Refactoring
10+
11+
* refactor(compiler): replace copied codes from ts source with public API ([ad7a297](https://github.com/thymikee/jest-preset-angular/commit/ad7a297))
12+
* refactor(serializers): improve codes for snapshot serializer ([047f09a](https://github.com/thymikee/jest-preset-angular/commit/047f09a))
13+
* refactor(serializers): use proper ts types for `ng-snapshot` ([3ce21cd](https://github.com/thymikee/jest-preset-angular/commit/3ce21cd))
14+
15+
16+
117
## [14.1.1](https://github.com/thymikee/jest-preset-angular/compare/v14.1.0...v14.1.1) (2024-06-19)
218

319

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jest-preset-angular",
3-
"version": "14.1.1",
3+
"version": "14.2.0",
44
"description": "Jest preset configuration for Angular projects",
55
"license": "MIT",
66
"engines": {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
### Exposed configuration
3131

3232
```js
33-
const snapshotSerializers = require('../build/serializers');
33+
const snapshotSerializers = require('jest-preset-angular/build/serializers');
3434

3535
module.exports = {
3636
globals: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
### Exposed configuration
3131

3232
```js
33-
const snapshotSerializers = require('../build/serializers');
33+
const snapshotSerializers = require('jest-preset-angular/build/serializers');
3434

3535
module.exports = {
3636
globals: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
### Exposed configuration
3131

3232
```js
33-
const snapshotSerializers = require('../build/serializers');
33+
const snapshotSerializers = require('jest-preset-angular/build/serializers');
3434

3535
module.exports = {
3636
globals: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default jestConfig;
8282

8383
```js tab
8484
// jest.config.js
85-
const snapshotSerializers = require('../build/serializers');
85+
const snapshotSerializers = require('jest-preset-angular/build/serializers');
8686

8787
module.exports = {
8888
globals: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default jestConfig;
8282

8383
```js tab
8484
// jest.config.js
85-
const snapshotSerializers = require('../build/serializers');
85+
const snapshotSerializers = require('jest-preset-angular/build/serializers');
8686

8787
module.exports = {
8888
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],

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

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
id: installation
3+
title: Installation
4+
---
5+
6+
### Dependencies
7+
8+
You can install `jest-preset-angular` and dependencies all at once with one of the following commands.
9+
10+
```bash npm2yarn
11+
npm install -D jest jest-preset-angular @types/jest
12+
```
13+
14+
### Configuration
15+
16+
:::important
17+
18+
Angular doesn't support native `async/await` in testing with `target` higher than `ES2016`, see https://github.com/angular/components/issues/21632#issuecomment-764975917
19+
20+
:::
21+
22+
In your project root, create `setup-jest.ts` file with following contents:
23+
24+
```ts
25+
import 'jest-preset-angular/setup-jest';
26+
```
27+
28+
Add the following section:
29+
30+
- to your root Jest config
31+
32+
```js tab
33+
// jest.config.js
34+
module.exports = {
35+
preset: 'jest-preset-angular',
36+
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
37+
};
38+
```
39+
40+
```ts tab
41+
// jest.config.ts
42+
import type { Config } from 'jest';
43+
44+
const jestConfig: Config = {
45+
preset: 'jest-preset-angular',
46+
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
47+
};
48+
49+
export default jestConfig;
50+
```
51+
52+
Adjust your `tsconfig.spec.json` to be:
53+
54+
```json
55+
{
56+
"extends": "./tsconfig.json",
57+
"compilerOptions": {
58+
"outDir": "./out-tsc/spec",
59+
"module": "CommonJs",
60+
"types": ["jest"]
61+
},
62+
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
63+
}
64+
```
65+
66+
Adjust `scripts` part your `package.json` to use `jest` instead of `ng`, e.g.
67+
68+
```json
69+
{
70+
"scripts": {
71+
"test": "jest",
72+
"test:watch": "jest --watch"
73+
}
74+
}
75+
```
76+
77+
### Customizing
78+
79+
#### Global mocks
80+
81+
`jest-preset-angular` uses `JSDOM` which is different from normal browsers. You might need some global browser mocks to
82+
simulate the behaviors of real browsers in `JSDOM`. To add global mocks, you can do the following:
83+
84+
- Create a file `jest-global-mocks.ts` to your root project.
85+
- Import it in your global setup file:
86+
87+
```ts
88+
// Assuming that your global setup file is setup-jest.ts
89+
import 'jest-preset-angular/setup-jest';
90+
import './jest-global-mocks';
91+
```
92+
93+
:::tip
94+
95+
An example for `jest-global-mocks.ts`
96+
97+
```
98+
Object.defineProperty(document, 'doctype', {
99+
value: '<!DOCTYPE html>',
100+
});
101+
Object.defineProperty(window, 'getComputedStyle', {
102+
value: () => {
103+
return {
104+
display: 'none',
105+
appearance: ['-webkit-appearance'],
106+
};
107+
},
108+
});
109+
/**
110+
* ISSUE: https://github.com/angular/material2/issues/7101
111+
* Workaround for JSDOM missing transform property
112+
*/
113+
Object.defineProperty(document.body.style, 'transform', {
114+
value: () => {
115+
return {
116+
enumerable: true,
117+
configurable: true,
118+
};
119+
},
120+
});
121+
```
122+
123+
:::
124+
125+
#### Avoid karma conflicts
126+
127+
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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
id: options
3+
title: Options
4+
---
5+
6+
`jest-preset-angular` uses `ts-jest` options under the hood, which are located under the `transform` of Jest config object
7+
in the `package.json` file of your project, or through a `jest.config.js`, or `jest.config.ts` file.
8+
9+
More information about `ts-jest` options, see [doc](https://kulshekhar.github.io/ts-jest/docs/getting-started/options)
10+
11+
:::important
12+
13+
Since **v9.0.0**, `jest-preset-angular` default Jest configuration no longer provides `moduleNameMapper`. If you wish to reuse
14+
the old `moduleNameMapper` configuration, you can put this into your Jest config.
15+
16+
```js tab
17+
// jest.config.js
18+
module.exports = {
19+
//...
20+
moduleNameMapper: {
21+
'^src/(.*)$': '<rootDir>/src/$1',
22+
'^app/(.*)$': '<rootDir>/src/app/$1',
23+
'^assets/(.*)$': '<rootDir>/src/assets/$1',
24+
'^environments/(.*)$': '<rootDir>/src/environments/$1',
25+
},
26+
};
27+
```
28+
29+
```ts tab
30+
// jest.config.ts
31+
import type { Config } from 'jest';
32+
33+
const jestConfig: Config = {
34+
//...
35+
moduleNameMapper: {
36+
'^src/(.*)$': '<rootDir>/src/$1',
37+
'^app/(.*)$': '<rootDir>/src/app/$1',
38+
'^assets/(.*)$': '<rootDir>/src/assets/$1',
39+
'^environments/(.*)$': '<rootDir>/src/environments/$1',
40+
},
41+
};
42+
43+
export default jestConfig;
44+
```
45+
46+
### Processing with esbuild
47+
48+
Since **v11.0.0**, `jest-preset-angular` introduced the usage of `esbuild` to process files besides TypeScript API. By default, all `.mjs` files
49+
will be processed by `esbuild` in `jest-preset-angular`. To configure extra files to process with `esbuild`, one can do the following:
50+
51+
```js tab
52+
// jest.config.js
53+
module.exports = {
54+
//...
55+
globals: {
56+
ngJest: {
57+
processWithEsbuild: [<glob_to_files>],
58+
},
59+
},
60+
}
61+
```
62+
63+
```ts tab
64+
// jest.config.ts
65+
import type { Config } from 'jest';
66+
67+
const jestConfig: Config = {
68+
//...
69+
globals: {
70+
ngJest: {
71+
processWithEsbuild: [<glob_to_files>],
72+
},
73+
},
74+
}
75+
76+
export default jestConfig;
77+
```
78+
79+
:::
80+
81+
### Exposed configuration
82+
83+
```js tab
84+
// jest.config.js
85+
const snapshotSerializers = require('jest-preset-angular/build/serializers');
86+
87+
module.exports = {
88+
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
89+
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
90+
snapshotSerializers,
91+
testEnvironment: 'jsdom',
92+
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
93+
transform: {
94+
'^.+\\.(ts|js|mjs|html|svg)$': [
95+
'jest-preset-angular',
96+
{
97+
tsconfig: '<rootDir>/tsconfig.spec.json',
98+
stringifyContentPathRegex: '\\.(html|svg)$',
99+
},
100+
],
101+
},
102+
};
103+
```
104+
105+
```ts tab
106+
// jest.config.ts
107+
import type { Config } from 'jest';
108+
import snapshotSerializers from 'jest-preset-angular/build/serializers';
109+
110+
const jestConfig: Config = {
111+
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
112+
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
113+
snapshotSerializers,
114+
testEnvironment: 'jsdom',
115+
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
116+
transform: {
117+
'^.+\\.(ts|js|mjs|html|svg)$': [
118+
'jest-preset-angular',
119+
{
120+
tsconfig: '<rootDir>/tsconfig.spec.json',
121+
stringifyContentPathRegex: '\\.(html|svg)$',
122+
},
123+
],
124+
},
125+
};
126+
127+
export default jestConfig;
128+
```
129+
130+
:::important
131+
132+
Jest runs with `jest-preset-angular` neither in browser nor through dev server. It uses `JSDOM` to abstract browser environment hence we depend on
133+
`JSDOM` implementation for real browser features.
134+
135+
:::
136+
137+
### Brief explanation of config
138+
139+
- We're using `"transform"` to pass information about configuration to use for code compilation with `ts-jest`.
140+
- `"moduleFileExtensions"` – our modules are TypeScript (`ts`), HTML (`html`), JavaScript (`js`), JSON (`json`) and ESM JavaScript (`mjs`) files.
141+
- `"moduleNameMapper"` – if you're using absolute imports here's how to tell Jest where to look for them; uses `RegExp`.
142+
- `"resolver"` - instruct Jest how to resolve entry file based on `package.json` definitions.
143+
- `"snapshotSerializers"` - array of serializers which will be applied to snapshot the code. Note: by default angular adds
144+
some angular-specific attributes to the code (like `ng-reflect-*`, `ng-version="*"`, `_ngcontent-c*` etc).
145+
This package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.
146+
To remove such specific attributes use `no-ng-attributes` serializer. You need to add `no-ng-attributes` serializer manually.
147+
- `"testEnvironment"` – the test environment to run on.
148+
- `"transformIgnorePatterns"`: instruct Jest to transform any `.mjs` files which come from `node_modules`.
149+
- `"transform"` – run every `TS`, `JS`, `MJS`, `HTML`, or `SVG` file through so called _Jest transformer_; this lets Jest understand non-JS syntax.

0 commit comments

Comments
 (0)