0
# Preset Configuration
1

2
Pre-configured Jest settings optimized for Nx workspaces with TypeScript support, modern JavaScript features, and monorepo-specific optimizations. The preset provides sensible defaults that work well with Nx's build system and caching mechanisms.
3

4
## Capabilities
5

6
### Nx Jest Preset
7

8
Default Jest configuration preset optimized for Nx workspaces.
9

10
```typescript { .api }
11
/**
12
 * Nx Jest preset with optimized configuration for monorepos
13
 */
14
const nxPreset: Config;
15

16
/**
17
 * Default export of the Nx Jest preset
18
 */
19
export default nxPreset;
20
```
21

22
### Preset Configuration Object
23

24
Complete Jest configuration object with Nx-specific optimizations.
25

26
```typescript { .api }
27
interface NxJestPreset extends Config {
28
  /** Test file matching patterns */
29
  testMatch: string[];
30
  /** Custom Jest module resolver for Nx projects */  
31
  resolver: string;
32
  /** Supported file extensions for modules */
33
  moduleFileExtensions: string[];
34
  /** Coverage report formats */
35
  coverageReporters: string[];
36
  /** File transformation rules */
37
  transform: Record<string, [string, any]>;
38
  /** Default test environment */
39
  testEnvironment: string;
40
  /** Test environment configuration options */
41
  testEnvironmentOptions: {
42
    customExportConditions: string[];
43
  };
44
}
45
```
46

47
### Default Configuration Values
48

49
The preset includes the following default configuration:
50

51
```typescript { .api }
52
const nxPreset: Config = {
53
  /** Jest's default test file patterns with additional extensions */
54
  testMatch: ['**/?(*.)+(spec|test).?([mc])[jt]s?(x)'],
55
  /** Nx-specific module resolver for better monorepo support */
56
  resolver: '@nx/jest/plugins/resolver',
57
  /** Extended file extensions including modern JS/TS variants */
58
  moduleFileExtensions: ['ts', 'js', 'mts', 'mjs', 'cts', 'cjs', 'html'],
59
  /** HTML coverage reports by default */
60
  coverageReporters: ['html'],
61
  /** TypeScript and JavaScript transformation with ts-jest */
62
  transform: {
63
    '^.+\\.(ts|js|mts|mjs|cts|cjs|html)$': [
64
      'ts-jest',
65
      { tsconfig: '<rootDir>/tsconfig.spec.json' }
66
    ]
67
  },
68
  /** JSDOM environment for DOM testing */
69
  testEnvironment: 'jsdom',
70
  /** CommonJS compatibility settings */
71
  testEnvironmentOptions: {
72
    customExportConditions: ['node', 'require', 'default']
73
  }
74
};
75
```
76

77
**Usage Examples:**
78

79
```typescript
80
// Basic preset usage
81
import { nxPreset } from '@nx/jest/preset';
82

83
export default {
84
  ...nxPreset,
85
  displayName: 'my-project',
86
  coverageDirectory: '../../coverage/apps/my-project'
87
};
88

89
// CommonJS usage
90
const { nxPreset } = require('@nx/jest/preset');
91

92
module.exports = {
93
  ...nxPreset,
94
  displayName: 'my-project'
95
};
96
```
97

98
### Customizing the Preset
99

100
The preset can be extended and customized for specific project needs:
101

102
```typescript
103
import { nxPreset } from '@nx/jest/preset';
104

105
export default {
106
  ...nxPreset,
107
  // Override test environment
108
  testEnvironment: 'node',
109
  
110
  // Add custom test patterns
111
  testMatch: [
112
    ...nxPreset.testMatch,
113
    '**/*.integration.spec.ts'
114
  ],
115
  
116
  // Extend transformations
117
  transform: {
118
    ...nxPreset.transform,
119
    '^.+\\.vue$': 'vue-jest'
120
  },
121
  
122
  // Add module name mapping
123
  moduleNameMapper: {
124
    '^@/(.*)$': '<rootDir>/src/$1'
125
  },
126
  
127
  // Custom setup files
128
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts']
129
};
130
```
131

132
### Test Environment Configuration
133

134
The preset defaults to `jsdom` with CommonJS compatibility settings:
135

136
```typescript { .api }
137
interface TestEnvironmentOptions {
138
  /** Export conditions for module resolution */
139
  customExportConditions: string[];
140
}
141
```
142

143
**Environment Customization:**
144

145
```typescript
146
// Node.js environment for backend testing
147
export default {
148
  ...nxPreset,
149
  testEnvironment: 'node',
150
  testEnvironmentOptions: {
151
    // Node-specific export conditions
152
    customExportConditions: ['node', 'require']
153
  }
154
};
155

156
// Browser environment with custom options
157
export default {
158
  ...nxPreset,
159
  testEnvironment: 'jsdom',
160
  testEnvironmentOptions: {
161
    ...nxPreset.testEnvironmentOptions,
162
    url: 'http://localhost:3000'
163
  }
164
};
165
```
166

167
### File Extension Support
168

169
The preset supports a comprehensive set of file extensions:
170

171
```typescript
172
// Supported extensions in order of precedence
173
moduleFileExtensions: [
174
  'ts',   // TypeScript
175
  'js',   // JavaScript
176
  'mts',  // ES Module TypeScript
177
  'mjs',  // ES Module JavaScript  
178
  'cts',  // CommonJS TypeScript
179
  'cjs',  // CommonJS JavaScript
180
  'html'  // HTML files
181
]
182
```
183

184
### Transformation Rules
185

186
Default transformation configuration for various file types:
187

188
```typescript { .api }
189
interface TransformConfig {
190
  [pattern: string]: [string, TransformOptions];
191
}
192

193
interface TransformOptions {
194
  /** TypeScript configuration file */
195
  tsconfig: string;
196
  /** Additional ts-jest options */
197
  [key: string]: any;
198
}
199
```
200

201
**Transform Customization:**
202

203
```typescript
204
export default {
205
  ...nxPreset,
206
  transform: {
207
    ...nxPreset.transform,
208
    // Add Babel transformation for specific files
209
    '^.+\\.jsx?$': 'babel-jest',
210
    // Add SWC transformation  
211
    '^.+\\.(t|j)sx?$': ['@swc/jest'],
212
    // Static asset transformation
213
    '\\.(jpg|jpeg|png|gif|svg)$': 'jest-transform-stub'
214
  }
215
};
216
```
217

218
### Module Resolution
219

220
The preset includes a custom resolver optimized for Nx monorepos:
221

222
```typescript
223
// Custom resolver handles:
224
// - TypeScript path mapping
225
// - Nx library imports
226
// - CSS/SCSS file mocking
227
// - Package.json exports field
228
// - ESM/CommonJS compatibility
229
resolver: '@nx/jest/plugins/resolver'
230
```
231

232
### Coverage Configuration
233

234
Default coverage reporting with HTML output:
235

236
```typescript
237
export default {
238
  ...nxPreset,
239
  // Extend coverage reporters
240
  coverageReporters: [
241
    ...nxPreset.coverageReporters,
242
    'text-summary',
243
    'lcov'
244
  ],
245
  
246
  // Coverage collection patterns
247
  collectCoverageFrom: [
248
    'src/**/*.{ts,tsx,js,jsx}',
249
    '!src/**/*.d.ts',
250
    '!src/**/*.stories.{ts,tsx}'
251
  ],
252
  
253
  // Coverage thresholds
254
  coverageThreshold: {
255
    global: {
256
      branches: 80,
257
      functions: 80,
258
      lines: 80,
259
      statements: 80
260
    }
261
  }
262
};
263
```
264

265
### Integration with Nx Features
266

267
The preset is designed to work seamlessly with Nx features:
268

269
- **Caching**: Optimized for Nx's computation caching
270
- **Affected**: Configured for affected test detection  
271
- **Build System**: Compatible with Nx's build pipeline
272
- **Workspace Libraries**: Supports importing workspace libraries
273
- **Path Mapping**: Handles TypeScript path mapping automatically
274

275
### Common Preset Extensions
276

277
#### React Projects
278

279
```typescript
280
import { nxPreset } from '@nx/jest/preset';
281

282
export default {
283
  ...nxPreset,
284
  testEnvironment: 'jsdom',
285
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
286
  moduleNameMapper: {
287
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
288
  },
289
  transform: {
290
    ...nxPreset.transform,
291
    '^.+\\.(ts|tsx)$': ['ts-jest', {
292
      tsconfig: '<rootDir>/tsconfig.spec.json'
293
    }]
294
  }
295
};
296
```
297

298
#### Node.js Libraries
299

300
```typescript
301
import { nxPreset } from '@nx/jest/preset';
302

303
export default {
304
  ...nxPreset,
305
  testEnvironment: 'node',
306
  testEnvironmentOptions: {
307
    customExportConditions: ['node', 'require']
308
  },
309
  coverageDirectory: '../../coverage/libs/my-lib'
310
};
311
```
312

313
#### Angular Projects
314

315
```typescript
316
import { nxPreset } from '@nx/jest/preset';
317

318
export default {
319
  ...nxPreset,
320
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
321
  globals: {
322
    'ts-jest': {
323
      tsconfig: '<rootDir>/tsconfig.spec.json',
324
      stringifyContentPathRegex: '\\.(html|svg)$'
325
    }
326
  },
327
  transform: {
328
    ...nxPreset.transform,
329
    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
330
  }
331
};
332
```
333

334
### Migration from Custom Configurations
335

336
The preset simplifies migration from custom Jest configurations:
337

338
```typescript
339
// Before: Custom configuration
340
export default {
341
  testMatch: ['<rootDir>/src/**/*.(test|spec).ts'],
342
  transform: {
343
    '^.+\\.ts$': 'ts-jest'
344
  },
345
  testEnvironment: 'jsdom',
346
  moduleFileExtensions: ['ts', 'js']
347
};
348

349
// After: Using preset
350
import { nxPreset } from '@nx/jest/preset';
351

352
export default {
353
  ...nxPreset,
354
  // Only specify project-specific overrides
355
  displayName: 'my-project',
356
  coverageDirectory: '../../coverage/my-project'
357
};
358
```