Skip to content

Commit 552922e

Browse files
ahnpnlahnpnl
committedNov 27, 2024
feat: add preset creator functions
·
v15.0.0-next.0v14.4.0
1 parent 3c8f978 commit 552922e

File tree

9 files changed

+355
-55
lines changed

9 files changed

+355
-55
lines changed
 

‎presets/index.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,7 @@ declare const _default: {
1818
snapshotSerializers: string[];
1919
};
2020
defaultTransformerOptions: import('ts-jest').TsJestTransformerOptions;
21+
createCjsPreset: typeof import('../build/presets').createCjsPreset;
22+
createEsmPreset: typeof import('../build/presets').createEsmPreset;
2123
};
2224
export default _default;

‎presets/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ module.exports = {
44
defaults: ngJestPresets.defaultPreset,
55
defaultsESM: ngJestPresets.defaultEsmPreset,
66
defaultTransformerOptions: ngJestPresets.defaultTransformerOptions,
7+
createCjsPreset: ngJestPresets.createCjsPreset,
8+
createEsmPreset: ngJestPresets.createEsmPreset,
79
};

‎src/presets/__snapshots__/index.spec.ts.snap

+140-2
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,14 @@ exports[`Jest presets should have the correct types which come from \`ts-jest\`
2121
snapshotSerializers: string[];
2222
};
2323
defaultTransformerOptions: import('ts-jest').TsJestTransformerOptions;
24+
createCjsPreset: typeof import('../build/presets').createCjsPreset;
25+
createEsmPreset: typeof import('../build/presets').createEsmPreset;
2426
};
2527
export default _default;
2628
"
2729
`;
2830

29-
exports[`Jest presets should return the correct jest config 1`] = `
31+
exports[`Jest presets should return jest config with CJS preset creator function with options 1`] = `
3032
{
3133
"moduleFileExtensions": [
3234
"ts",
@@ -45,6 +47,7 @@ exports[`Jest presets should return the correct jest config 1`] = `
4547
"^.+\\.(ts|js|mjs|html|svg)$": [
4648
"jest-preset-angular",
4749
{
50+
"diagnostics": false,
4851
"stringifyContentPathRegex": "\\.(html|svg)$",
4952
"tsconfig": "<rootDir>/tsconfig.spec.json",
5053
},
@@ -56,7 +59,142 @@ exports[`Jest presets should return the correct jest config 1`] = `
5659
}
5760
`;
5861

59-
exports[`Jest presets should return the correct jest config 2`] = `
62+
exports[`Jest presets should return jest config with CJS preset creator function without options 1`] = `
63+
{
64+
"moduleFileExtensions": [
65+
"ts",
66+
"html",
67+
"js",
68+
"json",
69+
"mjs",
70+
],
71+
"snapshotSerializers": [
72+
"jest-preset-angular/build/serializers/html-comment",
73+
"jest-preset-angular/build/serializers/ng-snapshot",
74+
"jest-preset-angular/build/serializers/no-ng-attributes",
75+
],
76+
"testEnvironment": "jsdom",
77+
"transform": {
78+
"^.+\\.(ts|js|mjs|html|svg)$": [
79+
"jest-preset-angular",
80+
{
81+
"stringifyContentPathRegex": "\\.(html|svg)$",
82+
"tsconfig": "<rootDir>/tsconfig.spec.json",
83+
},
84+
],
85+
},
86+
"transformIgnorePatterns": [
87+
"node_modules/(?!.*\\.mjs$)",
88+
],
89+
}
90+
`;
91+
92+
exports[`Jest presets should return jest config with ESM preset creator function with options 1`] = `
93+
{
94+
"extensionsToTreatAsEsm": [
95+
".ts",
96+
],
97+
"moduleFileExtensions": [
98+
"ts",
99+
"html",
100+
"js",
101+
"json",
102+
"mjs",
103+
],
104+
"moduleNameMapper": {
105+
"tslib": "tslib/tslib.es6.js",
106+
},
107+
"snapshotSerializers": [
108+
"jest-preset-angular/build/serializers/html-comment",
109+
"jest-preset-angular/build/serializers/ng-snapshot",
110+
"jest-preset-angular/build/serializers/no-ng-attributes",
111+
],
112+
"testEnvironment": "jsdom",
113+
"transform": {
114+
"^.+\\.(ts|js|html|svg)$": [
115+
"jest-preset-angular",
116+
{
117+
"diagnostics": false,
118+
"stringifyContentPathRegex": "\\.(html|svg)$",
119+
"tsconfig": "<rootDir>/tsconfig.spec.json",
120+
"useESM": true,
121+
},
122+
],
123+
},
124+
"transformIgnorePatterns": [
125+
"node_modules/(?!tslib)",
126+
],
127+
}
128+
`;
129+
130+
exports[`Jest presets should return jest config with ESM preset creator function without options 1`] = `
131+
{
132+
"extensionsToTreatAsEsm": [
133+
".ts",
134+
],
135+
"moduleFileExtensions": [
136+
"ts",
137+
"html",
138+
"js",
139+
"json",
140+
"mjs",
141+
],
142+
"moduleNameMapper": {
143+
"tslib": "tslib/tslib.es6.js",
144+
},
145+
"snapshotSerializers": [
146+
"jest-preset-angular/build/serializers/html-comment",
147+
"jest-preset-angular/build/serializers/ng-snapshot",
148+
"jest-preset-angular/build/serializers/no-ng-attributes",
149+
],
150+
"testEnvironment": "jsdom",
151+
"transform": {
152+
"^.+\\.(ts|js|html|svg)$": [
153+
"jest-preset-angular",
154+
{
155+
"stringifyContentPathRegex": "\\.(html|svg)$",
156+
"tsconfig": "<rootDir>/tsconfig.spec.json",
157+
"useESM": true,
158+
},
159+
],
160+
},
161+
"transformIgnorePatterns": [
162+
"node_modules/(?!tslib)",
163+
],
164+
}
165+
`;
166+
167+
exports[`Jest presets should return the correct jest config with legacy preset config 1`] = `
168+
{
169+
"moduleFileExtensions": [
170+
"ts",
171+
"html",
172+
"js",
173+
"json",
174+
"mjs",
175+
],
176+
"snapshotSerializers": [
177+
"jest-preset-angular/build/serializers/html-comment",
178+
"jest-preset-angular/build/serializers/ng-snapshot",
179+
"jest-preset-angular/build/serializers/no-ng-attributes",
180+
],
181+
"testEnvironment": "jsdom",
182+
"transform": {
183+
"^.+\\.(ts|js|mjs|html|svg)$": [
184+
"jest-preset-angular",
185+
{
186+
"stringifyContentPathRegex": "\\.(html|svg)$",
187+
"tsconfig": "<rootDir>/tsconfig.spec.json",
188+
},
189+
],
190+
},
191+
"transformIgnorePatterns": [
192+
"node_modules/(?!.*\\.mjs$)",
193+
],
194+
}
195+
`;
196+
197+
exports[`Jest presets should return the correct jest config with legacy preset config 2`] = `
60198
{
61199
"extensionsToTreatAsEsm": [
62200
".ts",

‎src/presets/create-cjs-preset.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { Config } from 'jest';
2+
import type { TsJestTransformerOptions } from 'ts-jest';
3+
4+
import { basePresetConfig } from './utils';
5+
6+
type CjsPresetType = typeof basePresetConfig & Required<Pick<Config, 'transformIgnorePatterns' | 'transform'>>;
7+
8+
type CjsPresetOptionsType = Omit<TsJestTransformerOptions, 'useESM' | 'stringifyContentPathRegex' | 'compiler'>;
9+
10+
export const createCjsPreset = (options: CjsPresetOptionsType = {}): CjsPresetType => {
11+
return {
12+
...basePresetConfig,
13+
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
14+
transform: {
15+
'^.+\\.(ts|js|mjs|html|svg)$': [
16+
'jest-preset-angular',
17+
{
18+
tsconfig: '<rootDir>/tsconfig.spec.json',
19+
stringifyContentPathRegex: '\\.(html|svg)$',
20+
...options,
21+
},
22+
],
23+
},
24+
};
25+
};

‎src/presets/create-esm-preset.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { Config } from 'jest';
2+
import type { TsJestTransformerOptions } from 'ts-jest';
3+
4+
import { basePresetConfig } from './utils';
5+
6+
type EsmPresetType = typeof basePresetConfig &
7+
Required<Pick<Config, 'extensionsToTreatAsEsm' | 'moduleNameMapper' | 'transformIgnorePatterns' | 'transform'>>;
8+
9+
type EsmPresetOptionsType = Omit<TsJestTransformerOptions, 'useESM' | 'stringifyContentPathRegex' | 'compiler'>;
10+
11+
export const createEsmPreset = (options: EsmPresetOptionsType = {}): EsmPresetType => {
12+
return {
13+
...basePresetConfig,
14+
extensionsToTreatAsEsm: ['.ts'],
15+
moduleNameMapper: {
16+
tslib: 'tslib/tslib.es6.js',
17+
},
18+
transformIgnorePatterns: ['node_modules/(?!tslib)'],
19+
transform: {
20+
'^.+\\.(ts|js|html|svg)$': [
21+
'jest-preset-angular',
22+
{
23+
tsconfig: '<rootDir>/tsconfig.spec.json',
24+
stringifyContentPathRegex: '\\.(html|svg)$',
25+
useESM: true,
26+
...options,
27+
},
28+
],
29+
},
30+
};
31+
};

‎src/presets/index.spec.ts

+30-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,38 @@
11
import fs from 'fs';
22
import path from 'path';
33

4-
import { defaultPreset, defaultEsmPreset } from './';
4+
import { defaultPreset, defaultEsmPreset, createCjsPreset, createEsmPreset } from './';
55

66
describe('Jest presets', () => {
7-
test.each([defaultPreset, defaultEsmPreset])('should return the correct jest config', (preset) => {
8-
expect(preset).toMatchSnapshot();
7+
test.each([defaultPreset, defaultEsmPreset])(
8+
'should return the correct jest config with legacy preset config',
9+
(preset) => {
10+
expect(preset).toMatchSnapshot();
11+
},
12+
);
13+
14+
it('should return jest config with CJS preset creator function without options', () => {
15+
expect(createCjsPreset()).toMatchSnapshot();
16+
});
17+
18+
it('should return jest config with CJS preset creator function with options', () => {
19+
expect(
20+
createCjsPreset({
21+
diagnostics: false,
22+
}),
23+
).toMatchSnapshot();
24+
});
25+
26+
it('should return jest config with ESM preset creator function without options', () => {
27+
expect(createEsmPreset()).toMatchSnapshot();
28+
});
29+
30+
it('should return jest config with ESM preset creator function with options', () => {
31+
expect(
32+
createEsmPreset({
33+
diagnostics: false,
34+
}),
35+
).toMatchSnapshot();
936
});
1037

1138
test('should have the correct types which come from `ts-jest`', () => {

‎src/presets/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,5 @@ const defaultEsmPreset = {
4040
};
4141

4242
export { defaultPreset, defaultEsmPreset, defaultTransformerOptions };
43+
export { createCjsPreset } from './create-cjs-preset';
44+
export { createEsmPreset } from './create-esm-preset';

‎src/presets/utils.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { Config } from 'jest';
2+
3+
import snapshotSerializers from '../serializers';
4+
5+
type BasePresetConfig = Required<Pick<Config, 'testEnvironment' | 'moduleFileExtensions' | 'snapshotSerializers'>>;
6+
7+
export const basePresetConfig: BasePresetConfig = {
8+
testEnvironment: 'jsdom',
9+
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
10+
snapshotSerializers,
11+
};

‎website/docs/getting-started/presets.md

+112-50
Original file line numberDiff line numberDiff line change
@@ -3,95 +3,157 @@ id: presets
33
title: Presets
44
---
55

6-
### The presets
6+
In Jest, **presets** are pre-defined configurations that help streamline and standardize the process of setting up testing environments.
7+
They allow developers to quickly configure Jest with specific transformers, file extensions, and other options.
78

8-
`jest-preset-angular` comes with 2 presets, covering most of the project's base configuration:
9+
`jest-preset-angular` provides very opinionated presets and based on what we found to be useful.
910

10-
| Preset name | Description |
11-
| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
12-
| `jest-preset-angular/presets/default`<br/>or `jest-preset-angular` | TypeScript, JavaScript and HTML files (`js`, `.ts`, `.html`) will be transformed by `jest-preset-angular` to **CommonJS** syntax. |
13-
| `jest-preset-angular/presets/defaults-esm`<br/> | TypeScript, JavaScript and HTML files (`js`, `.ts`, `.html`) will be transformed by `jest-preset-angular` to **ESM** syntax. |
11+
:::important
12+
13+
The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page.
1414

15-
### Basic usage
15+
:::
1616

17-
In most cases, simply setting the `preset` key to the desired preset name in your Jest config should be enough to start
18-
using TypeScript with Jest (assuming you added `jest-preset-angular` to your `devDependencies` of course):
17+
## Functions
1918

20-
```ts title="jest.config.ts" tab={"label": "TypeScript CJS"}
19+
import TOCInline from '@theme/TOCInline';
20+
21+
<TOCInline toc={toc.slice(1)} />
22+
23+
---
24+
25+
### `createCjsPreset(options)`
26+
27+
Create a configuration to process JavaScript/TypeScript/HTML/SVG files (`ts|js|mjs|html|svg`).
28+
29+
#### Parameters
30+
31+
- `options` (**OPTIONAL**)
32+
- `tsconfig`: see more at [tsconfig options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig)
33+
- `isolatedModules`: see more at [isolatedModules options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules)
34+
- `astTransformers`: see more at [astTransformers options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers)
35+
- `diagnostics`: see more at [diagnostics options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics)
36+
37+
#### Returns
38+
39+
An object contains Jest config:
40+
41+
```ts
42+
type CjsPresetTransformerOptions = {
43+
tsconfig: string;
44+
stringifyContentPathRegex: string;
45+
};
46+
47+
type CjsPresetType = {
48+
testEnvironment: string;
49+
moduleFileExtensions: Array<string>;
50+
snapshotSerializers: Array<string>;
51+
transformIgnorePatterns: Array<string>;
52+
transform: {
53+
'^.+.tsx?$': ['^.+\\.(ts|js|mjs|html|svg)$', CjsPresetTransformerOptions];
54+
};
55+
};
56+
```
57+
58+
#### Example:
59+
60+
```ts title="jest.config.ts"
61+
import presets from 'jest-preset-angular/presets';
2162
import type { Config } from 'jest';
2263

64+
const presetConfig = presets.createCjsPreset({
65+
//...options
66+
});
67+
2368
const jestConfig: Config = {
24-
// [...]
25-
// Replace `jest-preset-angular` with the preset you want to use
26-
// from the above list
27-
preset: 'jest-preset-angular',
69+
...presetConfig,
2870
};
2971

3072
export default jestConfig;
3173
```
3274

33-
```ts title="jest.config.mts" tab={"label": "TypeScript ESM"}
75+
### `createEsmPreset(options)`
76+
77+
Create a configuration to process JavaScript/TypeScript/HTML/SVG files (`ts|js|html|svg`).
78+
79+
#### Parameters
80+
81+
- `options` (**OPTIONAL**)
82+
- `tsconfig`: see more at [tsconfig options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig)
83+
- `isolatedModules`: see more at [isolatedModules options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules)
84+
- `astTransformers`: see more at [astTransformers options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers)
85+
- `diagnostics`: see more at [diagnostics options page](https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics)
86+
87+
#### Returns
88+
89+
An object contains Jest config:
90+
91+
```ts
92+
type EsmPresetTransformerOptions = {
93+
tsconfig: string;
94+
stringifyContentPathRegex: string;
95+
useEsm: true;
96+
};
97+
98+
type EsmPresetType = {
99+
testEnvironment: string;
100+
moduleFileExtensions: Array<string>;
101+
snapshotSerializers: Array<string>;
102+
transformIgnorePatterns: Array<string>;
103+
transform: {
104+
'^.+.tsx?$': ['^.+\\.(ts|js|html|svg)$', EsmPresetTransformerOptions];
105+
};
106+
};
107+
```
108+
109+
#### Example:
110+
111+
```ts title="jest.config.mts"
112+
import presets from 'jest-preset-angular/presets';
34113
import type { Config } from 'jest';
35114

115+
const presetConfig = presets.createEsmPreset({
116+
//...options
117+
});
118+
36119
const jestConfig: Config = {
37-
// [...]
38-
// Replace `jest-preset-angular` with the preset you want to use
39-
// from the above list
40-
preset: 'jest-preset-angular',
120+
...presetConfig,
41121
};
42122

43123
export default jestConfig;
44124
```
45125

46-
### Advanced
47-
48-
All presets come with default `ts-jest` config options.
49-
If you want to override any of the options, you'll need to use the JavaScript version of Jest config,
50-
copy the original options and override the options you need:
126+
### Legacy presets
51127

52-
:::important
128+
:::warning
53129

54-
If you choose to override `transform` in order to point at a specific tsconfig, you will need to make sure that original `ts-jest`
55-
options provided through the default preset are defined to the `transform` section too, otherwise you will get
56-
errors.
130+
`jest-preset-angular` **DON'T RECOMMEND** to use legacy presets because this approach is not flexible to configure Jest configuration.
131+
These legacy presets will be removed in the next major release and users are **HIGHLY RECOMMENDED** to migrate to use the above utility functions.
57132

58133
:::
59134

135+
| Preset name | Description |
136+
| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
137+
| `jest-preset-angular/presets/default`<br/>or `jest-preset-angular` | TypeScript, JavaScript and HTML files (`js`, `.ts`, `.html`) will be transformed by `jest-preset-angular` to **CommonJS** syntax. |
138+
| `jest-preset-angular/presets/defaults-esm`<br/> | TypeScript, JavaScript and HTML files (`js`, `.ts`, `.html`) will be transformed by `jest-preset-angular` to **ESM** syntax. |
139+
140+
#### Example
141+
60142
```ts title="jest.config.ts" tab={"label": "TypeScript CJS"}
61143
import type { Config } from 'jest';
62-
import presets from 'jest-preset-angular/presets';
63144

64145
const jestConfig: Config = {
65-
// [...]
66-
transform: {
67-
'^.+\\.(ts|js|mjs|html|svg)$': [
68-
'jest-preset-angular',
69-
{
70-
...presets.defaultTransformerOptions,
71-
// [...your overriden options]
72-
},
73-
],
74-
},
146+
preset: 'jest-preset-angular',
75147
};
76148

77149
export default jestConfig;
78150
```
79151

80152
```ts title="jest.config.mts" tab={"label": "TypeScript ESM"}
81153
import type { Config } from 'jest';
82-
import presets from 'jest-preset-angular/presets';
83154

84155
const jestConfig: Config = {
85-
// [...]
86-
transform: {
87-
'^.+\\.(ts|js|mjs|html|svg)$': [
88-
'jest-preset-angular',
89-
{
90-
...presets.defaultTransformerOptions,
91-
// [...your overriden options]
92-
},
93-
],
94-
},
156+
preset: 'jest-preset-angular/presets/defaults-esm',
95157
};
96158

97159
export default jestConfig;

0 commit comments

Comments
 (0)
Please sign in to comment.