Using Mocked Service Worker (msw) with @web/test-runner

Question

I am trying to setup msw with @web/test-runner (and playwright). The problem is that I don't know how the mockServiceWorker.js can be picked up by the test runner (which uses browser, not nodejs like jest). There is an example with karma: https://github.com/mswjs/examples/tree/master/examples/with-karma, probably I have to do something similar but I have no idea where to start. Any hints are welcome.

I am not sure if it is important, but let me share my web.test-runner.config.js

import vite from 'vite-web-test-runner-plugin'
import { playwrightLauncher } from '@web/test-runner-playwright';

export default {
  plugins: [ vite() ],
  coverageConfig: {
    include: [ 'src/**/*.{svelte,js,jsx,ts,tsx}' ]
  },
  browsers: [
    playwrightLauncher({ product: 'chromium' })
  ],
  testRunnerHtml: testFramework => `
  <!DOCTYPE html>
    <html>
      <head>
        <script type="module">
          window.global = window;
          window.process = { env: {} };
        </script>
        <script type="module" src="${testFramework}"></script>
      </head>
    </html>
};

and my test command

"test": "web-test-runner \"test/**/*.test.ts\"",

score 0 · Answer 1 · answered Mar 13 '23 at 06:19

The short answer is to substitute of msw import by import maps to module with re-export of IIFE distributed module.

The setup is quite long to be described here, read more in How to integrate MSW queries mocking with @web/test-runner and StoryBook, there is also a link to working sources.

Using Mocked Service Worker (msw) with @web/test-runner

1 Answers1