msw 1.3.1 → 2.0.0

package/README.md

@@ -1,3 +1,6 @@
+> [!IMPORTANT]\
+> **MSW 2.0 is finally here! 🎉** Read the [Release notes](https://github.com/mswjs/msw/releases/tag/v2.0.0) and please follow the [**Migration guidelines**](https://mswjs.io/docs/migrations/1.x-to-2.x) to upgrade. If you're having any questions while upgrading, please reach out in our [Discord server](https://kettanaito.com/discord).
+
 <br />
 
 <p align="center">
@@ -25,7 +28,7 @@
 
 - **Seamless**. A dedicated layer of requests interception at your disposal. Keep your application's code and tests unaware of whether something is mocked or not.
 - **Deviation-free**. Request the same production resources and test the actual behavior of your app. Augment an existing API, or design it as you go when there is none.
-- **Familiar & Powerful**. Use [Express](https://github.com/expressjs/express)-like routing syntax to capture requests. Use parameters, wildcards, and regular expressions to match requests, and respond with necessary status codes, headers, cookies, delays, or completely custom resolvers.
+- **Familiar & Powerful**. Use [Express](https://github.com/expressjs/express)-like routing syntax to intercept requests. Use parameters, wildcards, and regular expressions to match requests, and respond with necessary status codes, headers, cookies, delays, or completely custom resolvers.
 
 ---
 
@@ -38,8 +41,7 @@
 This README will give you a brief overview on the library but there's no better place to start with Mock Service Worker than its official documentation.
 
 - [Documentation](https://mswjs.io/docs)
-- [**Getting started**](https://mswjs.io/docs/getting-started/install)
-- [Recipes](https://mswjs.io/docs/recipes)
+- [**Getting started**](https://mswjs.io/docs/getting-started)
 - [FAQ](https://mswjs.io/docs/faq)
 
 ## Examples
@@ -48,12 +50,12 @@ This README will give you a brief overview on the library but there's no better
 
 ## Browser
 
-- [Learn more about using MSW in a browser](https://mswjs.io/docs/getting-started/integrate/browser)
+- [Learn more about using MSW in a browser](https://mswjs.io/docs/integrations/browser)
 - [`setupWorker` API](https://mswjs.io/docs/api/setup-worker)
 
 ### How does it work?
 
-In-browser usage is what sets Mock Service Worker apart from other tools. Utilizing the [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), which can intercept requests for the purpose of caching, Mock Service Worker responds to captured requests with your mock definition on the network level. This way your application knows nothing about the mocking.
+In-browser usage is what sets Mock Service Worker apart from other tools. Utilizing the [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API), which can intercept requests for the purpose of caching, Mock Service Worker responds to intercepted requests with your mock definition on the network level. This way your application knows nothing about the mocking.
 
 **Take a look at this quick presentation on how Mock Service Worker functions in a browser:**
 
@@ -71,17 +73,20 @@ In-browser usage is what sets Mock Service Worker apart from other tools. Utiliz
 ```js
 // src/mocks.js
 // 1. Import the library.
-import { setupWorker, rest } from 'msw'
+import { http, HttpResponse } from 'msw'
+import { setupWorker } from 'msw/browser'
 
 // 2. Describe network behavior with request handlers.
 const worker = setupWorker(
-  rest.get('https://github.com/octocat', (req, res, ctx) => {
-    return res(
-      ctx.delay(1500),
-      ctx.status(202, 'Mocked status'),
-      ctx.json({
-        message: 'Mocked response JSON body',
-      }),
+  http.get('https://github.com/octocat', ({ request, params, cookies }) => {
+    return HttpResponse.json(
+      {
+        message: 'Mocked response',
+      },
+      {
+        status: 202,
+        statusText: 'Mocked status',
+      },
     )
   }),
 )
@@ -98,7 +103,7 @@ Performing a `GET https://github.com/octocat` request in your application will r
 
 ## Node.js
 
-- [Learn more about using MSW in Node.js](https://mswjs.io/docs/getting-started/integrate/node)
+- [Learn more about using MSW in Node.js](https://mswjs.io/docs/integrations/node)
 - [`setupServer` API](https://mswjs.io/docs/api/setup-server)
 
 ### How does it work?
@@ -118,7 +123,7 @@ Take a look at the example of an integration test in Jest that uses [React Testi
 // test/Dashboard.test.js
 
 import React from 'react'
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { render, screen, waitFor } from '@testing-library/react'
 import Dashboard from '../src/components/Dashboard'
@@ -127,19 +132,17 @@ const server = setupServer(
   // Describe network behavior with request handlers.
   // Tip: move the handlers into their own module and
   // import it across your browser and Node.js setups!
-  rest.get('/posts', (req, res, ctx) => {
-    return res(
-      ctx.json([
-        {
-          id: 'f8dd058f-9006-4174-8d49-e3086bc39c21',
-          title: `Avoid Nesting When You're Testing`,
-        },
-        {
-          id: '8ac96078-6434-4959-80ed-cc834e7fef61',
-          title: `How I Built A Modern Website In 2021`,
-        },
-      ]),
-    )
+  http.get('/posts', ({ request, params, cookies }) => {
+    return HttpResponse.json([
+      {
+        id: 'f8dd058f-9006-4174-8d49-e3086bc39c21',
+        title: `Avoid Nesting When You're Testing`,
+      },
+      {
+        id: '8ac96078-6434-4959-80ed-cc834e7fef61',
+        title: `How I Built A Modern Website In 2021`,
+      },
+    ])
   }),
 )
 
@@ -174,7 +177,7 @@ it('displays the list of recent posts', async () => {
 })
 ```
 
-> Don't get overwhelmed! We've prepared a step-by-step [**Getting started**](https://mswjs.io/docs/getting-started/install) tutorial that you can follow to learn how to integrate Mock Service Worker into your project.
+> Don't get overwhelmed! We've prepared a step-by-step [**Getting started**](https://mswjs.io/docs/getting-started) tutorial that you can follow to learn how to integrate Mock Service Worker into your project.
 
 Despite the API being called `setupServer`, there are no actual servers involved! The name was chosen for familiarity, and the API was designed to resemble operating with an actual server.
 

package/browser/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../lib/browser/index.js",
+  "module": "../lib/browser/index.mjs",
+  "types": "../lib/browser/index.d.ts"
+}

package/cli/init.js

@@ -21,14 +21,14 @@ module.exports = async function init(args) {
 
   if (!dirExists) {
     // Try to create the directory if it doesn't exist
-    const [createDirectoryError] = await until(() =>
+    const createDirectoryResult = await until(() =>
       fs.promises.mkdir(absolutePublicDir, { recursive: true }),
     )
     invariant(
-      createDirectoryError == null,
+      createDirectoryResult.error == null,
       'Failed to create a Service Worker at "%s": directory does not exist and could not be created.\nMake sure to include a relative path to the root directory of your server.\n\nSee the original error below:\n%s',
       absolutePublicDir,
-      createDirectoryError,
+      createDirectoryResult.error,
     )
   }
 

package/config/constants.js

@@ -2,8 +2,7 @@ const path = require('path')
 
 const SERVICE_WORKER_SOURCE_PATH = path.resolve(
   __dirname,
-  '../',
-  'src/mockServiceWorker.js',
+  '../src/mockServiceWorker.js',
 )
 
 const SERVICE_WORKER_BUILD_PATH = path.resolve(

package/lib/browser/index.d.ts

@@ -0,0 +1,104 @@
+import { SharedOptions, LifeCycleEventEmitter, LifeCycleEventsMap } from "../core/sharedOptions";
+import { RequestHandler, RequestHandlerDefaultInfo } from "../core/handlers/RequestHandler";
+import { SetupApi } from "../core/SetupApi";
+
+type FindWorker = (scriptUrl: string, mockServiceWorkerUrl: string) => boolean;
+interface StartOptions extends SharedOptions {
+    /**
+     * Service Worker registration options.
+     */
+    serviceWorker?: {
+        /**
+         * Custom url to the worker script.
+         * @default "/mockServiceWorker.js"
+         */
+        url?: string;
+        options?: RegistrationOptions;
+    };
+    /**
+     * Disables the logging of the intercepted requests
+     * into browser's console.
+     * @default false
+     */
+    quiet?: boolean;
+    /**
+     * Defers any network requests until the Service Worker
+     * instance is activated.
+     * @default true
+     */
+    waitUntilReady?: boolean;
+    /**
+     * A custom lookup function to find a Mock Service Worker in the list
+     * of all registered Service Workers on the page.
+     */
+    findWorker?: FindWorker;
+}
+type StartReturnType = Promise<ServiceWorkerRegistration | undefined>;
+type StopHandler = () => void;
+interface SetupWorker {
+    /**
+     * Registers and activates the mock Service Worker.
+     *
+     * @see {@link https://mswjs.io/docs/api/setup-worker/start `worker.start()` API reference}
+     */
+    start: (options?: StartOptions) => StartReturnType;
+    /**
+     * Stops requests interception for the current client.
+     *
+     * @see {@link https://mswjs.io/docs/api/setup-worker/stop `worker.stop()` API reference}
+     */
+    stop: StopHandler;
+    /**
+     * Prepends given request handlers to the list of existing handlers.
+     * @param {RequestHandler[]} handlers List of runtime request handlers.
+     *
+     * @see {@link https://mswjs.io/docs/api/setup-worker/use `worker.use()` API reference}
+     */
+    use: (...handlers: RequestHandler[]) => void;
+    /**
+     * Marks all request handlers that respond using `res.once()` as unused.
+     *
+     * @see {@link https://mswjs.io/docs/api/setup-worker/restore-handlers `worker.restoreHandlers()` API reference}
+     */
+    restoreHandlers: () => void;
+    /**
+     * Resets request handlers to the initial list given to the `setupWorker` call, or to the explicit next request handlers list, if given.
+     * @param {RequestHandler[]} nextHandlers List of the new initial request handlers.
+     *
+     * @see {@link https://mswjs.io/docs/api/setup-worker/reset-handlers `worker.resetHandlers()` API reference}
+     */
+    resetHandlers: (...nextHandlers: RequestHandler[]) => void;
+    /**
+     * Returns a readonly list of currently active request handlers.
+     *
+     * @see {@link https://mswjs.io/docs/api/setup-worker/list-handlers `worker.listHandlers()` API reference}
+     */
+    listHandlers(): ReadonlyArray<RequestHandler<RequestHandlerDefaultInfo, any>>;
+    /**
+     * Life-cycle events.
+     * Life-cycle events allow you to subscribe to the internal library events occurring during the request/response handling.
+     *
+     * @see {@link https://mswjs.io/docs/api/life-cycle-events Life-cycle Events API reference}
+     */
+    events: LifeCycleEventEmitter<LifeCycleEventsMap>;
+}
+
+declare class SetupWorkerApi extends SetupApi<LifeCycleEventsMap> implements SetupWorker {
+    private context;
+    private startHandler;
+    private stopHandler;
+    private listeners;
+    constructor(...handlers: Array<RequestHandler>);
+    private createWorkerContext;
+    start(options?: StartOptions): StartReturnType;
+    stop(): void;
+}
+/**
+ * Sets up a requests interception in the browser with the given request handlers.
+ * @param {RequestHandler[]} handlers List of request handlers.
+ *
+ * @see {@link https://mswjs.io/docs/api/setup-worker `setupWorker()` API reference}
+ */
+declare function setupWorker(...handlers: Array<RequestHandler>): SetupWorker;
+
+export { SetupWorker, SetupWorkerApi, StartOptions, setupWorker };