0
# Jest Presets
1

2
The Jest presets capability provides pre-configured Jest settings for different project configurations, handling Vue Single File Components, TypeScript, Babel transpilation, and asset transformation.
3

4
## Capabilities
5

6
### Default Preset
7

8
Standard Jest configuration for Vue projects with Babel support.
9

10
```javascript { .api }
11
/**
12
 * Default Jest preset with Babel support
13
 * Located at: presets/default/jest-preset.js
14
 */
15
const defaultPreset: JestPreset;
16
```
17

18
**Usage Example:**
19

20
```javascript
21
// jest.config.js
22
module.exports = {
23
  preset: '@vue/cli-plugin-unit-jest'
24
}
25
```
26

27
### No-Babel Preset
28

29
Jest configuration for projects without Babel, using a custom ES module transformer.
30

31
```javascript { .api }
32
/**
33
 * Jest preset for projects without Babel
34
 * Located at: presets/no-babel/jest-preset.js
35
 */
36
const noBabelPreset: JestPreset;
37
```
38

39
**Usage Example:**
40

41
```javascript
42
// jest.config.js
43
module.exports = {
44
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel'
45
}
46
```
47

48
### TypeScript Preset
49

50
Jest configuration with TypeScript support using ts-jest.
51

52
```javascript { .api }
53
/**
54
 * Jest preset for TypeScript projects
55
 * Located at: presets/typescript/jest-preset.js
56
 */
57
const typescriptPreset: JestPreset;
58
```
59

60
**Usage Example:**
61

62
```javascript
63
// jest.config.js
64
module.exports = {
65
  preset: '@vue/cli-plugin-unit-jest/presets/typescript'
66
}
67
```
68

69
### TypeScript and Babel Preset
70

71
Combined TypeScript and Babel support for complex project configurations.
72

73
```javascript { .api }
74
/**
75
 * Jest preset for TypeScript projects with Babel
76
 * Located at: presets/typescript-and-babel/jest-preset.js
77
 */
78
const typescriptBabelPreset: JestPreset;
79
```
80

81
**Usage Example:**
82

83
```javascript
84
// jest.config.js
85
module.exports = {
86
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
87
}
88
```
89

90
### ES Module Transformer
91

92
Custom Babel transformer for handling ES modules in projects without Babel configuration.
93

94
```javascript { .api }
95
/**
96
 * Custom Babel transformer for ES modules
97
 * Located at: presets/no-babel/esmoduleTransformer.js
98
 * Uses @babel/plugin-transform-modules-commonjs to convert ES modules to CommonJS
99
 */
100
const esmoduleTransformer: BabelTransformer;
101
```
102

103
**Implementation:**
104

105
```javascript
106
const esmoduleTransformer = babelJest.createTransformer({
107
  plugins: ['@babel/plugin-transform-modules-commonjs'],
108
  babelrc: false,
109
  configFile: false
110
});
111
```
112

113
## Preset Configuration Details
114

115
### Common Configuration
116

117
All presets share these common configuration patterns:
118

119
```javascript { .api }
120
interface JestPreset {
121
  /** File extensions that Jest should process */
122
  moduleFileExtensions: string[];
123
  /** Transformation rules for different file types */
124
  transform: Record<string, string>;
125
  /** Patterns for files that should not be transformed */
126
  transformIgnorePatterns: string[];
127
  /** Module path aliases (e.g., @ -> src) */
128
  moduleNameMapper: Record<string, string>;
129
  /** Test environment (jsdom for browser-like tests) */
130
  testEnvironment: string;
131
  /** Snapshot serializers for Vue components */
132
  snapshotSerializers: string[];
133
  /** Patterns to match test files */
134
  testMatch: string[];
135
  /** Base URL for tests */
136
  testURL: string;
137
  /** Jest watch mode plugins */
138
  watchPlugins: string[];
139
  /** Global configuration for transformers */
140
  globals?: Record<string, any>;
141
}
142
```
143

144
### Default Preset Configuration
145

146
```javascript { .api }
147
const defaultPresetConfig: JestPreset = {
148
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
149
  transform: {
150
    '^.+\\.vue$': 'vue-jest',
151
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
152
    '^.+\\.jsx?$': 'babel-jest'
153
  },
154
  transformIgnorePatterns: ['/node_modules/'],
155
  moduleNameMapper: {
156
    '^@/(.*)$': '<rootDir>/src/$1'
157
  },
158
  testEnvironment: 'jest-environment-jsdom-fifteen',
159
  snapshotSerializers: ['jest-serializer-vue'],
160
  testMatch: [
161
    '**/tests/unit/**/*.spec.[jt]s?(x)',
162
    '**/__tests__/*.[jt]s?(x)'
163
  ],
164
  testURL: 'http://localhost/',
165
  watchPlugins: [
166
    'jest-watch-typeahead/filename',
167
    'jest-watch-typeahead/testname'
168
  ]
169
};
170
```
171

172
### TypeScript Extensions
173

174
TypeScript presets extend the default configuration using deepmerge:
175

176
```javascript { .api }
177
const typescriptExtensions = {
178
  moduleFileExtensions: ['ts', 'tsx'], // Added to existing extensions
179
  transform: {
180
    '^.+\\.tsx?$': 'ts-jest' // TypeScript transformer
181
  }
182
};
183
```
184

185
**TypeScript Preset Implementation:**
186

187
```javascript
188
const deepmerge = require('deepmerge')
189
const defaultPreset = require('../default/jest-preset')
190

191
module.exports = deepmerge(defaultPreset, {
192
  moduleFileExtensions: ['ts', 'tsx'],
193
  transform: {
194
    '^.+\\.tsx?$': require.resolve('ts-jest')
195
  }
196
})
197
```
198

199
### Babel Integration
200

201
TypeScript with Babel preset enables Babel processing:
202

203
```javascript { .api }
204
const typescriptBabelConfig = {
205
  globals: {
206
    'ts-jest': {
207
      babelConfig: true // Enable Babel in ts-jest
208
    }
209
  }
210
};
211
```
212

213
**TypeScript with Babel Preset Implementation:**
214

215
```javascript
216
const deepmerge = require('deepmerge')
217
const defaultTsPreset = require('../typescript/jest-preset')
218

219
module.exports = deepmerge(defaultTsPreset, {
220
  globals: {
221
    'ts-jest': {
222
      babelConfig: true
223
    }
224
  }
225
})
226
```
227

228
### No-Babel Configuration
229

230
No-Babel preset uses custom transformer and Vue-Jest configuration:
231

232
```javascript { .api }
233
const noBabelConfig = {
234
  transform: {
235
    '^.+\\.jsx?$': './esmoduleTransformer' // Custom ES module transformer
236
  },
237
  globals: {
238
    'vue-jest': {
239
      babelConfig: {
240
        plugins: ['babel-plugin-transform-es2015-modules-commonjs']
241
      }
242
    }
243
  }
244
};
245
```
246

247
**No-Babel Preset Implementation:**
248

249
```javascript
250
const deepmerge = require('deepmerge')
251
const defaultPreset = require('../default/jest-preset')
252

253
module.exports = deepmerge(defaultPreset, {
254
  transform: {
255
    '^.+\\.jsx?$': require.resolve('./esmoduleTransformer')
256
  },
257
  globals: {
258
    'vue-jest': {
259
      babelConfig: {
260
        plugins: ['babel-plugin-transform-es2015-modules-commonjs']
261
      }
262
    }
263
  }
264
})
265
```
266

267
## File Transformation
268

269
### Vue Single File Components
270

271
```javascript { .api }
272
const vueTransform = {
273
  '^.+\\.vue$': 'vue-jest' // Process .vue files with vue-jest
274
};
275
```
276

277
### Asset Stubbing
278

279
```javascript { .api }
280
const assetTransform = {
281
  '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
282
};
283
```
284

285
### JavaScript/TypeScript
286

287
```javascript { .api }
288
const jsTransform = {
289
  '^.+\\.jsx?$': 'babel-jest', // JavaScript with Babel
290
  '^.+\\.tsx?$': 'ts-jest'     // TypeScript with ts-jest
291
};
292
```
293

294
## Test File Patterns
295

296
```javascript { .api }
297
const testPatterns = [
298
  '**/tests/unit/**/*.spec.[jt]s?(x)', // Dedicated test directories
299
  '**/__tests__/*.[jt]s?(x)'           // Co-located test files
300
];
301
```
302

303
These patterns match:
304
- `tests/unit/MyComponent.spec.js`
305
- `tests/unit/utils/helpers.spec.ts`
306
- `src/components/__tests__/MyComponent.js`
307
- `src/utils/__tests__/helper.tsx`
308

309
## Preset Merging
310

311
All presets (except default) use deepmerge to combine configurations:
312

313
```javascript { .api }
314
/**
315
 * Deep merge utility for combining Jest configurations
316
 * @param target - Base configuration object
317
 * @param source - Configuration to merge into target
318
 * @returns Merged configuration object
319
 */
320
function deepmerge<T>(target: T, source: Partial<T>): T;
321
```
322

323
**Usage Pattern:**
324

325
```javascript
326
const deepmerge = require('deepmerge')
327
const basePreset = require('../default/jest-preset')
328

329
module.exports = deepmerge(basePreset, {
330
  // Additional or overriding configuration
331
})
332
```
333

334
## Types
335

336
```javascript { .api }
337
interface BabelTransformer {
338
  /** Create transformer with Babel configuration */
339
  createTransformer(config: BabelConfig): any;
340
}
341

342
interface BabelConfig {
343
  /** Babel plugins to apply */
344
  plugins: string[];
345
  /** Disable .babelrc file reading */
346
  babelrc: boolean;
347
  /** Disable babel.config.js file reading */
348
  configFile: boolean;
349
}
350
```