From 7e250f4d203c796e03be12d3e0849e9f2af28d96 Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Tue, 23 Jun 2020 22:46:51 +0200 Subject: [PATCH 1/5] test: add failing test --- .../msw-api/setup-worker/start/error.mocks.ts | 15 ++++++++++ test/msw-api/setup-worker/start/error.test.ts | 29 +++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 test/msw-api/setup-worker/start/error.mocks.ts create mode 100644 test/msw-api/setup-worker/start/error.test.ts diff --git a/test/msw-api/setup-worker/start/error.mocks.ts b/test/msw-api/setup-worker/start/error.mocks.ts new file mode 100644 index 000000000..d4a5ef7bd --- /dev/null +++ b/test/msw-api/setup-worker/start/error.mocks.ts @@ -0,0 +1,15 @@ +import { setupWorker, rest } from 'msw' + +const worker = setupWorker( + rest.get('/user', (req, res, ctx) => { + return res( + ctx.json({ + firstName: 'John', + age: 32, + }), + ) + }), +) + +// @ts-ignore +window.__MSW_START__ = worker.start diff --git a/test/msw-api/setup-worker/start/error.test.ts b/test/msw-api/setup-worker/start/error.test.ts new file mode 100644 index 000000000..e18c5c875 --- /dev/null +++ b/test/msw-api/setup-worker/start/error.test.ts @@ -0,0 +1,29 @@ +import * as path from 'path' +import { runBrowserWith } from '../../../support/runBrowserWith' +import { captureConsole } from '../../../support/captureConsole' + +describe('API: setupWorker / start with error', () => { + it('should print an error if we try to start woker with a non existent worker file', async () => { + const logs = [] + const runtime = await runBrowserWith( + path.resolve(__dirname, 'error.mocks.ts'), + ) + captureConsole(runtime.page, logs, (message) => { + return message.type() === 'error' + }) + await runtime.page.evaluate(() => { + // @ts-ignore + return window.window.__MSW_START__({ + serviceWorker: { + url: 'invalidServiceWorker', + }, + }) + }) + expect(logs).toHaveLength(1) + expect(logs[0]).toMatchInlineSnapshot(` + "[MSW] Failed to register a ServiceWorker for scope ('http://localhost:62036/') with script ('http://localhost:62036/invalidServiceWorker'): A bad HTTP response code (404) was received when fetching the script. + If the worker file has not been found maybe you didn't run \\"npx msw init \\"" + `) + runtime.cleanup() + }) +}) From 7ffeb3351bf83e463096849467f4fa70d5969551 Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Tue, 23 Jun 2020 22:48:50 +0200 Subject: [PATCH 2/5] fix: improve error message when msw fails to register worker fix #237 --- src/setupWorker/start/utils/getWorkerInstance.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/setupWorker/start/utils/getWorkerInstance.ts b/src/setupWorker/start/utils/getWorkerInstance.ts index f2ac86274..08cf04dc8 100644 --- a/src/setupWorker/start/utils/getWorkerInstance.ts +++ b/src/setupWorker/start/utils/getWorkerInstance.ts @@ -46,7 +46,6 @@ export const getWorkerInstance = async ( ] }) } - const [error, instance] = await until( async () => { const registration = await navigator.serviceWorker.register(url, options) @@ -56,9 +55,8 @@ export const getWorkerInstance = async ( if (error) { console.error( - '[MSW] Failed to register Service Worker (%s). %o', - url, - error, + `[MSW] ${error.message} + If the worker file has not been found maybe you didn't run "npx msw init "`, ) return null } From 230e803b5de459866575b873373065c3c9b1f7ee Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Wed, 24 Jun 2020 07:08:31 +0200 Subject: [PATCH 3/5] refactor: simplify mock --- test/msw-api/setup-worker/start/error.mocks.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/test/msw-api/setup-worker/start/error.mocks.ts b/test/msw-api/setup-worker/start/error.mocks.ts index d4a5ef7bd..95e1b1461 100644 --- a/test/msw-api/setup-worker/start/error.mocks.ts +++ b/test/msw-api/setup-worker/start/error.mocks.ts @@ -2,12 +2,7 @@ import { setupWorker, rest } from 'msw' const worker = setupWorker( rest.get('/user', (req, res, ctx) => { - return res( - ctx.json({ - firstName: 'John', - age: 32, - }), - ) + return res(ctx.status(200)) }), ) From 736d0cd307768d4aa7aa298eb0b11e1d41e56800 Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Wed, 24 Jun 2020 07:08:51 +0200 Subject: [PATCH 4/5] test: fix url in message --- test/msw-api/setup-worker/start/error.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/msw-api/setup-worker/start/error.test.ts b/test/msw-api/setup-worker/start/error.test.ts index e18c5c875..b2aa9472c 100644 --- a/test/msw-api/setup-worker/start/error.test.ts +++ b/test/msw-api/setup-worker/start/error.test.ts @@ -21,7 +21,7 @@ describe('API: setupWorker / start with error', () => { }) expect(logs).toHaveLength(1) expect(logs[0]).toMatchInlineSnapshot(` - "[MSW] Failed to register a ServiceWorker for scope ('http://localhost:62036/') with script ('http://localhost:62036/invalidServiceWorker'): A bad HTTP response code (404) was received when fetching the script. + "[MSW] Failed to register a ServiceWorker for scope ('${runtime.page.url()}') with script ('${runtime.page.url()}invalidServiceWorker'): A bad HTTP response code (404) was received when fetching the script. If the worker file has not been found maybe you didn't run \\"npx msw init \\"" `) runtime.cleanup() From 2e51be3cbc1c4df4041ecb6e6c612fb1b18bf6b6 Mon Sep 17 00:00:00 2001 From: Artem Zakharchenko Date: Wed, 24 Jun 2020 08:59:25 +0200 Subject: [PATCH 5/5] setupWorker (start): Provides a custom error message when given a non-existing worker script --- .../start/utils/activateMocking.ts | 2 +- .../start/utils/getWorkerInstance.ts | 21 ++++++- test/msw-api/setup-worker/start/error.test.ts | 55 +++++++++++-------- 3 files changed, 52 insertions(+), 26 deletions(-) diff --git a/src/setupWorker/start/utils/activateMocking.ts b/src/setupWorker/start/utils/activateMocking.ts index c1045b29b..181442f2b 100644 --- a/src/setupWorker/start/utils/activateMocking.ts +++ b/src/setupWorker/start/utils/activateMocking.ts @@ -18,7 +18,7 @@ export const activateMocking = ( 'color:orangered;font-weight:bold;', ) console.log( - '%cDocumentation: %chttps://redd.gitbook.io/msw', + '%cDocumentation: %chttps://mswjs.io/docs', 'font-weight:bold', 'font-weight:normal', ) diff --git a/src/setupWorker/start/utils/getWorkerInstance.ts b/src/setupWorker/start/utils/getWorkerInstance.ts index 08cf04dc8..8af0a367b 100644 --- a/src/setupWorker/start/utils/getWorkerInstance.ts +++ b/src/setupWorker/start/utils/getWorkerInstance.ts @@ -54,9 +54,26 @@ export const getWorkerInstance = async ( ) if (error) { + const isWorkerMissing = error.message.includes('(404)') + + // Produce a custom error message when given a non-existing Service Worker url. + // Suggest developers to check their setup. + if (isWorkerMissing) { + const scopeUrl = new URL(options?.scope || '/', location.href) + + console.error(`\ +[MSW] Failed to register a Service Worker for scope ('${scopeUrl.href}') with script ('${absoluteWorkerUrl}'): Service Worker script does not exist at the given path. + +Did you forget to run "npx msw init "? + +Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/init`) + + return null + } + + // Fallback error message for any other registration errors. console.error( - `[MSW] ${error.message} - If the worker file has not been found maybe you didn't run "npx msw init "`, + `[MSW] Failed to register a Service Worker:\n\m${error.message}`, ) return null } diff --git a/test/msw-api/setup-worker/start/error.test.ts b/test/msw-api/setup-worker/start/error.test.ts index b2aa9472c..d5d0fa9cc 100644 --- a/test/msw-api/setup-worker/start/error.test.ts +++ b/test/msw-api/setup-worker/start/error.test.ts @@ -1,29 +1,38 @@ import * as path from 'path' -import { runBrowserWith } from '../../../support/runBrowserWith' +import { TestAPI, runBrowserWith } from '../../../support/runBrowserWith' import { captureConsole } from '../../../support/captureConsole' -describe('API: setupWorker / start with error', () => { - it('should print an error if we try to start woker with a non existent worker file', async () => { - const logs = [] - const runtime = await runBrowserWith( - path.resolve(__dirname, 'error.mocks.ts'), - ) - captureConsole(runtime.page, logs, (message) => { - return message.type() === 'error' - }) - await runtime.page.evaluate(() => { - // @ts-ignore - return window.window.__MSW_START__({ - serviceWorker: { - url: 'invalidServiceWorker', - }, - }) +let runtime: TestAPI + +beforeAll(async () => { + runtime = await runBrowserWith(path.resolve(__dirname, 'error.mocks.ts')) +}) + +afterAll(() => runtime.cleanup()) + +test('prints a custom error message when given a non-existing worker script', async () => { + const errors: string[] = [] + captureConsole(runtime.page, errors, (message) => { + return message.type() === 'error' + }) + + await runtime.page.evaluate(() => { + // @ts-ignore + return window.window.__MSW_START__({ + serviceWorker: { + url: 'invalidServiceWorker', + }, }) - expect(logs).toHaveLength(1) - expect(logs[0]).toMatchInlineSnapshot(` - "[MSW] Failed to register a ServiceWorker for scope ('${runtime.page.url()}') with script ('${runtime.page.url()}invalidServiceWorker'): A bad HTTP response code (404) was received when fetching the script. - If the worker file has not been found maybe you didn't run \\"npx msw init \\"" - `) - runtime.cleanup() }) + + const workerNotFoundMessage = errors.find((message) => { + return ( + message.startsWith( + `[MSW] Failed to register a Service Worker for scope ('${runtime.page.url()}')`, + ) && + message.includes('Did you forget to run "npx msw init "?') + ) + }) + + expect(workerNotFoundMessage).toBeTruthy() })