Using MSW with Karma

Environment

Name	Version
msw	0.21.3
browser	Chrome Headless 86.0.4240.183
OS	Mac OS 10.15.6

Request handlers

Added custom header to make sure the service worker is allowed.

// karma.conf.js
const path = require( 'path' );

module.exports = function( config ){
    config.set( {
        basePath: path.resolve( '.' ),
        frameworks: [ 'mocha', 'chai' ],
        client: {
            chai: { includeStack: true },
            mocha: { ui: 'bdd' }
        },
        customHeaders: [
            {
                match: '.*.html',
                name: 'Service-Worker-Allowed',
                value: '/'
            }
        ],
        files: [
            `test/**/${ specs }.spec.js`
        ],
        browsers: [ 'ChromeHeadless' ],
        singleRun: true
    } );
};

All files are located in /test including mockServiceWorker.js, installed via npx msw init test.

// handlers.js
const { rest } = require( 'msw' );

export const handlers = [
    rest.get( '/foo', async ( response, request, context ) => response( context.json( { foo: 123 } ) ) )
];

// worker.js
const { setupWorker } = require( 'msw' );
import { handlers } from './handlers';

export const worker = setupWorker( ...handlers );

Actual request

// foo.spec.js
const { expect } = require( 'chai' );
import { worker } from './worker';

describe( 'Fetching foo', function(){
    this.beforeAll( () => worker.start() );
    this.afterAll( () => worker.stop() );

    it( 'should handle foo', function(){
        return fetch( '/foo' ).then( ( response ) => response.json() ).then( function( data ){
            expect( data ).to.deep.equal( { foo: 123 } );
        } );
    } );
} );

Current behavior

ERROR: '[MSW] Failed to register a Service Worker for scope ('http://localhost:9876/') with script ('http://localhost:9876/mockServiceWorker.js'): Service Worker script does not exist at the given path.

Did you forget to run "npx msw init <PUBLIC_DIR>"?

Learn more about creating the Service Worker script: https://mswjs.io/docs/cli/init'

I have tried tweaking options within worker.start(), including changing the url and scope, and using findWorker, which never seemed to execute.

Expected behavior

I expect the service worker to intercept the request.

[jeffrose]

In my monorepo project, karma and its plugins were all hoisted to the root node_modules. It’s not always clear to me why yarn chooses to hoist some modules but not others. You could add a nohoist entry to your package.json.

"workspaces": {
  "packages": [
    "examples/*"
  ],
  "nohoist": [
    "**/karma*"
  ]
}

[kettanaito]

The nonoist option is what solved the issue. Thank you, @jeffrose!

We now have an official Karma usage example. Please refer to it if you’re having troubles setting up Karma and MSW.

Thanks everybody for contribution on this ❤️