Setup MSW for API mocking during development and testing#51
Setup MSW for API mocking during development and testing#51iamitprakash merged 7 commits intoRealDevSquad:developfrom
Conversation
Hariom01010
requested review from
Achintya-Chatterjee,
AnujChhikara,
MayankBansal12 and
RishiChaubey31
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughThe codebase introduces Mock Service Worker (MSW) integration for API mocking in development and testing. It adds mock data, handlers for task-related API endpoints, utility functions, type definitions, and conditional initialization logic for both browser and server environments. The app layout is updated to include an MSW provider, and the MSW worker script is added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant MSWProvider
participant MSW Worker/Server
participant Handlers
User->>App: Loads application
App->>MSWProvider: Render children
MSWProvider->>MSW Worker/Server: Initialize if in dev & mocking enabled
App->>API: Makes /v1/tasks request
API->>MSW Worker/Server: Intercept request
MSW Worker/Server->>Handlers: Route to appropriate handler (GET/POST/PATCH/DELETE)
Handlers->>MSW Worker/Server: Return mock response
MSW Worker/Server->>API: Respond with mock data
API->>App: Receives mock data
App->>User: Displays tasks using mock data
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Poem
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 (
|
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
 |
Unconditional MSW Provider Wrapper ▹ view | |
 |
Unconditional MSW Initialization ▹ view | |
 |
Insufficient context in unhandled request warning ▹ view | ✅ Fix detected |
 |
Complex conditional statement ▹ view | ✅ Fix detected |
|
Invalid MongoDB ObjectId Format Generation ▹ view | |
|
Unexplained Timestamp Conversion Constants ▹ view | ✅ Fix detected |
|
Inappropriate logging method for MSW initialization ▹ view | ✅ Fix detected |
|
Missing Import Preload ▹ view | |
|
Inefficient String Generation Method ▹ view | ✅ Fix detected |
|
Unclear request handling logic ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| mocks/handlers/index.ts | ✅ |
| mocks/server.ts | ✅ |
| mocks/browser.ts | ✅ |
| mocks/utils/generateObjectId.ts | ✅ |
| mocks/enableMockServer.ts | ✅ |
| app/layout.tsx | ✅ |
| app/msw-provider.tsx | ✅ |
| mocks/types.ts | ✅ |
| public/mockServiceWorker.js | ✅ |
| mocks/handlers/tasks.handler.ts | ✅ |
| mocks/db/tasks.ts | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (13)
__mocks__/Task.ts(0 hunks)__mocks__/browser.ts(1 hunks)__mocks__/db/tasks.ts(1 hunks)__mocks__/enableMockServer.ts(1 hunks)__mocks__/handlers/index.ts(1 hunks)__mocks__/handlers/tasks.handler.ts(1 hunks)__mocks__/server.ts(1 hunks)__mocks__/types.ts(1 hunks)__mocks__/utils/generateObjectId.ts(1 hunks)app/layout.tsx(2 hunks)app/msw-provider.tsx(1 hunks)package.json(2 hunks)public/mockServiceWorker.js(1 hunks)
💤 Files with no reviewable changes (1)
- mocks/Task.ts
🧰 Additional context used
🧬 Code Graph Analysis (8)
__mocks__/browser.ts (1)
__mocks__/handlers/index.ts (1)
handlers(3-3)
__mocks__/server.ts (1)
__mocks__/handlers/index.ts (1)
handlers(3-3)
__mocks__/handlers/index.ts (1)
__mocks__/handlers/tasks.handler.ts (1)
taskHandlers(325-325)
app/layout.tsx (2)
__mocks__/enableMockServer.ts (1)
enableServerMocking(1-7)app/msw-provider.tsx (1)
MSWProvider(28-36)
__mocks__/enableMockServer.ts (1)
__mocks__/server.ts (1)
server(4-4)
__mocks__/db/tasks.ts (1)
__mocks__/types.ts (1)
Task(1-39)
app/msw-provider.tsx (1)
__mocks__/browser.ts (1)
worker(4-4)
__mocks__/handlers/tasks.handler.ts (3)
__mocks__/db/tasks.ts (1)
tasksData(3-540)__mocks__/types.ts (2)
CreateTaskPayload(65-73)UpdateTaskPayload(75-89)__mocks__/utils/generateObjectId.ts (1)
generateObjectId(1-7)
🪛 Biome (1.9.4)
public/mockServiceWorker.js
[error] 288-288: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (14)
package.json (1)
62-66: LGTM! MSW configuration is correctly structured.The MSW configuration with
workerDirectory: ["public"]follows the standard setup pattern for Next.js applications.__mocks__/handlers/index.ts (1)
1-3: LGTM! Clean handler aggregation pattern.The handler aggregation approach provides good organization and scalability for managing multiple handler modules.
__mocks__/browser.ts (1)
1-4: LGTM! Standard MSW browser setup.The implementation follows the correct pattern for browser-side MSW setup with proper imports and worker configuration.
__mocks__/server.ts (1)
1-4: LGTM! Standard MSW server setup.The implementation follows the correct pattern for server-side MSW setup, complementing the browser setup for comprehensive mocking coverage.
__mocks__/utils/generateObjectId.ts (1)
1-7: LGTM! Correct ObjectId generation implementation.The function correctly generates MongoDB-compatible ObjectIds with:
- 8-character timestamp (Unix timestamp in hex)
- 16-character random hex string
- Total 24 characters matching MongoDB ObjectId format
The implementation is mathematically sound and appropriate for mock data generation.
app/layout.tsx (2)
4-7: Well-structured MSW integration!The integration properly enables both server-side and client-side mocking by calling
enableServerMocking()at the top level and wrapping the app withMSWProvider. This follows MSW best practices for Next.js applications.
29-31: Proper MSW provider setup in the component tree.The MSWProvider correctly wraps the children in the body element, ensuring all components have access to the mocking context on the client side.
__mocks__/db/tasks.ts (1)
3-540: Well-structured mock data with comprehensive coverage.The mock data provides excellent coverage of different task scenarios with varied priorities, statuses, assignees, and labels. The data structure is consistent and realistic for testing purposes.
app/msw-provider.tsx (2)
4-17: Excellent MSW worker setup with proper browser detection.The conditional promise setup properly checks for browser environment, development mode, and API mocking flag. The worker configuration correctly ignores Next.js internal requests and provides appropriate warnings for unhandled requests.
28-36: Well-implemented React Suspense pattern for async MSW initialization.The MSWProvider uses Suspense correctly to handle the asynchronous worker initialization, ensuring the MSW worker is ready before rendering children.
__mocks__/types.ts (1)
1-39: Comprehensive Task type definition with detailed structure.The Task type provides excellent coverage of all task-related fields including complex nested objects for assignees, labels, and deferred details. The structure supports comprehensive task management functionality.
__mocks__/handlers/tasks.handler.ts (2)
8-79: Clean pagination implementation with proper validation!The GET handler correctly validates query parameters, implements pagination with sensible defaults, and provides comprehensive error responses.
264-323: Well-implemented DELETE handler following REST conventions!Correctly returns 204 No Content on successful deletion and provides appropriate error responses.
public/mockServiceWorker.js (1)
1-345: Auto-generated MSW service worker file - no modifications needed.This file is automatically generated by MSW and should not be modified as stated in the header comments. Any updates should be done through MSW's initialization commands.
Hariom01010
force-pushed
the
setup-msw
branch
3 times, most recently
from
d070ced to
7fc8090
Compare
- separate ticket will be create for them - refactored msw setup
- fix prettier issues
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
 |
Insufficient Header Documentation Context ▹ view | |
|
Excessive Response/Request Cloning ▹ view | |
|
Empty MSW Handlers Array ▹ view | |
|
Unconditional MSW Initialization ▹ view | |
|
Use async/await over promise chains ▹ view | |
|
Avoid acronyms in component names ▹ view | ✅ Fix detected |
 |
Silent Mocking Initialization Failure ▹ view | ✅ Fix detected |
Files scanned
| File Path | Reviewed |
|---|---|
| mocks/handlers/index.ts | ✅ |
| mocks/server.ts | ✅ |
| mocks/browser.ts | ✅ |
| components/msw-provider.tsx | ✅ |
| app/layout.tsx | ✅ |
| mocks/init.ts | ✅ |
| components/providers.tsx | ✅ |
| public/mockServiceWorker.js | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
disabled - renamed MSWProvider to MockServiceWorkerProvider for better context
- update condition to consolve mocking is disable message only when app is running in dev
6 participants
Date: 05 Jul 2025
Developer Name: @Hariom01010
Issue Ticket Number
Closes #49
Description
This PR introduces MSW setup to enable API mocking during development and testing phases.
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
When mocking is disabled:
When mocking is enabled:
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Integrate Mock Service Worker (MSW) for API mocking during development and testing by setting up service worker scripts, adding application configuration settings, and employing relevant providers and modules.
Why are these changes being made?
The changes aim to enhance development and testing efficiency by allowing local API mocking, which circumvents the need for actual server communication and enables testing with predetermined server responses. This setup facilitates robust development workflows and simplifies testing by providing control over API interactions. By only activating mocks when the app is in development mode and isMockingEnabled, we ensure that production deployments aren't affected.