Mock Service Worker

Mock Service Worker

MSW Setup

1. Create a test file
2. Understand query and return values (use Chrome Fetch/XHR to analyse)
3. Create a MSW handler (api url, query params and create return json)
4. Setup beforeAll, afterEach and afterAll hooks in the test file
5. In a test render component and wait for it to be visible
6. Write assertions to verify expectations

Udemy course

With NX

Within a NX project.

1. Create Storybook library
2. Install MSW
3. Create public folder then run msw init
4. Create MSW Mock Handlers
5. Configure Mock MSW browser worker to run Handers
6. Configure Storybook preview to starter MSW browser worker
7. Add Public directory to NX workspace.json

Create a React component that have API endpoints configured in the MSW Handers.

When running Should get the mocked response.

npx nx storybook shared-ui

Step 7: Configure NX Workspace

"storybook": {
    "executor": "@nrwl/storybook:storybook",
    "options": {
    "uiFramework": "@storybook/react",
    "port": 4400,
    "config": {
        "configFolder": "libs/shared/ui/.storybook"
    },
    "staticDir": ["public"]  // Add public folder to workspace.json
    },
    "configurations": {
    "ci": {
        "quiet": true
    }
    }
},

Links

• Mock Service Worker
• Configure MSW in NX
• Example with Next.js
• Example with Storybook
• Mocking APIs with Storybook and NX

Questions

Which engineering decision related to this topic has the highest switching cost once made — and how do you make it well with incomplete information?

• At what scale or complexity level does the right answer to this topic change significantly?
• How does the introduction of AI-native workflows change the conventional wisdom about this technology?
• Which anti-pattern in this area is most commonly introduced by developers who know enough to be dangerous but not enough to know what they don't know?