0
# Project Generation
1

2
The project generation capability provides generator functions that set up test configuration, dependencies, and example files when the plugin is added to a Vue CLI project.
3

4
## Capabilities
5

6
### Main Generator Function
7

8
The primary generator function that configures the project for Jest testing based on existing plugins and Vue version.
9

10
```javascript { .api }
11
/**
12
 * Main generator function for project setup
13
 * @param api - Generator API for modifying project files
14
 * @param options - Plugin-specific options
15
 * @param rootOptions - Root project options (Vue version, etc.)
16
 * @param invoking - Whether this is the initial plugin invocation
17
 */
18
function generator(
19
  api: GeneratorAPI,
20
  options: any,
21
  rootOptions: any,
22
  invoking: boolean
23
): void;
24
```
25

26
**Usage Example:**
27

28
```javascript
29
// generator/index.js
30
module.exports = (api, options, rootOptions, invoking) => {
31
  const isVue3 = rootOptions && rootOptions.vueVersion === '3'
32
  
33
  // Render template files
34
  api.render('./template', {
35
    isVue3,
36
    hasTS: api.hasPlugin('typescript'),
37
    hasRouter: api.hasPlugin('router')
38
  })
39
  
40
  // Configure package.json
41
  api.extendPackage({
42
    scripts: {
43
      'test:unit': 'vue-cli-service test:unit'
44
    },
45
    devDependencies: {
46
      '@vue/test-utils': isVue3 ? '^2.0.0-0' : '^1.0.3'
47
    }
48
  })
49
}
50
```
51

52
### ESLint Integration
53

54
Configures ESLint settings for test files when ESLint plugin is present.
55

56
```javascript { .api }
57
/**
58
 * Apply ESLint configuration for test files
59
 * @param api - Generator API for package modifications
60
 */
61
function applyESLint(api: GeneratorAPI): void;
62
```
63

64
**Usage Example:**
65

66
```javascript
67
const applyESLint = api => {
68
  api.extendPackage({
69
    eslintConfig: {
70
      overrides: [
71
        {
72
          files: [
73
            '**/__tests__/*.{j,t}s?(x)',
74
            '**/tests/unit/**/*.spec.{j,t}s?(x)'
75
          ],
76
          env: {
77
            jest: true
78
          }
79
        }
80
      ]
81
    }
82
  })
83
}
84
```
85

86
### TypeScript Integration
87

88
Configures TypeScript-specific Jest settings and type definitions.
89

90
```javascript { .api }
91
/**
92
 * Apply TypeScript configuration for Jest
93
 * @param api - Generator API for package modifications
94
 * @param invoking - Whether this is initial plugin invocation
95
 */
96
function applyTS(api: GeneratorAPI, invoking: boolean): void;
97
```
98

99
**Usage Example:**
100

101
```javascript
102
const applyTS = (api, invoking) => {
103
  api.extendPackage({
104
    jest: {
105
      preset: api.hasPlugin('babel')
106
        ? '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
107
        : '@vue/cli-plugin-unit-jest/presets/typescript'
108
    },
109
    devDependencies: {
110
      '@types/jest': '^24.0.19'
111
    }
112
  })
113
  
114
  // Inject Jest types into tsconfig.json if invoking
115
  if (invoking) {
116
    api.render(files => {
117
      const tsconfig = files['tsconfig.json']
118
      if (tsconfig) {
119
        const parsed = JSON.parse(tsconfig)
120
        if (!parsed.compilerOptions.types?.includes('jest')) {
121
          parsed.compilerOptions.types = parsed.compilerOptions.types || []
122
          parsed.compilerOptions.types.push('jest')
123
        }
124
        files['tsconfig.json'] = JSON.stringify(parsed, null, 2)
125
      }
126
    })
127
  }
128
}
129
```
130

131
## Package Configuration
132

133
### Script Addition
134

135
The generator automatically adds the test script to package.json:
136

137
```javascript { .api }
138
const scriptConfig = {
139
  scripts: {
140
    'test:unit': 'vue-cli-service test:unit'
141
  }
142
};
143
```
144

145
### Dependency Management
146

147
Dependencies are configured based on Vue version and existing plugins:
148

149
```javascript { .api }
150
interface DependencyConfig {
151
  devDependencies: {
152
    /** Vue Test Utils version based on Vue version */
153
    '@vue/test-utils': string;
154
    /** Jest type definitions for TypeScript projects */
155
    '@types/jest'?: string;
156
    /** Vue Jest transformer for Vue 3 projects */
157
    'vue-jest'?: string;
158
    /** TypeScript requirement for Vue 3 with vue-jest */
159
    'typescript'?: string;
160
  };
161
}
162
```
163

164
### Jest Configuration
165

166
The Jest configuration is set based on project plugins:
167

168
```javascript { .api }
169
interface JestConfig {
170
  jest: {
171
    /** Preset selection based on Babel/TypeScript presence */
172
    preset: string;
173
    /** Vue 3 specific transform configuration */
174
    transform?: {
175
      '^.+\\.vue$': string;
176
    };
177
  };
178
}
179
```
180

181
## Vue Version Handling
182

183
### Vue 2 Configuration
184

185
```javascript { .api }
186
const vue2Config = {
187
  devDependencies: {
188
    '@vue/test-utils': '^1.0.3'
189
  },
190
  jest: {
191
    preset: '@vue/cli-plugin-unit-jest' // Uses default preset
192
  }
193
};
194
```
195

196
### Vue 3 Configuration
197

198
```javascript { .api }
199
const vue3Config = {
200
  devDependencies: {
201
    '@vue/test-utils': '^2.0.0-0',
202
    'vue-jest': '^5.0.0-0',
203
    'typescript': '~3.9.3' // Required by vue-jest 5.0.0-alpha.1
204
  },
205
  jest: {
206
    transform: {
207
      '^.+\\.vue$': 'vue-jest'
208
    }
209
  }
210
};
211
```
212

213
## Template Rendering
214

215
### Template Data
216

217
The generator provides template data for conditional rendering:
218

219
```javascript { .api }
220
interface TemplateData {
221
  /** Whether project uses Vue 3 */
222
  isVue3: boolean;
223
  /** Whether TypeScript plugin is present */
224
  hasTS: boolean;
225
  /** Whether Router plugin is present */
226
  hasRouter: boolean;
227
}
228
```
229

230
### Example Test Templates
231

232
The generator creates example test files with conditional content based on project configuration:
233

234
**JavaScript Template (example.spec.js):**
235

236
```javascript
237
// For regular Vue projects
238
import { shallowMount } from '@vue/test-utils'
239
import HelloWorld from '@/components/HelloWorld.vue'
240

241
describe('HelloWorld.vue', () => {
242
  it('renders props.msg when passed', () => {
243
    const msg = 'new message'
244
    const wrapper = shallowMount(HelloWorld, {
245
      // Vue 3 uses props, Vue 2 uses propsData
246
      props: { msg } // or propsData: { msg } for Vue 2
247
    })
248
    expect(wrapper.text()).toMatch(msg)
249
  })
250
})
251
```
252

253
```javascript
254
// For bare projects without HelloWorld component
255
import { shallowMount } from '@vue/test-utils'
256
import App from '@/App.vue'
257

258
test('App should work', () => {
259
  const wrapper = shallowMount(App)
260
  expect(wrapper.text()).toMatch(`Welcome to Your Vue.js App`)
261
})
262
```
263

264
```javascript
265
// For bare projects with router
266
import { mount, createLocalVue } from '@vue/test-utils'
267
import VueRouter from 'vue-router'
268
import App from '@/App.vue'
269
import router from '@/router'
270

271
const localVue = createLocalVue()
272
localVue.use(VueRouter)
273

274
test('App should render default route', () => {
275
  const wrapper = mount(App, {
276
    localVue,
277
    router
278
  })
279
  expect(wrapper.text()).toMatch(`Welcome to Your Vue.js App`)
280
})
281
```
282

283
**TypeScript Template (example.spec.ts):**
284

285
```typescript
286
// Same as JavaScript but with TypeScript syntax and type checking
287
import { shallowMount } from '@vue/test-utils'
288
import HelloWorld from '@/components/HelloWorld.vue'
289

290
describe('HelloWorld.vue', () => {
291
  it('renders props.msg when passed', () => {
292
    const msg: string = 'new message'
293
    const wrapper = shallowMount(HelloWorld, {
294
      props: { msg } // Vue 3 syntax shown
295
    })
296
    expect(wrapper.text()).toMatch(msg)
297
  })
298
})
299
```
300

301
## Plugin Detection
302

303
The generator uses plugin detection to configure Jest presets appropriately:
304

305
```javascript { .api }
306
interface PluginDetection {
307
  /** Check if Babel plugin is present */
308
  hasPlugin(name: 'babel'): boolean;
309
  /** Check if TypeScript plugin is present */
310
  hasPlugin(name: 'typescript'): boolean;
311
  /** Check if ESLint plugin is present */
312
  hasPlugin(name: 'eslint'): boolean;
313
  /** Check if Router plugin is present */
314
  hasPlugin(name: 'router'): boolean;
315
}
316
```
317

318
## Types
319

320
```javascript { .api }
321
interface GeneratorAPI {
322
  /** Render template files with data */
323
  render(templatePath: string, templateData?: any): void;
324
  /** Render with file modification callback */
325
  render(callback: (files: Record<string, string>) => void): void;
326
  /** Extend package.json with additional configuration */
327
  extendPackage(packageAdditions: any): void;
328
  /** Check if a specific plugin is present in the project */
329
  hasPlugin(pluginName: string): boolean;
330
}
331

332
interface PackageExtension {
333
  /** NPM scripts to add */
334
  scripts?: Record<string, string>;
335
  /** Development dependencies to add */
336
  devDependencies?: Record<string, string>;
337
  /** Jest configuration */
338
  jest?: any;
339
  /** ESLint configuration */
340
  eslintConfig?: any;
341
}
342
```