[FE-Feat] Vitest 및 Tsup config 세팅 #421
Conversation
WalkthroughThis change introduces centralized configuration packages for Vitest and Tsup, adds them to the workspace, and refactors all frontend apps and packages to use these shared configs for consistent testing and build processes. It also updates workspace scripts, adds project-level Vitest configs, and standardizes path aliasing across packages. Changes
Sequence Diagram(s)sequenceDiagram
participant TestRunner as Vitest CLI
participant SharedConfig as @endolphin/vitest-config
participant ProjectConfig as <package>/vitest.config.ts
TestRunner->>ProjectConfig: Load vitest.config.ts
ProjectConfig->>SharedConfig: Import base config & alias helpers
ProjectConfig->>ProjectConfig: Define project-specific aliases
ProjectConfig->>SharedConfig: Merge base config with project config
ProjectConfig-->>TestRunner: Export merged config
TestRunner->>TestRunner: Run tests with unified config
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (8)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (7)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (6)
frontend/configs/vitest-config/src/createAlias.ts (1)
3-7: Complete the JSDoc documentation.The JSDoc comment is incomplete and has formatting issues.
/** - * + * Creates alias mappings for common source directories. * @param {string} dirname - 현재 패키지의 루트 디렉토리. - * @returns + * @returns {object} Object mapping alias keys to resolved paths. */frontend/configs/vitest-config/package.json (1)
1-17: Consider adding missing package metadata.The package.json is functionally correct but missing some standard fields that would improve package management and discoverability.
{ "name": "@endolphin/vitest-config", "version": "1.0.0", + "description": "Shared Vitest configuration for endolphin frontend projects", + "license": "MIT", "type": "module", "main": "./dist/index.js",frontend/pnpm-workspace.yaml (1)
5-5: Ensure newline at EOF
YAMLlint flagged a missing newline at the end of the file. Append a blank line after the last entry to satisfy the linter.frontend/packages/calendar/package.json (1)
12-15: Optional: Add coverage script
Consider adding acoveragescript (e.g.,"coverage": "vitest run --coverage") to maintain consistency with other packages and facilitate coverage reporting.frontend/configs/tsup-config/tsconfig.json (1)
1-9: Centralized Tsup TypeScript config setup looks solid
The configuration correctly extends the base, outputs declarations, and targets thesrcdirectory.Consider adding a
rootDirfor stricter file placement:"compilerOptions": { + "rootDir": "src", "outDir": "dist", "declaration": true, "declarationDir": "dist/types", },frontend/configs/tsup-config/src/react.ts (1)
4-12: Consider enabling source maps for debugging.
Generating source maps can improve traceability when consuming the library.export const reactConfig = defineConfig({ + sourcemap: true, format: ['esm'], entry: ['src/index.ts'], outDir: 'dist',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (36)
frontend/apps/client/package.json(1 hunks)frontend/apps/client/vite.config.ts(0 hunks)frontend/apps/client/vitest.config.ts(1 hunks)frontend/apps/server/package.json(1 hunks)frontend/apps/server/tsup.config.ts(1 hunks)frontend/apps/server/vitest.config.ts(1 hunks)frontend/configs/tsup-config/package.json(1 hunks)frontend/configs/tsup-config/src/index.ts(1 hunks)frontend/configs/tsup-config/src/node.ts(1 hunks)frontend/configs/tsup-config/src/react.ts(1 hunks)frontend/configs/tsup-config/tsconfig.json(1 hunks)frontend/configs/vitest-config/package.json(1 hunks)frontend/configs/vitest-config/src/createAlias.ts(1 hunks)frontend/configs/vitest-config/src/index.ts(1 hunks)frontend/configs/vitest-config/src/node.ts(1 hunks)frontend/configs/vitest-config/src/react.ts(1 hunks)frontend/configs/vitest-config/tsconfig.json(1 hunks)frontend/endolphin.code-workspace(1 hunks)frontend/package.json(2 hunks)frontend/packages/calendar/package.json(2 hunks)frontend/packages/calendar/tsup.config.ts(1 hunks)frontend/packages/calendar/vitest.config.ts(1 hunks)frontend/packages/core/package.json(1 hunks)frontend/packages/core/src/utils/date/date.test.ts(1 hunks)frontend/packages/core/src/utils/date/position.ts(1 hunks)frontend/packages/core/vitest.config.ts(1 hunks)frontend/packages/date-time/package.json(1 hunks)frontend/packages/date-time/tsup.config.ts(1 hunks)frontend/packages/date-time/vitest.config.ts(1 hunks)frontend/packages/theme/package.json(1 hunks)frontend/packages/theme/tsup.config.ts(1 hunks)frontend/packages/ui/package.json(2 hunks)frontend/packages/ui/tsup.config.ts(1 hunks)frontend/packages/ui/vitest.config.ts(1 hunks)frontend/pnpm-workspace.yaml(1 hunks)frontend/vitest.config.ts(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/apps/client/vite.config.ts
🧰 Additional context used
🧬 Code Graph Analysis (11)
frontend/packages/date-time/tsup.config.ts (1)
frontend/configs/tsup-config/src/node.ts (1)
nodeConfig(3-10)
frontend/packages/calendar/tsup.config.ts (1)
frontend/configs/tsup-config/src/react.ts (1)
reactConfig(4-12)
frontend/apps/server/vitest.config.ts (1)
frontend/configs/vitest-config/src/node.ts (1)
nodeConfig(3-10)
frontend/packages/core/vitest.config.ts (1)
frontend/configs/vitest-config/src/createAlias.ts (1)
createAlias(8-14)
frontend/packages/ui/vitest.config.ts (1)
frontend/configs/vitest-config/src/createAlias.ts (1)
createAlias(8-14)
frontend/packages/date-time/vitest.config.ts (2)
frontend/configs/vitest-config/src/node.ts (1)
nodeConfig(3-10)frontend/configs/vitest-config/src/createAlias.ts (1)
createAlias(8-14)
frontend/packages/calendar/vitest.config.ts (1)
frontend/configs/vitest-config/src/createAlias.ts (1)
createAlias(8-14)
frontend/apps/server/tsup.config.ts (1)
frontend/configs/tsup-config/src/node.ts (1)
nodeConfig(3-10)
frontend/apps/client/vitest.config.ts (1)
frontend/configs/vitest-config/src/createAlias.ts (1)
createAlias(8-14)
frontend/packages/theme/tsup.config.ts (1)
frontend/configs/tsup-config/src/react.ts (1)
reactConfig(4-12)
frontend/packages/ui/tsup.config.ts (1)
frontend/configs/tsup-config/src/react.ts (1)
reactConfig(4-12)
🪛 YAMLlint (1.37.1)
frontend/pnpm-workspace.yaml
[error] 4-4: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (39)
frontend/configs/vitest-config/src/node.ts (1)
1-10: LGTM! Clean and standard Vitest Node.js configuration.The configuration follows Vitest best practices with appropriate settings for Node.js environment testing. The inclusion patterns and options are well-chosen for a shared configuration.
frontend/configs/tsup-config/src/node.ts (1)
1-11: LGTM! Well-configured Tsup setup for Node.js projects.The configuration includes all essential options for a modern Node.js build setup with ESM output, TypeScript declarations, and proper cleanup. Good choice for a shared configuration.
frontend/configs/vitest-config/src/createAlias.ts (1)
8-14: LGTM! Well-designed alias utility function.The function correctly uses
path.resolveto create absolute paths and covers the most common alias patterns used in frontend projects. The implementation is clean and reusable.frontend/configs/vitest-config/src/react.ts (1)
1-10: React Vitest configuration setup is correct.
ThereactConfigexport uses appropriate test patterns and a jsdom environment for React testing.frontend/packages/core/src/utils/date/position.ts (1)
1-1: Alias import usage looks correct.
Ensure that the@constants/datepath is configured in your TypeScriptpaths(tsconfig.json) and resolves at runtime.frontend/packages/core/src/utils/date/date.test.ts (1)
1-1: Alias import updated correctly.
Confirm that the@constants/datealias is recognized by your test runner and TypeScript configuration.frontend/apps/server/package.json (1)
16-18: Added shared config packages to devDependencies.
The new@endolphin/tsup-configand@endolphin/vitest-configentries align with other workspace packages.frontend/packages/theme/package.json (1)
21-23: Introduced tsup-config as a devDependency.
This addition standardizes the build configuration for the theme package.frontend/apps/client/package.json (1)
31-34: Integrate shared Vitest config
Adding@endolphin/vitest-configas a devDependency standardizes test setup across all frontend apps.frontend/endolphin.code-workspace (1)
34-42: Include shared config packages in workspace
The newtsup-configandvitest-configfolders are correctly added to the workspace, enabling IDE awareness of these packages.frontend/pnpm-workspace.yaml (1)
3-4: Expand workspace to include config packages
Addingconfigs/*underpackagesensures the new shared config packages are part of the pnpm workspace.🧰 Tools
🪛 YAMLlint (1.37.1)
[error] 4-4: no new line character at the end of file
(new-line-at-end-of-file)
frontend/configs/tsup-config/src/index.ts (1)
1-2: Re-export tsup configs
The top-level index file cleanly re-exports bothnodeConfigandreactConfig. Verify that your TS config (e.g.,moduleResolution) supports.jsextensions in imports.frontend/packages/calendar/package.json (2)
12-15: Add start and test scripts
Includingtsup --watchfor development andvitestfor tests aligns this package with others in the monorepo.
24-27: Register shared build & test configs
Introducing@endolphin/tsup-configand@endolphin/vitest-configas devDependencies centralizes configuration.frontend/packages/ui/package.json (2)
13-15: Add Vitest test script alongside build/watch commands
Including"test": "vitest"aligns this package with the shared testing setup.
23-26: Include shared config packages in devDependencies
Depend on@endolphin/tsup-configand@endolphin/vitest-configto centralize build and test settings.frontend/package.json (2)
9-9: Add monorepo-wide recursive test script
The"test": "pnpm -r test"entry enables running Vitest across all workspace projects with a single command.
58-58: Upgrade Vitest to ^3.2.2
Ensure this bump is compatible with the new shared Vitest config and validate there are no breaking changes before merging.frontend/configs/vitest-config/tsconfig.json (1)
1-9: Central Vitest TypeScript config is correctly defined
Extends the base config and emits declarations intodist/typesfor the shared Vitest package.frontend/configs/vitest-config/src/index.ts (1)
1-3: Re-export core Vitest configuration modules
This centralizes imports (createAlias,node,react) for downstream Vitest configs.frontend/packages/date-time/tsup.config.ts (2)
1-1: LGTM! Proper import of shared configuration.Good refactoring to use the centralized
nodeConfigfrom the shared@endolphin/tsup-configpackage.
4-6: LGTM! Clean configuration spreading.The spread operator usage allows for future customization while leveraging the shared base configuration. This follows the DRY principle effectively.
frontend/apps/server/vitest.config.ts (2)
1-2: LGTM! Proper imports for shared Vitest configuration.Correctly imports the shared
nodeConfigand necessary Vitest utilities for configuration merging.
4-7: LGTM! Proper configuration merging pattern.The
mergeConfigapproach with an emptydefineProject({})allows for future customization while inheriting the base Node.js test configuration.frontend/configs/tsup-config/package.json (1)
1-17: LGTM! Well-structured package.json for shared configuration.The package configuration follows best practices:
- Proper ES module type declaration
- Clean export configuration for both runtime and types
- Restricted file publishing to
distdirectory- Simple and effective build script
frontend/packages/core/package.json (2)
19-19: LGTM! Test script added correctly.The addition of the vitest test script follows the standardization effort outlined in the PR objectives.
21-23: LGTM! Proper workspace dependency configuration.The use of
workspace:^protocol for the shared vitest config is appropriate for monorepo dependency management.frontend/packages/date-time/package.json (2)
13-13: LGTM! Consistent test script addition.The vitest test script addition is consistent with the standardization across packages.
18-21: LGTM! Complete shared config dependencies added.Both tsup-config and vitest-config dependencies are appropriately added using workspace protocol, enabling the package to use shared build and test configurations.
frontend/packages/calendar/vitest.config.ts (1)
1-16: LGTM! Proper vitest configuration setup.The configuration correctly:
- Uses ES module directory resolution with
fileURLToPath(import.meta.url)- Merges shared React config with project-specific aliases using
createAlias- Follows the standardized pattern for vitest configuration across packages
The implementation aligns well with the shared configuration strategy outlined in the PR objectives.
frontend/packages/calendar/tsup.config.ts (1)
1-10: LGTM! Excellent refactoring to shared configuration.The refactoring effectively:
- Uses shared
reactConfigfrom@endolphin/tsup-configto reduce duplication- Preserves package-specific requirements (
externaldependencies and CSSbanner)- Maintains the same build functionality while improving maintainability
This aligns perfectly with the PR's goal of standardizing build configurations across packages.
frontend/packages/core/vitest.config.ts (1)
1-16: LGTM! Clean implementation of shared Vitest configuration.The configuration correctly:
- Uses shared
reactConfigfor consistent testing setup- Implements proper ES module path resolution with
import.meta.url- Creates project-specific aliases for clean import paths in tests
- Follows Vitest best practices with
mergeConfiganddefineProjectThis approach will standardize testing across the frontend workspace while allowing package-specific customization.
frontend/apps/server/tsup.config.ts (1)
1-8: Excellent refactoring to shared configuration.The changes appropriately:
- Leverage shared
nodeConfigfor consistent Node.js build settings- Override
dts: falsewhich is sensible for server applications- Maintain
bundle: falsefor the existing build strategyThis reduces configuration duplication while preserving server-specific requirements.
frontend/packages/theme/tsup.config.ts (1)
1-6: Perfect simplification using shared configuration.The refactoring cleanly delegates all build configuration to the shared
reactConfig, which includes appropriate settings for React packages (ES modules, TypeScript declarations, Vanilla Extract plugin, etc.). This eliminates configuration duplication while maintaining all necessary functionality.frontend/packages/ui/tsup.config.ts (1)
1-10: Well-balanced use of shared configuration with appropriate overrides.The implementation correctly:
- Uses shared
reactConfigfor standard React package build settings- Preserves essential package-specific configurations:
external: ['@endolphin/theme']- proper dependency externalizationbannerwith CSS import - ensures component styles are includedThis demonstrates the ideal pattern of leveraging shared configs while maintaining necessary package-specific requirements.
frontend/packages/date-time/vitest.config.ts (2)
1-4: Imports and dependencies are correctly centralized.
The file cleanly pulls in shared Vitest utilities (createAlias,nodeConfig) and necessary Node.js modules.
9-16: Merging shared and project-specific configs is sound.
This follows the intended pattern for a monorepo Vitest setup—no further changes needed here.frontend/packages/ui/vitest.config.ts (1)
1-4: Shared React Vitest config import is correct.
Leveraging the centralizedreactConfigand alias helper aligns with the monorepo strategy.frontend/apps/client/vitest.config.ts (1)
1-4: Client app Vitest imports are set up properly.
The merge of sharedreactConfigwith package-specific aliases is correctly structured.
dioo1461
left a comment
dioo1461
left a comment
There was a problem hiding this comment.
에러없이 잘 작동하네요, 고생하셨습니다!!
#️⃣ 연관된 이슈>
📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)
configs폴더를 추가,vitest와tsup을 위한 공통config를 작성하고 사용합니다.🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
Summary by CodeRabbit
New Features
Refactor
Chores
Style