@jmlweb/vitest-config 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +204 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @jmlweb/vitest-config
|
|
2
2
|
|
|
3
|
+
## 1.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 4a9ece1: Update documentation to use pnpm commands instead of npm
|
|
8
|
+
|
|
9
|
+
## 1.0.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 6b73301: Add changelog section with link to CHANGELOG.md in package READMEs
|
|
14
|
+
|
|
3
15
|
## 1.0.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -19,9 +19,11 @@
|
|
|
19
19
|
## 📦 Installation
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
|
|
22
|
+
pnpm add -D @jmlweb/vitest-config vitest
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
> 💡 **Upgrading from a previous version?** See the [Migration Guide](#-migration-guide) for breaking changes and upgrade instructions.
|
|
26
|
+
|
|
25
27
|
## 🚀 Quick Start
|
|
26
28
|
|
|
27
29
|
Create a `vitest.config.ts` file in your project root:
|
|
@@ -120,6 +122,38 @@ export default defineConfig({
|
|
|
120
122
|
});
|
|
121
123
|
```
|
|
122
124
|
|
|
125
|
+
## 🤔 Why Use This?
|
|
126
|
+
|
|
127
|
+
> **Philosophy**: Modern testing should be fast, have excellent DX, and enforce meaningful coverage without slowing down development.
|
|
128
|
+
|
|
129
|
+
This package provides a Vitest configuration optimized for speed and developer experience while maintaining high code quality standards. It leverages Vitest's Vite-powered architecture for extremely fast test execution and hot module replacement during test development.
|
|
130
|
+
|
|
131
|
+
### Design Decisions
|
|
132
|
+
|
|
133
|
+
**80% Coverage Thresholds**: Balanced quality enforcement
|
|
134
|
+
|
|
135
|
+
- **Why**: 80% coverage ensures most code is tested without creating unrealistic goals that lead to testing trivial code just to hit metrics. It's high enough to catch bugs but low enough to remain practical for real-world development
|
|
136
|
+
- **Trade-off**: Some projects need higher (90%+) or lower (60%) thresholds depending on criticality
|
|
137
|
+
- **When to override**: Increase for safety-critical code, decrease for rapid prototyping or legacy code being brought under test
|
|
138
|
+
|
|
139
|
+
**Global Test Functions (`globals: true`)**: Familiar testing API
|
|
140
|
+
|
|
141
|
+
- **Why**: Enables the familiar `describe`, `it`, `expect` globals without imports, matching Jest's API. This makes migration easier and reduces boilerplate in every test file. Most developers expect this API
|
|
142
|
+
- **Trade-off**: Technically pollutes global scope, but this is standard in testing and expected behavior
|
|
143
|
+
- **When to override**: If you prefer explicit imports (`import { describe, it, expect } from 'vitest'`) for stricter code style
|
|
144
|
+
|
|
145
|
+
**Thread Pool (`pool: 'threads'`)**: Parallel test execution
|
|
146
|
+
|
|
147
|
+
- **Why**: Vitest's thread pool runs tests in parallel using worker threads, dramatically speeding up large test suites. Much faster than Jest's default process-based isolation while maintaining proper isolation
|
|
148
|
+
- **Trade-off**: Minimal memory overhead from worker threads. But the speed improvement is significant
|
|
149
|
+
- **When to override**: For tests with native modules that don't work in workers - use `forks` pool instead
|
|
150
|
+
|
|
151
|
+
**V8 Coverage Provider**: Fast native coverage
|
|
152
|
+
|
|
153
|
+
- **Why**: V8's built-in coverage is significantly faster than instrumentation-based coverage (like Istanbul). For Vitest projects, it's the best choice for speed while maintaining accuracy
|
|
154
|
+
- **Trade-off**: Less configurable than Istanbul, but coverage accuracy is equivalent for modern code
|
|
155
|
+
- **When to override**: Rarely needed - V8 coverage works well for all modern JavaScript/TypeScript
|
|
156
|
+
|
|
123
157
|
## 📋 Configuration Details
|
|
124
158
|
|
|
125
159
|
### Default Settings
|
|
@@ -221,11 +255,11 @@ Add test scripts to your `package.json`:
|
|
|
221
255
|
Then run:
|
|
222
256
|
|
|
223
257
|
```bash
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
258
|
+
pnpm test # Run tests in watch mode
|
|
259
|
+
pnpm test:run # Run tests once
|
|
260
|
+
pnpm test:coverage # Run tests with coverage
|
|
261
|
+
pnpm test:ui # Open Vitest UI
|
|
262
|
+
pnpm test:typecheck # Run TypeScript type checking
|
|
229
263
|
```
|
|
230
264
|
|
|
231
265
|
### TypeScript Type Checking
|
|
@@ -234,10 +268,10 @@ Type checking is performed separately using the `vitest typecheck` command for b
|
|
|
234
268
|
|
|
235
269
|
```bash
|
|
236
270
|
# Run type checking only
|
|
237
|
-
|
|
271
|
+
pnpm test:typecheck
|
|
238
272
|
|
|
239
273
|
# Or run tests and type checking together
|
|
240
|
-
|
|
274
|
+
pnpm test && pnpm test:typecheck
|
|
241
275
|
```
|
|
242
276
|
|
|
243
277
|
## 📋 Requirements
|
|
@@ -261,10 +295,172 @@ See real-world usage examples:
|
|
|
261
295
|
|
|
262
296
|
## 🔗 Related Packages
|
|
263
297
|
|
|
298
|
+
### Internal Packages
|
|
299
|
+
|
|
300
|
+
- [`@jmlweb/jest-config`](../jest-config) - Jest configuration (alternative test runner)
|
|
264
301
|
- [`@jmlweb/eslint-config-base`](../eslint-config-base) - ESLint config for TypeScript projects
|
|
265
302
|
- [`@jmlweb/prettier-config-base`](../prettier-config-base) - Prettier config for consistent formatting
|
|
266
303
|
- [`@jmlweb/tsconfig-base`](../tsconfig-base) - TypeScript configuration
|
|
267
304
|
|
|
305
|
+
### External Tools
|
|
306
|
+
|
|
307
|
+
- [Vitest](https://vitest.dev/) - Blazing-fast unit test framework powered by Vite
|
|
308
|
+
- [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/) - Custom matchers for the DOM (works with Vitest)
|
|
309
|
+
- [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) - React testing utilities (for React projects)
|
|
310
|
+
- [@vitest/ui](https://vitest.dev/guide/ui.html) - Visual UI for Vitest test results
|
|
311
|
+
|
|
312
|
+
## ⚠️ Common Issues
|
|
313
|
+
|
|
314
|
+
> **Note:** This section documents known issues and their solutions. If you encounter a problem not listed here, please [open an issue](https://github.com/jmlweb/tooling/issues/new).
|
|
315
|
+
|
|
316
|
+
### Module Resolution Issues
|
|
317
|
+
|
|
318
|
+
**Symptoms:**
|
|
319
|
+
|
|
320
|
+
- Error: "Cannot find module" when running tests
|
|
321
|
+
- Import paths work in the app but fail in tests
|
|
322
|
+
|
|
323
|
+
**Cause:**
|
|
324
|
+
|
|
325
|
+
- Vitest uses Vite's module resolution which may differ from TypeScript
|
|
326
|
+
- Path aliases or special imports not configured for tests
|
|
327
|
+
|
|
328
|
+
**Solution:**
|
|
329
|
+
|
|
330
|
+
If you're using path aliases in `tsconfig.json`, configure them in your Vitest config:
|
|
331
|
+
|
|
332
|
+
```typescript
|
|
333
|
+
// vitest.config.ts
|
|
334
|
+
import { defineConfig } from 'vitest/config';
|
|
335
|
+
import vitestConfig from '@jmlweb/vitest-config';
|
|
336
|
+
|
|
337
|
+
export default defineConfig({
|
|
338
|
+
...vitestConfig,
|
|
339
|
+
resolve: {
|
|
340
|
+
alias: {
|
|
341
|
+
'@': '/src',
|
|
342
|
+
'@components': '/src/components',
|
|
343
|
+
},
|
|
344
|
+
},
|
|
345
|
+
});
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
### jsdom or happy-dom Not Found
|
|
349
|
+
|
|
350
|
+
**Symptoms:**
|
|
351
|
+
|
|
352
|
+
- Error: "Environment 'jsdom' not found" or "Environment 'happy-dom' not found"
|
|
353
|
+
- Tests fail to run with DOM-related errors
|
|
354
|
+
|
|
355
|
+
**Cause:**
|
|
356
|
+
|
|
357
|
+
- The test environment package is not installed
|
|
358
|
+
- This config specifies the environment but doesn't install it (peer dependency)
|
|
359
|
+
|
|
360
|
+
**Solution:**
|
|
361
|
+
|
|
362
|
+
Install the DOM environment package:
|
|
363
|
+
|
|
364
|
+
```bash
|
|
365
|
+
# For jsdom (more compatible, slower)
|
|
366
|
+
pnpm add -D jsdom
|
|
367
|
+
|
|
368
|
+
# Or for happy-dom (faster, less compatible)
|
|
369
|
+
pnpm add -D happy-dom
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
Then specify in your config if different from default:
|
|
373
|
+
|
|
374
|
+
```typescript
|
|
375
|
+
// vitest.config.ts
|
|
376
|
+
import { defineConfig } from 'vitest/config';
|
|
377
|
+
import vitestConfig from '@jmlweb/vitest-config';
|
|
378
|
+
|
|
379
|
+
export default defineConfig({
|
|
380
|
+
...vitestConfig,
|
|
381
|
+
test: {
|
|
382
|
+
...vitestConfig.test,
|
|
383
|
+
environment: 'jsdom', // or 'happy-dom'
|
|
384
|
+
},
|
|
385
|
+
});
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
### Coverage Not Working
|
|
389
|
+
|
|
390
|
+
**Symptoms:**
|
|
391
|
+
|
|
392
|
+
- No coverage reports generated
|
|
393
|
+
- Coverage command runs but shows no output
|
|
394
|
+
|
|
395
|
+
**Cause:**
|
|
396
|
+
|
|
397
|
+
- Coverage provider not installed
|
|
398
|
+
- Coverage not enabled in configuration
|
|
399
|
+
|
|
400
|
+
**Solution:**
|
|
401
|
+
|
|
402
|
+
Install the coverage provider:
|
|
403
|
+
|
|
404
|
+
```bash
|
|
405
|
+
pnpm add -D @vitest/coverage-v8
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
Run tests with coverage flag:
|
|
409
|
+
|
|
410
|
+
```bash
|
|
411
|
+
vitest --coverage
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
### Test Files Not Found
|
|
415
|
+
|
|
416
|
+
**Symptoms:**
|
|
417
|
+
|
|
418
|
+
- "No test files found" even though test files exist
|
|
419
|
+
- Vitest doesn't pick up `*.test.ts` or `*.spec.ts` files
|
|
420
|
+
|
|
421
|
+
**Cause:**
|
|
422
|
+
|
|
423
|
+
- Test file pattern mismatch
|
|
424
|
+
- Files in excluded directories
|
|
425
|
+
|
|
426
|
+
**Solution:**
|
|
427
|
+
|
|
428
|
+
This config includes common patterns. If your tests aren't found, check:
|
|
429
|
+
|
|
430
|
+
1. File naming: Use `.test.ts`, `.spec.ts`, `.test.tsx`, or `.spec.tsx`
|
|
431
|
+
2. Location: Ensure tests aren't in `node_modules` or `dist`
|
|
432
|
+
3. Explicitly include test patterns:
|
|
433
|
+
|
|
434
|
+
```typescript
|
|
435
|
+
// vitest.config.ts
|
|
436
|
+
import { defineConfig } from 'vitest/config';
|
|
437
|
+
import vitestConfig from '@jmlweb/vitest-config';
|
|
438
|
+
|
|
439
|
+
export default defineConfig({
|
|
440
|
+
...vitestConfig,
|
|
441
|
+
test: {
|
|
442
|
+
...vitestConfig.test,
|
|
443
|
+
include: ['**/*.{test,spec}.{ts,tsx}'],
|
|
444
|
+
},
|
|
445
|
+
});
|
|
446
|
+
```
|
|
447
|
+
|
|
448
|
+
## 🔄 Migration Guide
|
|
449
|
+
|
|
450
|
+
### Upgrading to a New Version
|
|
451
|
+
|
|
452
|
+
> **Note:** If no breaking changes were introduced in a version, it's safe to upgrade without additional steps.
|
|
453
|
+
|
|
454
|
+
**No breaking changes have been introduced yet.** This package follows semantic versioning. When breaking changes are introduced, detailed migration instructions will be provided here.
|
|
455
|
+
|
|
456
|
+
For version history, see the [Changelog](./CHANGELOG.md).
|
|
457
|
+
|
|
458
|
+
**Need Help?** If you encounter issues during migration, please [open an issue](https://github.com/jmlweb/tooling/issues/new).
|
|
459
|
+
|
|
460
|
+
## 📜 Changelog
|
|
461
|
+
|
|
462
|
+
See [CHANGELOG.md](./CHANGELOG.md) for version history and release notes.
|
|
463
|
+
|
|
268
464
|
## 📄 License
|
|
269
465
|
|
|
270
466
|
MIT
|
package/package.json
CHANGED