onUnhandledRequest: Adds request handler declaration suggestion

src/onUnhandledRequest.ts

@@ -1,4 +1,5 @@
 import { MockedRequest } from './handlers/requestHandler'
+import { getPublicUrlFromRequest } from './utils/getPublicUrlFromRequest'
 
 type UnhandledRequestCallback = (req: MockedRequest) => void
 
@@ -17,7 +18,17 @@ export function onUnhandledRequest(
     return
   }
 
-  const message = `captured a ${request.method} ${request.url} request without a corresponding request handler.`
+  const publicUrl = getPublicUrlFromRequest(request)
+
+  const message = `captured a ${request.method} ${
+    request.url
+  } request without a corresponding request handler.
+
+  If you wish to intercept this request, consider creating a request handler for it:
+
+  rest.${request.method.toLowerCase()}('${publicUrl}', (req, res, ctx) => {
+    return res(ctx.text('body'))
+  })`
 
   switch (onUnhandledRequest) {
     case 'error': {

test/msw-api/setup-server/scenarios/on-unhandled-request/error.test.ts

@@ -11,13 +11,23 @@ const server = setupServer(
   }),
 )
 
-beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
-afterAll(() => server.close())
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' })
+})
+
+afterAll(() => {
+  server.close()
+})
 
 test('errors on unhandled request when using the "error" value', async () => {
   const getResponse = () => fetch('https://test.mswjs.io')
 
-  await expect(getResponse()).rejects.toThrow(
-    'request to https://test.mswjs.io/ failed, reason: [MSW] Error: captured a GET https://test.mswjs.io/ request without a corresponding request handler.',
-  )
+  await expect(getResponse()).rejects.toThrow(`\
+request to https://test.mswjs.io/ failed, reason: [MSW] Error: captured a GET https://test.mswjs.io/ request without a corresponding request handler.
+
+  If you wish to intercept this request, consider creating a request handler for it:
+
+  rest.get('https://test.mswjs.io/', (req, res, ctx) => {
+    return res(ctx.text('body'))
+  })`)
 })

test/msw-api/setup-server/scenarios/on-unhandled-request/warn.test.ts

@@ -11,7 +11,10 @@ const server = setupServer(
   }),
 )
 
-beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }))
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'warn' })
+})
+
 afterAll(() => {
   server.close()
   jest.restoreAllMocks()
@@ -23,7 +26,12 @@ test('warns on unhandled request when using the "warn" value', async () => {
   const res = await fetch('https://test.mswjs.io')
 
   expect(res).toHaveProperty('status', 404)
-  expect(console.warn).toBeCalledWith(
-    '[MSW] Warning: captured a GET https://test.mswjs.io/ request without a corresponding request handler.',
-  )
+  expect(console.warn).toBeCalledWith(`\
+[MSW] Warning: captured a GET https://test.mswjs.io/ request without a corresponding request handler.
+
+  If you wish to intercept this request, consider creating a request handler for it:
+
+  rest.get('https://test.mswjs.io/', (req, res, ctx) => {
+    return res(ctx.text('body'))
+  })`)
 })

test/msw-api/setup-worker/start/on-unhandled-request/warn.test.ts

@@ -7,15 +7,15 @@ import {
 
 let runtime: TestAPI
 
-beforeAll(async () => {
+beforeEach(async () => {
   runtime = await runBrowserWith(path.resolve(__dirname, 'warn.mocks.ts'))
 })
 
 afterEach(async () => {
   await runtime.cleanup()
 })
 
-test('warns on an unhandled request when using the "warn" option', async () => {
+test('warns on an absolute unhandled request', async () => {
   const { messages } = captureConsole(runtime.page)
 
   const res = await runtime.request({
@@ -29,7 +29,43 @@ test('warns on an unhandled request when using the "warn" option', async () => {
   const libraryWarnings = messages.warning.filter(filterLibraryLogs)
 
   expect(libraryErrors).toHaveLength(0)
-  expect(libraryWarnings).toContain(
-    '[MSW] Warning: captured a GET https://mswjs.io/non-existing-page request without a corresponding request handler.',
-  )
+  expect(libraryWarnings).toContain(`\
+[MSW] Warning: captured a GET https://mswjs.io/non-existing-page request without a corresponding request handler.
+
+  If you wish to intercept this request, consider creating a request handler for it:
+
+  rest.get('https://mswjs.io/non-existing-page', (req, res, ctx) => {
+    return res(ctx.text('body'))
+  })`)
+})
+
+test('warns on a relative unhandled request', async () => {
+  const { messages } = captureConsole(runtime.page)
+
+  const url = `${runtime.origin}/user-details`
+  const res = await runtime.request({
+    url,
+  })
+  const status = res.status()
+
+  expect(status).toBe(404)
+
+  const libraryErrors = messages.error.filter(filterLibraryLogs)
+  const libraryWarnings = messages.warning.filter(filterLibraryLogs)
+  const requestHandlerWarning = libraryWarnings.find((text) => {
+    return /\[MSW\] Warning: captured a GET .+? request without a corresponding request handler/.test(
+      text,
+    )
+  })
+
+  expect(libraryErrors).toHaveLength(0)
+  expect(requestHandlerWarning).toBeTruthy()
+  expect(requestHandlerWarning).toMatch(`\
+[MSW] Warning: captured a GET ${url} request without a corresponding request handler.
+
+  If you wish to intercept this request, consider creating a request handler for it:
+
+  rest.get('/user-details', (req, res, ctx) => {
+    return res(ctx.text('body'))
+  })`)
 })